Merge remote-tracking branch 'origin/develop' into scrolltotop

* origin/develop: (89 commits)
  Update dependency @vuelidate/validators to v2.0.0
  Remove lolex package
  Remove diff package
  Pin dependencies
  Update dependency sass to v1.55.0
  Make suggestor suggest according to cldr annotations
  Make chunks named
  Use import() for emoji.json
  Add regional indicators
  Support filtering by keywords from cldr
  Display localized unicode emoji names
  Load unicode emoji annotations
  Extract language list to its own file
  using the half-shit approach since proper approach is full-shit
  Make unicode emoji phrases match with _
  Use console.info
  Fix non-square emojis being truncated
  Fix emoji picker lint
  Fix emoji picker lint
  Tweak efficiency when changing filter keywords in emoji picker
  ...

2 files changed, 77 insertions, 60 deletions

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..f4d53836 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
+    v-slot="{ isActive, href, navigate } = {}"
+    ass="ass"
+    :to="routeTo"
+  >
+    <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
+        :is="routeTo ? 'a' : 'button'"
+        class="main-link button-unstyled"
+        :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);
-
-    &: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);
+    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);
     }
+  }
 
-    &.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);
+  &.-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);
-      }
+    .menu-icon {
+      --icon: var(--text, $fallback--icon);
+    }
 
-      &:hover {
-        text-decoration: underline;
-      }
+    &:hover {
+      text-decoration: underline;
     }
   }
 }