Added selected color, Fixed up some things

src/pages/BasicDashboard.vue

@@ -1,7 +1,27 @@
 <script lang="ts">
   import Navbar from '../components/Navbar.vue';
 
+  interface NavbarItem {
+    name: string;
+    link: string
+  }
+
+  const navbarItems: NavbarItem[] = [
+    { name: "Overview", link: "/basic" },
+    { name: "Internet Setup", link: "/basic/internet" },
+    { name: "Wireless Settings", link:"/basic/wireless" },
+    { name: "Device List", link: "/basic/devices" },
+    { name: "QoS", link: "/basic/QoS" },
+    { name: "File Sharing", link: "/basic/fileshare" },
+    { name: "Guest Network", link: "/basic/guestnetwork" }
+  ];
+
   export default {
+    data() {
+      return {
+        navbarItems
+      };
+    },
     components: {
       Navbar,
     }
@@ -14,30 +34,12 @@
     <div id="leftNavbar">
       <h2>Basic Dashboard</h2>
       <ul>
-        <RouterLink to="/basic">
+        <RouterLink v-for="(navbarItem) in navbarItems" :to="navbarItem.link" :key="navbarItem.name">
-          <li>Overview</li>
+          <li>{{ navbarItem.name }}</li>
-        </RouterLink>
-        <RouterLink to="/basic/internet">
-          <li>Internet Setup</li>
-        </RouterLink>
-        <RouterLink to="/basic/wireless">
-          <li>Wireless Settings</li>
-        </RouterLink>
-        <RouterLink to="/basic/devices">
-          <li>Device List</li>
-        </RouterLink>
-        <RouterLink to="/basic/QoS">
-          <li>QoS</li>
-        </RouterLink>
-        <RouterLink to="/basic/fileshare">
-          <li>File Sharing</li>
-        </RouterLink>
-        <RouterLink to="/basic/guestnetwork">
-          <li>Guest Network</li>
         </RouterLink>
       </ul>
     </div>
-    <RouterView id="basicDashboardComponents"/>
+    <RouterView id="basicComponents"/>
   </div>
 </template>
 

src/pages/basicDashboard/DeviceList.vue

@@ -1,5 +1,7 @@
 <template>
   <div>
-    <h1>Device List</h1>
+    <h2 class="title">Device List</h2>
   </div>
 </template>
+
+<style src="../../styles/basicDashboard.css" scoped></style>

src/pages/basicDashboard/FileShare.vue

@@ -1,5 +1,7 @@
 <template>
   <div>
-    <h1>File Share</h1>
+    <h2 class="title">File Share</h2>
   </div>
 </template>
+
+<style src="../../styles/basicDashboard.css" scoped></style>

src/pages/basicDashboard/GuestNetwork.vue

@@ -1,5 +1,7 @@
 <template>
   <div>
-    <h1>Guest Network</h1>
+    <h2 class="title">Guest Network</h2>
   </div>
 </template>
+
+<style src="../../styles/basicDashboard.css" scoped></style>

src/pages/basicDashboard/InternetSetup.vue

@@ -1,5 +1,7 @@
 <template>
   <div>
-    <h1>Internet Setup</h1>
+    <h2 class="title">Internet Setup</h2>
   </div>
 </template>
+
+<style src="../../styles/basicDashboard.css" scoped></style>

src/pages/basicDashboard/Overview.vue

@@ -1,5 +1,7 @@
 <template>
   <div>
-    <h1>Overview</h1>
+    <h2 class="title">Overview</h2>
   </div>
 </template>
+
+<style src="../../styles/basicDashboard.css" scoped></style>

src/pages/basicDashboard/QoS.vue

@@ -1,5 +1,7 @@
 <template>
   <div>
-    <h1>QoS</h1>
+    <h2 class="title">QoS</h2>
   </div>
 </template>
+
+<style src="../../styles/basicDashboard.css" scoped></style>

src/pages/basicDashboard/Wireless.vue

@@ -1,5 +1,7 @@
 <template>
   <div>
-    <h1>Wireless Settings</h1>
+    <h2 class="title">Wireless Settings</h2>
   </div>
 </template>
+
+<style src="../../styles/basicDashboard.css" scoped></style>

src/styles/basicDashboard.css

@@ -37,9 +37,18 @@
   li:hover {
     background-color: var(--dark-highlight-color);
   }
+  .router-link-exact-active li {
+    background-color: var(--dark-alt-highlight-color);
+  }
 }
 
-#basicDashboardComponents {
+.title {
+  margin-top: 10px;
+  font-size: 3rem;
+  text-align: center;
+}
+
+#basicComponents {
   flex-grow: 1;
   padding: var(--alt-padding);
   border-radius: var(--border-radius);

src/styles/login.css

@@ -17,7 +17,7 @@
     width: 80%;
 
     input {
-      background-color: var(----dark-bg-alt-2-color);
+      background-color: var(--dark-bg-alt-2-color);
       border: none;
       color: inherit;
       height: 40px;
@@ -28,7 +28,7 @@
   }
   button {
     color: inherit;
-    background-color: var(----dark-bg-alt-2-color);
+    background-color: var(--dark-bg-alt-2-color);
     border: none;
     height: 40px;
     width: 70px;

src/styles/main.css

@@ -11,6 +11,7 @@
   --dark-bg-alt-color: #0f0f0f;
   --dark-bg-alt-2-color: #000;
   --dark-highlight-color: #0084ff;
+  --dark-alt-highlight-color: #006bcf;
 }
 
 * {
@@ -72,6 +73,9 @@ a {
   svg:hover {
     color: var(--dark-highlight-color);
   }
+  .router-link-active li {
+    color: var(--dark-alt-highlight-color);
+  }
 }
 
 .popup {
@@ -98,5 +102,5 @@ a {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: calc(100vh - var(--padding) * 2);
+  flex-grow: 1;
 }