Merge pull request #5 from the-collab-lab/ADV-3-ALT-Navbar

add basic navbar - still static

Author: AliLynne

src/App.js

@@ -1,6 +1,6 @@
 import Header from './components/Header';
 import Footer from './components/Footer';
-import './App.css';
+import Navbar from './components/Navbar';
 
 import { Map } from './components/Map';
 
@@ -14,7 +14,7 @@ function App() {
         <Map />
       </main>
       <Footer>
-        <p>Footer</p>
+        <Navbar />
       </Footer>
     </div>
   );

src/components/Navbar.js

@@ -0,0 +1,31 @@
+const Navbar = () => {
+  return (
+    <nav className="navbar" aria-label="Main Menu">
+      <ul className="navbar__list">
+        <li className="navbar__list-item">
+          <span class="current">
+            <span class="visually-hidden">Current Page: </span>
+            Map
+          </span>
+        </li>
+        <li className="navbar__list-item">
+          <a href="list" className="navbar__list-link">
+            List
+          </a>
+        </li>
+        <li className="navbar__list-item">
+          <a href="settings" className="navbar__list-link">
+            Settings
+          </a>
+        </li>
+        <li className="navbar__list-item">
+          <a href="help" className="navbar__list-link">
+            Help
+          </a>
+        </li>
+      </ul>
+    </nav>
+  );
+};
+
+export default Navbar;

src/index.css

@@ -1,3 +1,9 @@
+/****** VARIABLES ******/
+:root {
+  --main-bg-color: #3e2e88;
+}
+
+/****** BASELINE ******/
 *,
 *::after,
 *::before {
@@ -35,7 +41,9 @@ h5 {
   font-size: 1.8rem;
 }
 
-p {
+span,
+p,
+a {
   font-size: 1.6rem;
 }
 
@@ -47,6 +55,37 @@ p {
   min-height: 66vh;
 }
 
+.visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+/****** MAP STYLES ******/
+
+/****** FOOTER STYLES ******/
+
 .footer {
   min-height: 33vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.navbar {
+  width: 100%;
+}
+
+.navbar__list {
+  display: flex;
+  justify-content: center;
+  list-style-type: none;
+}
+
+.navbar__list-item {
+  padding: 1rem;
 }