From 8ecb67230c87754d43c4255c56c05566c8c53feb Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 31 Aug 2022 00:48:38 +0300
Subject: [PATCH 1/3] make custom router-link for nav-entry to un-nest the
 interactive elements

---
 src/components/nav_panel/nav_panel.vue        |   7 -
 src/components/navigation/navigation_entry.js |   4 +
 .../navigation/navigation_entry.vue           | 135 ++++++++++--------
 .../optional_router_link.vue                  |  22 +++
 4 files changed, 100 insertions(+), 68 deletions(-)
 create mode 100644 src/components/optional_router_link/optional_router_link.vue

diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 2688bcf4..7373ca63 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -121,7 +121,6 @@
     border-bottom: 1px solid;
     border-color: $fallback--border;
     border-color: var(--border, $fallback--border);
-    padding: 0;
   }
 
   > li {
@@ -150,12 +149,6 @@
     font-size: 1.1em;
   }
 
-  .menu-item {
-    .timelines-chevron {
-      margin-right: 0;
-    }
-  }
-
   .timelines-background {
     padding: 0 0 0 0.6em;
     background-color: $fallback--lightBg;
diff --git a/src/components/navigation/navigation_entry.js b/src/components/navigation/navigation_entry.js
index fe3402fc..81cc936a 100644
--- a/src/components/navigation/navigation_entry.js
+++ b/src/components/navigation/navigation_entry.js
@@ -1,5 +1,6 @@
 import { mapState } from 'vuex'
 import { USERNAME_ROUTES } from 'src/components/navigation/navigation.js'
+import OptionalRouterLink from 'src/components/optional_router_link/optional_router_link.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faThumbtack } from '@fortawesome/free-solid-svg-icons'
 
@@ -7,6 +8,9 @@ library.add(faThumbtack)
 
 const NavigationEntry = {
   props: ['item', 'showPin'],
+  components: {
+    OptionalRouterLink
+  },
   methods: {
     isPinned (value) {
       return this.pinnedItems.has(value)
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index 824c00a2..b984b234 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -1,26 +1,37 @@
 <template>
-  <li class="NavigationEntry">
-    <component
-      :is="routeTo ? 'router-link' : 'button'"
-      class="menu-item button-unstyled"
-      :to="routeTo"
+  <OptionalRouterLink
+    ass="ass"
+    :to="routeTo"
+    v-slot="{ isActive, href, navigate } = {}"
+  >
+    <li
+      class="NavigationEntry menu-item"
+      :class="{ '-active': isActive }"
+      v-bind="$attrs"
     >
-      <span>
-        <FAIcon
-          v-if="item.icon"
-          fixed-width
-          class="fa-scale-110 menu-icon"
-          :icon="item.icon"
-        />
-      </span>
-      <span
-        v-if="item.iconLetter"
-        class="icon iconLetter fa-scale-110 menu-icon"
-      >{{ item.iconLetter }}
-      </span>
-      <span class="label">
-      {{ item.labelRaw || $t(item.label) }}
-      </span>
+      <component
+        class="main-link button-unstyled"
+        :is="routeTo ? 'a' : 'button'"
+        :href="href"
+        @click="navigate"
+      >
+        <span>
+          <FAIcon
+            v-if="item.icon"
+            fixed-width
+            class="fa-scale-110 menu-icon"
+            :icon="item.icon"
+          />
+        </span>
+        <span
+          v-if="item.iconLetter"
+          class="icon iconLetter fa-scale-110 menu-icon"
+        >{{ item.iconLetter }}
+        </span>
+        <span class="label">
+        {{ item.labelRaw || $t(item.label) }}
+        </span>
+      </component>
       <slot />
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
@@ -45,8 +56,8 @@
           icon="thumbtack"
         />
       </button>
-    </component>
-  </li>
+    </li>
+  </OptionalRouterLink>
 </template>
 
 <script src="./navigation_entry.js"></script>
@@ -55,7 +66,21 @@
 @import '../../_variables.scss';
 
 .NavigationEntry {
-  .label {
+  display: flex;
+  box-sizing: border-box;
+  align-items: baseline;
+  height: 3.5em;
+  line-height: 3.5em;
+  padding: 0 1em;
+  width: 100%;
+  color: $fallback--link;
+  color: var(--link, $fallback--link);
+
+  .timelines-chevron {
+    margin-right: 0;
+  }
+
+  .main-link {
     flex: 1;
   }
 
@@ -72,48 +97,36 @@
     }
   }
 
-  .menu-item {
-    display: flex;
-    box-sizing: border-box;
-    align-items: baseline;
-    height: 3.5em;
-    line-height: 3.5em;
-    padding: 0 1em;
-    width: 100%;
+  &:hover {
+    background-color: $fallback--lightBg;
+    background-color: var(--selectedMenu, $fallback--lightBg);
     color: $fallback--link;
-    color: var(--link, $fallback--link);
+    color: var(--selectedMenuText, $fallback--link);
+    --faint: var(--selectedMenuFaintText, $fallback--faint);
+    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+    --lightText: var(--selectedMenuLightText, $fallback--lightText);
 
-    &:hover {
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenu, $fallback--lightBg);
-      color: $fallback--link;
-      color: var(--selectedMenuText, $fallback--link);
-      --faint: var(--selectedMenuFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuLightText, $fallback--lightText);
+    .menu-icon {
+      --icon: var(--text, $fallback--icon);
+    }
+  }
 
-      .menu-icon {
-        --icon: var(--text, $fallback--icon);
-      }
+  &.-active {
+    font-weight: bolder;
+    background-color: $fallback--lightBg;
+    background-color: var(--selectedMenu, $fallback--lightBg);
+    color: $fallback--text;
+    color: var(--selectedMenuText, $fallback--text);
+    --faint: var(--selectedMenuFaintText, $fallback--faint);
+    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+    --lightText: var(--selectedMenuLightText, $fallback--lightText);
+
+    .menu-icon {
+      --icon: var(--text, $fallback--icon);
     }
 
-    &.router-link-active {
-      font-weight: bolder;
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenu, $fallback--lightBg);
-      color: $fallback--text;
-      color: var(--selectedMenuText, $fallback--text);
-      --faint: var(--selectedMenuFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuLightText, $fallback--lightText);
-
-      .menu-icon {
-        --icon: var(--text, $fallback--icon);
-      }
-
-      &:hover {
-        text-decoration: underline;
-      }
+    &:hover {
+      text-decoration: underline;
     }
   }
 }
diff --git a/src/components/optional_router_link/optional_router_link.vue b/src/components/optional_router_link/optional_router_link.vue
new file mode 100644
index 00000000..4eef0d6a
--- /dev/null
+++ b/src/components/optional_router_link/optional_router_link.vue
@@ -0,0 +1,22 @@
+<template>
+  <router-link
+    v-if="to"
+    :to="to"
+    custom
+    v-slot="props"
+  >
+    <slot
+      v-bind="props"
+    />
+  </router-link>
+  <slot
+    v-else
+    v-bind="{}"
+  />
+</template>
+
+<script>
+export default {
+  props: ['to']
+}
+</script>

From 98f97ff9a9806b2cb16f9b9f15df531be0f98919 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 31 Aug 2022 00:57:02 +0300
Subject: [PATCH 2/3] lint

---
 src/components/optional_router_link/optional_router_link.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/optional_router_link/optional_router_link.vue b/src/components/optional_router_link/optional_router_link.vue
index 4eef0d6a..a9877dd5 100644
--- a/src/components/optional_router_link/optional_router_link.vue
+++ b/src/components/optional_router_link/optional_router_link.vue
@@ -1,4 +1,5 @@
 <template>
+<!-- eslint-disable vue/no-multiple-template-root -->
   <router-link
     v-if="to"
     :to="to"

From 73abae1b3ec705b95d58e6f4e0f691e99f95d8ad Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 31 Aug 2022 00:58:03 +0300
Subject: [PATCH 3/3] lint

---
 src/components/navigation/navigation_entry.vue              | 6 +++---
 .../optional_router_link/optional_router_link.vue           | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index b984b234..f4d53836 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -1,8 +1,8 @@
 <template>
   <OptionalRouterLink
+    v-slot="{ isActive, href, navigate } = {}"
     ass="ass"
     :to="routeTo"
-    v-slot="{ isActive, href, navigate } = {}"
   >
     <li
       class="NavigationEntry menu-item"
@@ -10,8 +10,8 @@
       v-bind="$attrs"
     >
       <component
-        class="main-link button-unstyled"
         :is="routeTo ? 'a' : 'button'"
+        class="main-link button-unstyled"
         :href="href"
         @click="navigate"
       >
@@ -29,7 +29,7 @@
         >{{ item.iconLetter }}
         </span>
         <span class="label">
-        {{ item.labelRaw || $t(item.label) }}
+          {{ item.labelRaw || $t(item.label) }}
         </span>
       </component>
       <slot />
diff --git a/src/components/optional_router_link/optional_router_link.vue b/src/components/optional_router_link/optional_router_link.vue
index a9877dd5..d56ad268 100644
--- a/src/components/optional_router_link/optional_router_link.vue
+++ b/src/components/optional_router_link/optional_router_link.vue
@@ -1,10 +1,10 @@
 <template>
-<!-- eslint-disable vue/no-multiple-template-root -->
+  <!-- eslint-disable vue/no-multiple-template-root -->
   <router-link
     v-if="to"
+    v-slot="props"
     :to="to"
     custom
-    v-slot="props"
   >
     <slot
       v-bind="props"