Finished dashboard, fixed images

src/Index.tsx

@@ -1,10 +1,10 @@
 import { useState, useEffect } from 'react'
 import { Routes, Route, useNavigate } from 'react-router-dom';
 import Dashboard from './pages/Dashboard'
-import Devices from './pages/DeviceList.tsx'
-import Extend from './pages/ExtendWirelessNetwork.tsx'
-import WirelessSettings from './pages/SystemSettings.tsx'
-import SystemSettings from './pages/WirelessSettings.tsx'
+import Devices from './pages/DeviceList'
+import Extend from './pages/ExtendWirelessNetwork'
+import WirelessSettings from './pages/SystemSettings'
+import SystemSettings from './pages/WirelessSettings'
 import Login from './pages/Login'
 import Register from './pages/Register'
 import Navbar from './components/Navbar'
@@ -32,7 +32,6 @@ function Index() {
 
   return(
     <>
-      <p>{ loginState }</p>
       <Navbar LoggedUser={ loggedUser } />
       <Routes>
         <Route path="/" element={<Dashboard RouterName={ routerName } TwoGExtendedName={ twoGExtendedName } FiveGExtendedName={ fiveGExtendedName } DevicesOnline={ devicesOnline } />} />

src/pages/Dashboard.tsx

@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom'
 import '../styles/Dashboard.css'
 import Globe from '../assets/globe.png'
 import Arrow from '../assets/arrow.png'
@@ -55,26 +56,34 @@ function Dashboard({ RouterName, TwoGExtendedName, FiveGExtendedName, DevicesOnl
       </header>
       <nav id="lowerNav">
         <ul>
-          <li>
-            <img src={ Devices } />
-            <h2>Device List</h2>
-            <p>{ DevicesOnline } Devices Online</p>
-          </li>
-          <li>
-            <img src={ Globe } />
-            <h2>Extend Network</h2>
-            <p>Amplify Network</p>
-          </li>
-          <li>
-            <img src={ Signal } />
-            <h2>Wireless Settings</h2>
-            <p>Set Extender Network Up</p>
-          </li>
-          <li>
-            <img src={ Gear } />
-            <h2>System Settings</h2>
-            <p>Change Extender Settings</p>
-          </li>
+          <Link to="/devices">
+            <li>
+              <img src={ Devices } />
+              <h2>Device List</h2>
+              <p>{ DevicesOnline } Devices Online</p>
+            </li>
+          </Link>
+          <Link to="/extend">
+            <li>
+              <img src={ Globe } />
+              <h2>Extend Network</h2>
+              <p>Amplify Network</p>
+            </li>
+          </Link>
+          <Link to="/wireless">
+            <li>
+              <img src={ Signal } />
+              <h2>Wireless Settings</h2>
+              <p>Set Extender Network Up</p>
+            </li>
+          </Link>
+          <Link to="/settings">
+            <li>
+              <img src={ Gear } />
+              <h2>System Settings</h2>
+              <p>Change Extender Settings</p>
+            </li>
+          </Link>
         </ul>
       </nav>
     </>

src/pages/WirelessSettings.tsx

@@ -1,5 +1,5 @@
 function WirelessName() {
-  return <p>Wireless Name</p>
+  return <p>Wireless Name??????????</p>
 }
 
 export default WirelessName;

src/styles/Dashboard.css

@@ -40,11 +40,15 @@ li {
 
 #lowerNav {
   margin-top: 20px;
+  display: flex;
+  justify-content: center;
 
   ul {
     justify-content: space-around;
+    max-width: fit-content;
   }
   li{
+    display: flex;
     padding: 40px;
     background-color: #071e42;
     justify-content: center;