Riobaian create navbar

index.html

@@ -4,6 +4,14 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- add google fonts:  -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap"
+      rel="stylesheet"
+    />
+    <!-- end of google fonts -->
     <title>Vite + React</title>
   </head>
 

src/App.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
-import './App.css';
 import reactLogo from './assets/react.svg';
 import Navbar from './components/Navbar/Navbar';
 
@@ -21,17 +20,6 @@ function App() {
         </a>
       </div>
       <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
     </div>
   );
 }

src/components/Navbar/Navbar.css

@@ -0,0 +1,81 @@
+.navbar li {
+  list-style: none;
+}
+
+.navbar {
+  width: min(90%, 1440px);
+  margin: 0 auto;
+}
+
+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.navbar-list {
+  font-size: clamp(1.1rem, 1.125rem + 10vw, 1.5rem);
+  font-weight: 400;
+  flex: 0 1 auto;
+}
+
+.navbar-list a {
+  color: #13131a;
+}
+
+.navbar-list a:visited {
+  color: #03a47e;
+}
+
+.navbar-list li + li {
+  margin-left: 2em;
+}
+
+.navbar .cta-links {
+  display: flex;
+  align-items: center;
+}
+
+.cta-links a + a {
+  margin-left: 0.5em;
+  background-color: #03a47e;
+  color: #fff;
+}
+
+.cta-links a {
+  font-size: clamp(1rem, 1.125rem + 10vw, 1.25rem);
+  border-radius: 4px;
+  font-weight: 700;
+  padding: 0.8em 1.6em;
+}
+
+.login {
+  color: #03a47e;
+  border: 3px solid rgba(3, 164, 126, 1);
+}
+
+/* mobile first */
+@media (min-width: 799px) {
+  .navbar-list {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+/* navbar breakpoint at 1115px */
+@media (max-width: 1118px) {
+  .navbar-list li + li {
+    margin-left: 0.8em;
+  }
+}
+
+/* navbar list in 799 and below */
+@media (max-width: 799px) {
+  .navbar-list {
+    display: none;
+  }
+
+  .cta-links a {
+    padding: 0.4em 0.8em;
+  }
+}

src/components/Navbar/Navbar.tsx

@@ -1,31 +1,40 @@
 import { Link } from 'react-router-dom';
-
+import SpaceyaTechHome from '../../assets/SpaceyaTechHomeLogo.svg';
+import './Navbar.css';
 function Navbar() {
   return (
     <nav>
-      <ul>
-        <li>
-          <Link to="/">Home</Link>
-        </li>
-        <li>
-          <Link to="/forums">Forums</Link>
-        </li>
-        <li>
-          <Link to="/events">Events</Link>
-        </li>
-        <li>
-          <Link to="/blog">Blog</Link>
-        </li>
-        <li>
-          <Link to="/about">About Us</Link>
-        </li>
-        <li>
-          <Link to="/login">Login</Link>
-        </li>
-        <li>
-          <Link to="/signup">Signup</Link>
-        </li>
-      </ul>
+      <div className="navbar">
+        <div className="navbar-logo">
+          <img src={SpaceyaTechHome} alt="SpaceyaTech logo" />
+        </div>
+        <ul className="navbar-list">
+          <li>
+            <Link to="/">Home</Link>
+          </li>
+          <li>
+            <Link to="/forums">Forums</Link>
+          </li>
+          <li>
+            <Link to="/events">Events</Link>
+          </li>
+          <li>
+            <Link to="/blog">Blog</Link>
+          </li>
+          <li>
+            <Link to="/about">About us</Link>
+          </li>
+        </ul>
+
+        <div className="cta-links">
+          <Link to="/login" className="login">
+            Login
+          </Link>
+          <Link to="/signup" className="signup">
+            Sign in
+          </Link>
+        </div>
+      </div>
     </nav>
   );
 }

src/components/__tests__/Navbar.test.tsx

@@ -15,10 +15,10 @@ describe('Navbar', () => {
     expect(screen.getByText('Forums')).toBeInTheDocument();
     expect(screen.getByText('Events')).toBeInTheDocument();
     expect(screen.getByText('Blog')).toBeInTheDocument();
-    expect(screen.getByText('About Us')).toBeInTheDocument();
+    expect(screen.getByText('About us')).toBeInTheDocument();
 
     // check that the login and signup buttons are rendered
     expect(screen.getByText('Login')).toBeInTheDocument();
-    expect(screen.getByText('Signup')).toBeInTheDocument();
+    expect(screen.getByText('Sign in')).toBeInTheDocument();
   });
 });

src/index.css

@@ -1,11 +1,5 @@
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  font-family: Poppins, sans-serif;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -14,56 +8,21 @@
   -webkit-text-size-adjust: 100%;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
+html {
+  height: 100%;
+  font-size: 1rem;
 }
-a:hover {
-  color: #535bf2;
+
+a {
+  display: block;
+  text-decoration: none;
 }
 
 body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
   min-height: 100vh;
 }
 
 h1 {
   font-size: 3.2em;
   line-height: 1.1;
 }
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}