From b998896947bc103bc0ea23d18c008ff66f3cc8b1 Mon Sep 17 00:00:00 2001
From: ajdj100 <AJCampbell@conestogac.on.ca>
Date: Mon, 18 Sep 2023 09:45:38 -0400
Subject: [PATCH] Further improved stylind of profile subnav buttons fixed an
 issue with the router not routing to the personnel file page.

---
 .../src/components/ProfilePage/profileHeader.vue     |  4 ++--
 .../src/components/ProfilePage/profileSubNav.vue     | 12 +++++++++---
 17th Website/src/router.js                           |  2 +-
 17th Website/src/views/home.vue                      |  2 +-
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/17th Website/src/components/ProfilePage/profileHeader.vue b/17th Website/src/components/ProfilePage/profileHeader.vue
index abed1b3..dd0fa15 100644
--- a/17th Website/src/components/ProfilePage/profileHeader.vue	
+++ b/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;
diff --git a/17th Website/src/components/ProfilePage/profileSubNav.vue b/17th Website/src/components/ProfilePage/profileSubNav.vue
index c4157d6..118ad5e 100644
--- a/17th Website/src/components/ProfilePage/profileSubNav.vue	
+++ b/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>
\ No newline at end of file
diff --git a/17th Website/src/router.js b/17th Website/src/router.js
index 215c242..31028da 100644
--- a/17th Website/src/router.js	
+++ b/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')
           },
diff --git a/17th Website/src/views/home.vue b/17th Website/src/views/home.vue
index 6c93a4f..135d838 100644
--- a/17th Website/src/views/home.vue	
+++ b/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>