Finished Basic Dashboard components into router

src/pages/BasicDashboard.vue

@@ -10,31 +10,34 @@
 
 <template>
   <Navbar/>
-  <div id="leftNavbar">
-    <h2>Basic Dashboard</h2>
-    <ul>
-      <RouterLink to="basic">
-        <li>Overview</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 id="basicDashboard">
+    <div id="leftNavbar">
+      <h2>Basic Dashboard</h2>
+      <ul>
+        <RouterLink to="/basic">
+          <li>Overview</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"/>
   </div>
 </template>
 

src/pages/basicDashboard/DeviceList.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>Device List</h1>
+  </div>
+</template>

src/pages/basicDashboard/FileShare.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>File Share</h1>
+  </div>
+</template>

src/pages/basicDashboard/GuestNetwork.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>Guest Network</h1>
+  </div>
+</template>

src/pages/basicDashboard/InternetSetup.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>Internet Setup</h1>
+  </div>
+</template>

src/pages/basicDashboard/Overview.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>Overview</h1>
+  </div>
+</template>

src/pages/basicDashboard/QoS.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>QoS</h1>
+  </div>
+</template>

src/pages/basicDashboard/Wireless.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>Wireless Settings</h1>
+  </div>
+</template>

src/routes/router.ts

@@ -4,26 +4,63 @@ import BasicDashboard from "../pages/BasicDashboard.vue";
 import LoginPage from "../pages/LoginPage.vue";
 import RegisterPage from "../pages/RegisterPage.vue";
 
+import BasicOverview from "../pages/basicDashboard/Overview.vue"
+import BasicInternetSetup from "../pages/basicDashboard/InternetSetup.vue"
+import BasicWireless from "../pages/basicDashboard/Wireless.vue"
+import BasicDevicesList from "../pages/basicDashboard/DeviceList.vue"
+import BasicQoS from "../pages/basicDashboard/QoS.vue"
+import BasicFileShare from "../pages/basicDashboard/FileShare.vue"
+import BasicGuestNetwork from "../pages/basicDashboard/GuestNetwork.vue"
+
 const routes = [
   {
     path: '/',
-    component: BasicDashboard
+    component: BasicDashboard,
   },
   {
     path: '/advance',
-    component: AdvanceDashboard
+    component: AdvanceDashboard,
   },
   {
     path: '/basic',
-    component: BasicDashboard
+    component: BasicDashboard,
+    children: [
+      {
+        path: '',
+        component: BasicOverview,
+      },
+      {
+        path: 'internet',
+        component: BasicInternetSetup,
+      },
+      {
+        path: 'wireless',
+        component: BasicWireless,
+      },
+      {
+        path: 'devices',
+        component: BasicDevicesList,
+      },
+      {
+        path: 'QoS',
+        component: BasicQoS,
+      },
+      {
+        path: 'fileshare',
+        component: BasicFileShare,
+      }, {
+        path: 'guestnetwork',
+        component: BasicGuestNetwork,
+      }
+    ]
   },
   {
     path: '/login',
-    component: LoginPage
+    component: LoginPage,
   },
   {
     path: '/register',
-    component: RegisterPage
+    component: RegisterPage,
   },
 ];
 

src/styles/basicDashboard.css

@@ -1,12 +1,17 @@
+#basicDashboard {
+  display: flex;
+  margin-top: 20px;
+  gap: 15px;
+  flex-grow: 1;
+}
+
 #leftNavbar {
   display: flex;
   flex-direction: column;
   gap: 15px;
-  margin-top: 20px;
   background-color: var(--dark-bg-alt-color);
   width: 250px;
-  height: 100%;
-  flex-grow: 1;
+  min-height: 100%;
   padding: var(--alt-padding);
   border-radius: var(--border-radius);
 
@@ -32,4 +37,11 @@
   li:hover {
     background-color: var(--dark-highlight-color);
   }
+}
+
+#basicDashboardComponents {
+  flex-grow: 1;
+  padding: var(--alt-padding);
+  border-radius: var(--border-radius);
+  background-color: var(--dark-bg-alt-color);
 }