Finished Basic Dashboard components into router

src/pages/BasicDashboard.vue

@@ -10,32 +10,35 @@
 
 <template>
   <Navbar/>
+  <div id="basicDashboard">
     <div id="leftNavbar">
       <h2>Basic Dashboard</h2>
       <ul>
-      <RouterLink to="basic">
+        <RouterLink to="/basic">
           <li>Overview</li>
         </RouterLink>
-      <RouterLink to="basic/internet">
+        <RouterLink to="/basic/internet">
           <li>Internet Setup</li>
         </RouterLink>
-      <RouterLink to="basic/wireless">
+        <RouterLink to="/basic/wireless">
           <li>Wireless Settings</li>
         </RouterLink>
-      <RouterLink to="basic/devices">
+        <RouterLink to="/basic/devices">
           <li>Device List</li>
         </RouterLink>
-      <RouterLink to="basic/QoS">
+        <RouterLink to="/basic/QoS">
           <li>QoS</li>
         </RouterLink>
-      <RouterLink to="basic/fileshare">
+        <RouterLink to="/basic/fileshare">
           <li>File Sharing</li>
         </RouterLink>
-      <RouterLink to="basic/guestnetwork">
+        <RouterLink to="/basic/guestnetwork">
           <li>Guest Network</li>
         </RouterLink>
       </ul>
     </div>
+    <RouterView id="basicDashboardComponents"/>
+  </div>
 </template>
 
 <style src="../styles/basicDashboard.css" scoped></style>

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%;
+  min-height: 100%;
-  flex-grow: 1;
   padding: var(--alt-padding);
   border-radius: var(--border-radius);
 
@@ -33,3 +38,10 @@
     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);
+}