From 3a58e77da06842868abdaaecb315aa71bc7d5683 Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Sun, 14 Aug 2022 23:40:24 +0200
Subject: [PATCH] Some icons look better using stroke over fill

---
 src/components/header/NavigationIcon.vue  | 25 +++++++++++++++++++++--
 src/components/header/NavigationIcons.vue |  5 ++++-
 src/icons/IconActivity.vue                |  6 ------
 src/interfaces/INavigationIcon.ts         |  1 +
 4 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/components/header/NavigationIcon.vue b/src/components/header/NavigationIcon.vue
index 842f76f..914e0c6 100644
--- a/src/components/header/NavigationIcon.vue
+++ b/src/components/header/NavigationIcon.vue
@@ -4,7 +4,10 @@
     :key="route?.title"
     :to="{ path: route?.route }"
   >
-    <li class="navigation-link" :class="{ active: route.route == active }">
+    <li
+      class="navigation-link"
+      :class="{ active: matchesActiveRoute(), 'nofill-stroke': useStroke }"
+    >
       <component :is="route.icon" class="navigation-icon"></component>
       <span>{{ route.title }}</span>
     </li>
@@ -19,12 +22,18 @@
   interface Props {
     route: INavigationIcon;
     active?: string;
+    useStroke?: boolean;
   }
 
-  defineProps<Props>();
+  const props = defineProps<Props>();
 
   const store = useStore();
   const loggedIn = computed(() => store.getters["user/loggedIn"]);
+
+  function matchesActiveRoute() {
+    const currentRoute = props.route.title.toLowerCase();
+    return props?.active?.includes(currentRoute);
+  }
 </script>
 
 <style lang="scss" scoped>
@@ -62,6 +71,18 @@
       margin-top: 0.25rem;
       color: var(--text-color-70);
     }
+
+    &.nofill-stroke {
+      .navigation-icon {
+        stroke: var(--text-color-70);
+        fill: none !important;
+      }
+
+      &:hover .navigation-icon,
+      &.active .navigation-icon {
+        stroke: var(--text-color);
+      }
+    }
   }
 
   a {
diff --git a/src/components/header/NavigationIcons.vue b/src/components/header/NavigationIcons.vue
index 739c0d6..bd9be52 100644
--- a/src/components/header/NavigationIcons.vue
+++ b/src/components/header/NavigationIcons.vue
@@ -5,6 +5,7 @@
       :key="_route.route"
       :route="_route"
       :active="activeRoute"
+      :useStroke="_route?.useStroke"
     />
     <slot></slot>
   </ul>
@@ -50,6 +51,7 @@
       title: "Activity",
       route: "/activity",
       requiresAuth: true,
+      useStroke: true,
       icon: IconActivity
     },
     {
@@ -60,8 +62,9 @@
     },
     {
       title: "Settings",
-      route: "/profile?settings=true",
+      route: "/settings",
       requiresAuth: true,
+      useStroke: true,
       icon: IconSettings
     }
   ];
diff --git a/src/icons/IconActivity.vue b/src/icons/IconActivity.vue
index d8a381e..5737c08 100644
--- a/src/icons/IconActivity.vue
+++ b/src/icons/IconActivity.vue
@@ -13,9 +13,3 @@
     <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
   </svg>
 </template>
-
-<style lang="scss" scoped>
-  svg {
-    fill: none !important;
-  }
-</style>
diff --git a/src/interfaces/INavigationIcon.ts b/src/interfaces/INavigationIcon.ts
index dc4bf5b..3df3abe 100644
--- a/src/interfaces/INavigationIcon.ts
+++ b/src/interfaces/INavigationIcon.ts
@@ -3,4 +3,5 @@ export default interface INavigationIcon {
   route: string;
   icon: any; // eslint-disable-line @typescript-eslint/no-explicit-any
   requiresAuth?: boolean;
+  useStroke?: boolean;
 }