Begin navbar

app/src/components/Dashboard.tsx

@@ -4,6 +4,7 @@ import styles from '../styles/Dashboard.module.css';
 import { useNavigate } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
+import Navbar from './Navbar';
 
 function Dashboard() {
   document.title = 'LinkLogger | Dashboard';
@@ -44,10 +45,15 @@ function Dashboard() {
         }
       })
 
-      // Catch 404 error = user has no links
-
-      .catch(() => {
+      .catch((error: unknown) => {
+        if (axios.isAxiosError(error)) {
+          if (error.response?.status === 404) {
+            // Create a message alerting the user there are no links
             navigate('/login');
+          } else {
+            navigate('/login');
+          }
+        }
       });
   }, []);
 
@@ -109,6 +115,8 @@ function Dashboard() {
   };
 
   return (
+    <>
+      <Navbar />
       <table id={styles.mainTable}>
         <thead>
           <tr style={{ border: '2px solid #ccc' }}>
@@ -182,6 +190,7 @@ function Dashboard() {
           ))}
         </tbody>
       </table>
+    </>
   );
 }
 

app/src/components/Login.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 Login() {
   document.title = 'LinkLogger | Login';
@@ -48,6 +49,8 @@ function Login() {
   };
 
   return (
+    <>
+      <Navbar />
       <div id={styles.container}>
         <p id={styles.loginText}>Log In</p>
         <p id={styles.error} className={error ? 'visible' : 'hidden'}>
@@ -85,6 +88,7 @@ function Login() {
           </header>
         </div>
       </div>
+    </>
   );
 }
 

app/src/components/Navbar.tsx

@@ -0,0 +1,11 @@
+import styles from '../styles/Navbar.module.css';
+
+function Navbar() {
+  return (
+    <nav className={styles.navbar}>
+      <span>LinkLogger</span>
+    </nav>
+  );
+}
+
+export default Navbar;

app/src/styles/Navbar.module.css

@@ -0,0 +1,18 @@
+/* Create the nav and center the span */
+.navbar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 60px;
+  background-color: #f8f9fa;
+}
+
+/* Create the nav links */
+
+span {
+    font-size: 35px;
+    font-weight: 600;
+    color: #333;
+    text-decoration: none;
+    margin-right: 10px;
+}