Updated the subnav system to use router state and finished styling

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 
+        sm:border-b-2 xl:border-b-0 sm:border-gray-light 
-        xl:active:ring-blue xl:w-64 sm:w-36 sm:text-center xl:text-left" 
+        xl:w-64 sm:w-36 sm:text-center xl:text-left">
-        :class="{ active: active }">
             {{ content }}
         </p>
     </RouterLink>
-</template>
+</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>