From f72c1db5b17bb730ea420bdacf44ed2b1801a0fa Mon Sep 17 00:00:00 2001
From: ajdj100 <AJCampbell@conestogac.on.ca>
Date: Thu, 2 May 2024 01:07:39 -0400
Subject: [PATCH] Overhauled the navigation system to resolve a bunch of bugs
 and weird behaviours.

---
 .../src/components/navigation/Navbar.vue      | 76 ++++++++++++++-----
 .../src/components/navigation/navitem.vue     | 66 ----------------
 2 files changed, 57 insertions(+), 85 deletions(-)
 delete mode 100644 17th Website/src/components/navigation/navitem.vue

diff --git a/17th Website/src/components/navigation/Navbar.vue b/17th Website/src/components/navigation/Navbar.vue
index 4b38c8e..24b547e 100644
--- a/17th Website/src/components/navigation/Navbar.vue	
+++ b/17th Website/src/components/navigation/Navbar.vue	
@@ -1,20 +1,10 @@
 <script>
-import navitem from './navitem.vue'
+import { RouterLink, routerKey } from 'vue-router';
+import { Icon } from '@iconify/vue'
 
 export default {
     components: {
-        navitem
-    },
-    data() {
-        return {
-            activeButton: ''
-        }
-    },
-    methods: {
-        setActive(btn) {
-            this.activeButton = btn
-            
-        }
+        Icon
     }
 }
 
@@ -23,13 +13,43 @@ export default {
 <template>
     <div class="sidebar">
 
-        <!-- TODO: Connect these buttons to the scripts, figure out if I can turn this into a component or summ -->
-        <navitem icon="carbon:user" link="/profile" @click="setActive('#user')" :active="activeButton === '#user'" />
+
+        <RouterLink to="/profile" style="padding: 30px;">
+            <div>
+                <Icon icon="carbon:user" style="font-size: 35px;" />
+            </div>
+        </RouterLink>
+
         <hr class="text-white">
-        <navitem icon="carbon:home" link="/" @click="setActive('#home')" :active="activeButton === '#home'" />
-        <navitem icon="carbon:events" link="/users" @click="setActive('#users')" :active="activeButton === '#users'"/>
-        <navitem icon="carbon:align-box-bottom-left" link="/forms" @click="setActive('#docs')"  :active="activeButton === '#docs'"/>
-        <navitem icon="carbon:tool-kit" link="#" @click="setActive('#tools')"  :active="activeButton === '#tools'"/>
+
+        <!-- home -->
+        <RouterLink to="/" style="padding: 30px;">
+            <div>
+                <Icon icon="carbon:home" style="font-size: 35px;" />
+            </div>
+        </RouterLink>
+
+        <!-- users -->
+        <RouterLink to="/users" style="padding: 30px;">
+            <div>
+                <Icon icon="carbon:events" style="font-size: 35px;" />
+            </div>
+        </RouterLink>
+
+        <!-- forms -->
+        <RouterLink to="/forms" style="padding: 30px;">
+            <div>
+                <Icon icon="carbon:align-box-bottom-left" style="font-size: 35px;" />
+            </div>
+        </RouterLink>
+
+        <!-- forms -->
+        <RouterLink to="/test" style="padding: 30px;">
+            <div>
+                <Icon icon="carbon:tool-kit" style="font-size: 35px;" />
+            </div>
+        </RouterLink>
+
     </div>
 </template>
 
@@ -50,6 +70,19 @@ https://icon-sets.iconify.design/carbon/
 USING THE IBM CARBON ICON SET
 */
 
+.button {
+    color: var(--white);
+    font-size: 35px;
+    /* overflow: hidden; */
+    /* height: 40px; */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* margin: 10px; */
+    padding: 10px;
+    transition: color 0.2s ease-in-out;
+}
+
 .sidebar {
     position: fixed;
     left: 0;
@@ -90,4 +123,9 @@ USING THE IBM CARBON ICON SET
     display: flex;
     flex-direction: row;
 }
+
+.router-link-active {
+    outline: 2px solid var(--accent-primary);
+    border-radius: 10px;
+}
 </style>
\ No newline at end of file
diff --git a/17th Website/src/components/navigation/navitem.vue b/17th Website/src/components/navigation/navitem.vue
deleted file mode 100644
index 595b45a..0000000
--- a/17th Website/src/components/navigation/navitem.vue	
+++ /dev/null
@@ -1,66 +0,0 @@
-<!-- <script>
-export const navitem = {
-    props: ['icon', 'link']
-}
-</script>
-
-<script setup>
-import { Icon } from '@iconify/vue'
-
-</script> -->
-
-
-<script>
-import { Icon } from '@iconify/vue'
-import { RouterLink } from 'vue-router';
-
-export default {
-    name: 'navitem',
-    props: {
-        icon: String,
-        link: String,
-        active: Boolean
-    },
-    components: {
-        Icon,
-        RouterLink
-    }
-}
-</script>
-
-<template>
-    <div class="aspect-square flex items-center place-content-center">
-        <RouterLink :to="link" class="button" :class="{ active: active }">
-            <Icon :icon="icon" />
-        </RouterLink>
-    </div>
-</template>
-
-
-<style scoped>
-.button {
-    color: var(--white);
-    font-size: 35px;
-    /* overflow: hidden; */
-    /* height: 40px; */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    /* margin: 10px; */
-    padding: 10px;
-    transition: color 0.2s ease-in-out;
-}
-
-.button:hover {
-    color: var(--accent-primary);
-}
-
-.active {
-    border: 2px solid var(--accent-primary);
-    border-radius: 10px;
-}
-
-div {
-    padding: 10px;
-}
-</style>
\ No newline at end of file