From 41bab5bd232b65fed51d476066b1ddf76150af8e Mon Sep 17 00:00:00 2001
From: Keyemail <hatsunepatrick@gmail.com>
Date: Fri, 23 Aug 2024 17:23:45 -0700
Subject: [PATCH] Removed scripts, added navbar on basic dashboard

---
 src/App.vue                   |  1 -
 src/pages/BasicDashboard.vue  | 31 +++++++++++++++++++++++++++++--
 src/pages/LoginPage.vue       |  2 +-
 src/scripts/App.ts            |  0
 src/styles/basicDashboard.css | 35 +++++++++++++++++++++++++++++++++++
 src/styles/login.css          |  6 +++---
 src/styles/main.css           | 21 ++++++++++++++-------
 7 files changed, 82 insertions(+), 14 deletions(-)
 delete mode 100644 src/scripts/App.ts

diff --git a/src/App.vue b/src/App.vue
index 9d20447..4bebe5e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,5 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import "./scripts/App.ts";
 
   export default defineComponent({
     name: 'App',
diff --git a/src/pages/BasicDashboard.vue b/src/pages/BasicDashboard.vue
index 2022092..e56980b 100644
--- a/src/pages/BasicDashboard.vue
+++ b/src/pages/BasicDashboard.vue
@@ -10,5 +10,32 @@
 
 <template>
   <Navbar/>
-  <h1>Basic Dashboard</h1>
-</template>
\ No newline at end of file
+  <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>
\ No newline at end of file
diff --git a/src/pages/LoginPage.vue b/src/pages/LoginPage.vue
index d283eee..7ac5acf 100644
--- a/src/pages/LoginPage.vue
+++ b/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>
diff --git a/src/scripts/App.ts b/src/scripts/App.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/styles/basicDashboard.css b/src/styles/basicDashboard.css
index e69de29..f3397f8 100644
--- a/src/styles/basicDashboard.css
+++ b/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);
+  }
+}
\ No newline at end of file
diff --git a/src/styles/login.css b/src/styles/login.css
index 55daa1b..6a353ce 100644
--- a/src/styles/login.css
+++ b/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);
   }
 }
\ No newline at end of file
diff --git a/src/styles/main.css b/src/styles/main.css
index 5dd6c46..ebecfd6 100644
--- a/src/styles/main.css
+++ b/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);
   }
 }