Removed scripts, added navbar on basic dashboard

src/App.vue

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import "./scripts/App.ts";
 
   export default defineComponent({
     name: 'App',

src/pages/BasicDashboard.vue

@@ -10,5 +10,32 @@
 
 <template>
   <Navbar/>
-  <h1>Basic Dashboard</h1>
+  <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>
 </template>
+
+<style src="../styles/basicDashboard.css" scoped></style>

src/pages/LoginPage.vue

@@ -5,7 +5,7 @@
       <form>
         <h3>Username</h3>
         <input type="text"/>
-        <h3>Password</h3>
+        <h3 style="margin-top: 10px;">Password</h3>
         <input type="password"/>
       </form>
       <button>Sign in</button>

src/styles/basicDashboard.css

@@ -0,0 +1,35 @@
+#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;
+  padding: var(--alt-padding);
+  border-radius: var(--border-radius);
+
+  h2 {
+    text-align: center;
+  }
+  ul {
+    display: inherit;
+    flex-direction: inherit;
+    gap: 10px;
+    list-style: none;
+  }
+  li {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--dark-bg-alt-2-color);
+    border-radius: 5px;
+    height: 45px;
+    text-align: center;
+    transition: 0.3s background-color;
+  }
+  li:hover {
+    background-color: var(--dark-highlight-color);
+  }
+}

src/styles/login.css

@@ -17,7 +17,7 @@
     width: 80%;
 
     input {
-      background-color: #000;
+      background-color: var(----dark-bg-alt-2-color);
       border: none;
       color: inherit;
       height: 40px;
@@ -28,7 +28,7 @@
   }
   button {
     color: inherit;
-    background-color: #000;
+    background-color: var(----dark-bg-alt-2-color);
     border: none;
     height: 40px;
     width: 70px;
@@ -37,6 +37,6 @@
     cursor: pointer;
   }
   button:hover {
-    background-color: rgb(0, 132, 255);
+    background-color: var(--dark-highlight-color);
   }
 }

src/styles/main.css

@@ -5,7 +5,12 @@
 
 :root {
   --padding: 20px;
+  --alt-padding: 10px;
   --border-radius: 20px;
+  --dark-bg-color: #161616;
+  --dark-bg-alt-color: #0f0f0f;
+  --dark-bg-alt-2-color: #000;
+  --dark-highlight-color: #0084ff;
 }
 
 * {
@@ -15,11 +20,13 @@
 }
 
 body {
-  background-color: #161616;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--dark-bg-color);
   color: #fff;
   font-family: Noto-Sans, sans-serif;
   min-height: 100vh;
-  padding: 20px;
+  padding: var(--padding);
 }
 
 a {
@@ -31,10 +38,10 @@ a {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: #0f0f0f;
+  background-color: var(--dark-bg-alt-color);
   height: 40px;
-  padding: 10px;
-  border-radius: 20px;
+  padding: var(--alt-padding);
+  border-radius: var(--border-radius);
   box-sizing: content-box;
 
   div {
@@ -53,7 +60,7 @@ a {
       transition: 0.3s color;
     }
     li:hover {
-      color: aqua;
+      color: var(--dark-highlight-color);
     }
   }
   svg {
@@ -63,7 +70,7 @@ a {
     transition: 0.3s color;
   }
   svg:hover {
-    color: aqua;
+    color: var(--dark-highlight-color);
   }
 }