navigation refactored, used in mobile nav as well

1 files changed, 96 insertions, 0 deletions

diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
new file mode 100644
index 00000000..7d761395
--- /dev/null
+++ b/src/components/navigation/navigation_entry.vue
@@ -0,0 +1,96 @@
+<template>
+<li class="NavigationEntry">
+  <router-link
+    class="menu-item"
+    :to="item.routeObject || { name: (currentUser || item.anon) ? item.route : item.anonRoute, params: { username: currentUser.screen_name } }"
+    >
+    <FAIcon
+      v-if="item.icon"
+      fixed-width
+      class="fa-scale-110"
+      :icon="item.icon"
+      />
+    <span
+      class="icon iconLetter fa-scale-110"
+      v-if="item.iconLetter"
+      >{{ item.iconLetter }}
+    </span>{{ item.labelRaw || $t(item.label) }}
+    <button
+      type="button"
+      class="button-unstyled"
+      @click.stop.prevent="togglePin(item.name)"
+      >
+      <FAIcon
+        v-if="showPin"
+        fixed-width
+        class="fa-scale-110"
+        :class="{ 'veryfaint': !isPinned(item.name) }"
+        :transform="!isPinned(item.name) ? 'rotate-45' : ''"
+        icon="thumbtack"
+        />
+      <div
+        v-if="item.badgeGetter && getters[item.badgeGetter]"
+        class="badge badge-notification"
+        >
+        {{ getters[item.badgeGetter] }}
+      </div>
+    </button>
+  </router-link>
+</li>
+</template>
+
+<script src="./navigation_entry.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.NavigationEntry {
+  .fa-scale-110 {
+    margin-right: 0.8em;
+  }
+
+  .badge {
+    position: absolute;
+    right: 0.6rem;
+    top: 1.25em;
+  }
+
+  .menu-item {
+    display: block;
+    box-sizing: border-box;
+    height: 3.5em;
+    line-height: 3.5em;
+    padding: 0 1em;
+    width: 100%;
+    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);
+      --icon: var(--selectedMenuIcon, $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);
+      --icon: var(--selectedMenuIcon, $fallback--icon);
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+</style>