refactor navigation-entry and use them in other nav items

src/App.scss

@@ -132,11 +132,10 @@ i[class*=icon-],
 
 .button-unstyled:hover,
 a:hover {
-  i[class*=icon-],
+  > i[class*=icon-],
-  .svg-inline--fa,
+  > .svg-inline--fa,
-  .iconLetter {
+  > .iconLetter {
-    color: $fallback--text;
+    color: var(--text);
-    color: var(--text, $fallback--text);
   }
 }
 

src/components/nav_panel/nav_panel.vue

@@ -22,64 +22,56 @@
         v-if="!collapsed || forceExpand"
         class="panel-body"
       >
-        <li v-if="currentUser || !privateMode">
+        <NavigationEntry
-          <button
+          v-if="currentUser || !privateMode"
-            class="button-unstyled menu-item"
+          :show-pin="false"
+          :item="{ icon: 'stream', label: 'nav.timelines' }"
           :aria-expanded="showTimelines ? 'true' : 'false'"
           @click="toggleTimelines"
         >
-            <FAIcon
-              fixed-width
-              class="fa-scale-110"
-              icon="stream"
-            />{{ $t("nav.timelines") }}
           <FAIcon
             class="timelines-chevron"
             fixed-width
             :icon="showTimelines ? 'chevron-up' : 'chevron-down'"
           />
-          </button>
+        </NavigationEntry>
         <div
           v-show="showTimelines"
           class="timelines-background"
         >
-            <ul class="timelines">
+          <div class="timelines">
             <NavigationEntry
               v-for="item in timelinesItems"
               :key="item.name"
               :show-pin="editMode || forceEditMode"
               :item="item"
             />
-            </ul>
           </div>
-        </li>
+        </div>
-        <li v-if="currentUser">
+        <NavigationEntry
-          <button
+          v-if="currentUser"
-            class="button-unstyled menu-item"
+          :show-pin="false"
+          :item="{ icon: 'list', label: 'nav.lists' }"
           :aria-expanded="showLists ? 'true' : 'false'"
           @click="toggleLists"
+        >
+          <router-link
+            class="extra-button"
+            :to="{ name: 'lists' }"
+            @click.stop
           >
             <FAIcon
+              class="extra-button"
               fixed-width
-              class="fa-scale-110"
+              icon="wrench"
-              icon="list"
+            />
-            />{{ $t("nav.lists") }}
+          </router-link>
           <FAIcon
             class="timelines-chevron"
             fixed-width
             :icon="showLists ? 'chevron-up' : 'chevron-down'"
           />
-            <router-link
+        </NavigationEntry>
-              :to="{ name: 'lists' }"
-              @click.stop
-            >
-              <FAIcon
-                class="timelines-chevron"
-                fixed-width
-                icon="wrench"
-              />
-            </router-link>
-          </button>
         <div
           v-show="showLists"
           class="timelines-background"
@@ -89,28 +81,18 @@
             class="timelines"
           />
         </div>
-        </li>
         <NavigationEntry
           v-for="item in rootItems"
           :key="item.name"
           :show-pin="editMode || forceEditMode"
           :item="item"
         />
-        <li
+        <NavigationEntry
           v-if="!forceEditMode && currentUser"
-        >
+          :show-pin="false"
-          <button
+          :item="{ label: editMode ? $t('nav.edit_finish') : $t('nav.edit_pinned'), icon: editMode ? 'check' : 'wrench' }"
-            class="menu-item button-unstyled"
           @click="toggleEditMode"
-          >
-            <FAIcon
-              fixed-width
-              class="fa-scale-110"
-              :icon="editMode ? 'check' : 'wrench'"
         />
-            {{ editMode ? $t('nav.edit_finish') : $t('nav.edit_pinned') }}
-          </button>
-        </li>
       </ul>
     </div>
   </div>
@@ -161,55 +143,23 @@
     border: none;
   }
 
-  .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;
-      }
-    }
-  }
-
   .timelines-chevron {
     margin-left: 0.8em;
     margin-right: 0.8em;
     font-size: 1.1em;
   }
 
