Further improved stylind of profile subnav buttons

fixed an issue with the router not routing to the personnel file page.

17th Website/src/components/ProfilePage/profileHeader.vue

@@ -17,7 +17,7 @@ export default {
 <template>
     <div id="wrapper">
         <div>
-            <profileSubNav link="profile" content="Home"></profileSubNav>
+            <profileSubNav link="home" content="Home"></profileSubNav>
             <profileSubNav link="activityHistory" content="History"></profileSubNav>
             <profileSubNav link="shadowbox" content="Shadowbox"></profileSubNav>
         </div>
@@ -36,7 +36,7 @@ export default {
 
 <style>
 #wrapper {
-    /* position: fixed; */
+    position: fixed;
     display: flex;
     flex-direction: column-reverse;
     margin-top: 50px;

17th Website/src/components/ProfilePage/profileSubNav.vue

@@ -1,18 +1,24 @@
 <script>
 import { RouterLink } from 'vue-router'
+import { Icon } from '@iconify/vue'
+
+const iconName = "carbon:tool-kit"
 export default {
     props: ['link', 'content', 'active'],
     components: {
-        RouterLink
+        RouterLink,
+        Icon
     },
     setup(props) {
         console.log(props.link);
-    }
+    },
 }
 </script>
 
 <template>
     <RouterLink :to="link">
-        <p class="ring-1 ring-blue rounded-md my-3 p-2 " :class="{ active: active }">{{ content }}</p>
+        <p class="text-white rounded-md my-3 p-2 hover:text-blue transition-all active:ring-1 active:ring-blue"
+            :class="{ active: active }">{{ content }}</p>
+        <Icon :icon="iconName"/>
     </RouterLink>
 </template>

17th Website/src/router.js

@@ -15,7 +15,7 @@ export default createRouter({
         component: () => import('./components/ProfilePage/profile.vue'),
         children: [
           {
-            path: '/',
+            path: '/home',
             name: 'personnel',
             component: () => import('./components/ProfilePage/personnel.vue')
           },

17th Website/src/views/home.vue

@@ -1,5 +1,5 @@
 <script setup>
-import card from '../components/cards/Card.vue'
+import card from '../components/cards/Card.vue';
 </script>
 
 <template>