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}>
-      <span>LinkLogger</span>
-    </nav>
+    <div className={styles.navbar}>
+      <div className={styles.navbarLeft}>
+        <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,52 +62,55 @@ function Signup() {
   };
 
   return (
-    <div id={styles.container}>
-      <p id={styles.signupText}>Sign up</p>
-      <p id={styles.error} className={error ? 'visible' : 'hidden'}>
-        {error}
-      </p>
-      <div>
-        <header>
-          <hr></hr>
-          <form onSubmit={handleSubmit}>
-            <input
-              type="text"
-              placeholder="username"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              required
-            />
-            <input
-              type="password"
-              placeholder="password"
-              value={password}
-              minLength={8}
-              onChange={(e) => setPassword(e.target.value)}
-              required
-            />
-            <input
-              type="password"
-              placeholder="confirm password"
-              value={passwordConfirm}
-              minLength={8}
-              onChange={(e) => setPasswordConfirm(e.target.value)}
-              required
-            />
-            <button type="submit" disabled={isSubmitting}>
-              {isSubmitting ? 'Submitting...' : 'Submit'}
-            </button>
-          </form>
-          <hr></hr>
-          <p id={styles.bottomText}>
-            Already have an account?{' '}
-            <Link to="/login" className={styles.link}>
-              Log in here.
-            </Link>
-          </p>
-        </header>
+    <>
+      <Navbar />
+      <div id={styles.container}>
+        <p id={styles.signupText}>Sign up</p>
+        <p id={styles.error} className={error ? 'visible' : 'hidden'}>
+          {error}
+        </p>
+        <div>
+          <header>
+            <hr></hr>
+            <form onSubmit={handleSubmit}>
+              <input
+                type="text"
+                placeholder="username"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                required
+              />
+              <input
+                type="password"
+                placeholder="password"
+                value={password}
+                minLength={8}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+              />
+              <input
+                type="password"
+                placeholder="confirm password"
+                value={passwordConfirm}
+                minLength={8}
+                onChange={(e) => setPasswordConfirm(e.target.value)}
+                required
+              />
+              <button type="submit" disabled={isSubmitting}>
+                {isSubmitting ? 'Submitting...' : 'Submit'}
+              </button>
+            </form>
+            <hr></hr>
+            <p id={styles.bottomText}>
+              Already have an account?{' '}
+              <Link to="/login" className={styles.link}>
+                Log in here.
+              </Link>
+            </p>
+          </header>
+        </div>
       </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;
-  align-items: center;
-  height: 60px;
-  background-color: #f8f9fa;
+  justify-content: space-between;
+  background-color: #3b4148;
+  color: white;
+  padding: 15px;
 }
 
-/* Create the nav links */
+.navbarLink {
+  margin: 0 20px;
+  position: relative;
+  display: inline-block;
+  text-decoration: none;
+  color: #ccc;
+  font-size: 20px;
+  font-weight: 600;
+}
 
-span {
-    font-size: 35px;
-    font-weight: 600;
-    color: #333;
-    text-decoration: none;
-    margin-right: 10px;
+.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;
 }