+  .menu-item {
+    .timelines-chevron {
+      margin-right: 0;
+    }
+  }
+
   .timelines-background {
     padding: 0 0 0 0.6em;
     background-color: $fallback--lightBg;
     background-color: var(--selectedMenu, $fallback--lightBg);
-    border-top: 1px solid;
+    border-bottom: 1px solid;
     border-color: $fallback--border;
     border-color: var(--border, $fallback--border);
   }
@@ -223,9 +173,5 @@
    // breaks without a unit
    --panel-heading-height-padding: 0em;
   }
-
-  .fa-scale-110 {
-    margin-right: 0.8em;
-  }
 }
 </style>

src/components/navigation/navigation_entry.js

@@ -22,6 +22,7 @@ const NavigationEntry = {
   },
   computed: {
     routeTo () {
+      if (!this.item.route && !this.item.routeObject) return null
       if (this.item.routeObject) {
         return this.item.routeObject
       }

src/components/navigation/navigation_entry.vue

@@ -1,23 +1,37 @@
 <template>
   <li class="NavigationEntry">
-    <router-link
+    <component
-      class="menu-item"
+      :is="routeTo ? 'router-link' : 'button'"
+      class="menu-item button-unstyled"
       :to="routeTo"
     >
+      <span>
         <FAIcon
           v-if="item.icon"
           fixed-width
-        class="fa-scale-110"
+          class="fa-scale-110 menu-icon"
           :icon="item.icon"
         />
+      </span>
       <span
         v-if="item.iconLetter"
-        class="icon iconLetter fa-scale-110"
+        class="icon iconLetter fa-scale-110 menu-icon"
       >{{ item.iconLetter }}
-      </span>{{ item.labelRaw || $t(item.label) }}
+      </span>
+      <span class="label">
+      {{ item.labelRaw || $t(item.label) }}
+      </span>
+      <slot />
+      <div
+        v-if="item.badgeGetter && getters[item.badgeGetter]"
+        class="badge badge-notification"
+      >
+        {{ getters[item.badgeGetter] }}
+      </div>
       <button
+        v-if="showPin && currentUser"
         type="button"
-        class="button-unstyled"
+        class="button-unstyled extra-button"
         :title="$t(isPinned ? 'general.unpin' : 'general.pin' )"
         :aria-pressed="!!isPinned"
         @click.stop.prevent="togglePin(item.name)"
@@ -30,14 +44,8 @@
           :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>
+    </component>
   </li>
 </template>
 
@@ -47,19 +55,27 @@
 @import '../../_variables.scss';
 
 .NavigationEntry {
-  .fa-scale-110 {
+  .label {
+    flex: 1;
+  }
+
+  .menu-icon {
     margin-right: 0.8em;
   }
 
-  .badge {
+  .extra-button {
-    position: absolute;
+    width: 3em;
-    right: 0.6rem;
+    text-align: center;
-    top: 1.25em;
+
+    &:last-child {
+      margin-right: -0.8em;
+    }
   }
 
   .menu-item {
-    display: block;
+    display: flex;
     box-sizing: border-box;
+    align-items: baseline;
     height: 3.5em;
     line-height: 3.5em;
     padding: 0 1em;
@@ -75,7 +91,10 @@
       --faint: var(--selectedMenuFaintText, $fallback--faint);
       --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
       --lightText: var(--selectedMenuLightText, $fallback--lightText);
-      --icon: var(--selectedMenuIcon, $fallback--icon);
+
+      .menu-icon {
+        --icon: var(--text, $fallback--icon);
+      }
     }
 
     &.router-link-active {
@@ -87,7 +106,10 @@
       --faint: var(--selectedMenuFaintText, $fallback--faint);
       --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
       --lightText: var(--selectedMenuLightText, $fallback--lightText);
-      --icon: var(--selectedMenuIcon, $fallback--icon);
+
+      .menu-icon {
+        --icon: var(--text, $fallback--icon);
+      }
 
       &:hover {
         text-decoration: underline;