basic navbar

app/src/components/Navbar.tsx

@@ -1,10 +1,23 @@
 import styles from '../styles/Navbar.module.css';
+import { Link } from 'react-router-dom';
 
 function Navbar() {
   return (
-    <nav className={styles.navbar}>
+    <div className={styles.navbar}>
-      <span>LinkLogger</span>
+      <div className={styles.navbarLeft}>
-    </nav>
+        <Link to={'/login'}>
+          <a className={styles.navbarLink}>Login</a>
+        </Link>
+        <Link to={'/signup'}>
+          <a className={styles.navbarLink}>Signup</a>
+        </Link>
+      </div>
+      <div className={styles.navbarRight}>
+        <Link to={'/status'}>
+          <a className={styles.navbarLink}>API Status</a>
+        </Link>
+      </div>
+    </div>
   );
 }
 

app/src/components/Signup.tsx

@@ -3,6 +3,7 @@ import styles from '../styles/Login.module.css';
 import { Link } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
 import axios from 'axios';
+import Navbar from './Navbar';
 
 function Signup() {
   document.title = 'LinkLogger | Signup';
@@ -61,6 +62,8 @@ function Signup() {
   };
 
   return (
+    <>
+      <Navbar />
       <div id={styles.container}>
         <p id={styles.signupText}>Sign up</p>
         <p id={styles.error} className={error ? 'visible' : 'hidden'}>
@@ -107,6 +110,7 @@ function Signup() {
           </header>
         </div>
       </div>
+    </>
   );
 }
 

app/src/styles/Navbar.module.css

@@ -1,18 +1,41 @@
-/* Create the nav and center the span */
+/* Create the navbar and set the colors */
 .navbar {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
-  align-items: center;
+  background-color: #3b4148;
-  height: 60px;
+  color: white;
-  background-color: #f8f9fa;
+  padding: 15px;
 }
 
-/* Create the nav links */
+.navbarLink {
-
+  margin: 0 20px;
-span {
+  position: relative;
-    font-size: 35px;
+  display: inline-block;
-    font-weight: 600;
-    color: #333;
   text-decoration: none;
-    margin-right: 10px;
+  color: #ccc;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.navbarLink::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0%;
+  height: 2px;
+  background-color: #ccc;
+  transition: width 0.3s ease;
+}
+
+.navbarLink:hover::after {
+  width: 100%;
+}
+
+.navbarLeft {
+  margin-left: 50px;
+}
+
+.navbarRight {
+  margin-right: 50px;
 }