Overhauled the navigation system to resolve a bunch of bugs and weird behaviours.

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
+        Icon
-    },
-    data() {
-        return {
-            activeButton: ''
-        }
-    },
-    methods: {
-        setActive(btn) {
-            this.activeButton = btn
-            
-        }
     }
 }
 
@@ -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'"/>
+        <!-- home -->
-        <navitem icon="carbon:align-box-bottom-left" link="/forms" @click="setActive('#docs')"  :active="activeButton === '#docs'"/>
+        <RouterLink to="/" style="padding: 30px;">
-        <navitem icon="carbon:tool-kit" link="#" @click="setActive('#tools')"  :active="activeButton === '#tools'"/>
+            <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>

17th Website/src/components/navigation/navitem.vue

@@ -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>