From 21fc11210e22fdf46bf45654a9d272b7896580f7 Mon Sep 17 00:00:00 2001
From: ajdj100 <AJCampbell@conestogac.on.ca>
Date: Fri, 7 Jun 2024 00:49:51 -0400
Subject: [PATCH] Updated the subnav system to use router state and finished
 styling

---
 .../components/ProfilePage/profileSubNav.vue  | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/17th Website/src/components/ProfilePage/profileSubNav.vue b/17th Website/src/components/ProfilePage/profileSubNav.vue
index 719caca..b9316b5 100644
--- a/17th Website/src/components/ProfilePage/profileSubNav.vue	
+++ b/17th Website/src/components/ProfilePage/profileSubNav.vue	
@@ -2,9 +2,8 @@
 import { RouterLink } from 'vue-router'
 import { Icon } from '@iconify/vue'
 
-const iconName = "carbon:tool-kit"
 export default {
-    props: ['link', 'content', 'active'],
+    props: ['link', 'content'],
     components: {
         RouterLink,
         Icon
@@ -20,10 +19,25 @@ export default {
 <template>
     <RouterLink :to="link">
         <p class="text-white h-fit xl:rounded-md my-0 sm:pb-3 p-2 hover:text-blue transition-colors 
-        xl:active:ring-1 sm:border-b-2 xl:border-b-0 sm:border-gray-light sm:active:border-blue 
-        xl:active:ring-blue xl:w-64 sm:w-36 sm:text-center xl:text-left" 
-        :class="{ active: active }">
+        sm:border-b-2 xl:border-b-0 sm:border-gray-light 
+        xl:w-64 sm:w-36 sm:text-center xl:text-left">
             {{ content }}
         </p>
     </RouterLink>
-</template>
\ No newline at end of file
+</template>
+
+<style scoped>
+@media only screen and (min-width: 1375px) {
+    .router-link-active {
+        outline: 2px solid var(--accent-primary);
+        border-radius: 10px;
+    }
+}
+
+@media only screen and (max-width: 1376px) {
+    .router-link-active {
+        box-shadow: 0 2px 0 0 var(--accent-primary);
+        background-color: transparent;
+    }
+}
+</style>
\ No newline at end of file