fix: refactor NavItem, fix icon badge bug (#1014)

src/routes/_components/NavItem.html

@@ -5,22 +5,11 @@
    rel="prefetch"
    {href} >
   <div class="nav-icon-and-label">
-    {#if name === 'notifications'}
+    <NavItemIcon
-    <div class="nav-link-svg-wrapper">
+      {showBadge}
-      <svg class="nav-link-svg">
+      {badgeNumber}
-        <use xlink:href={svg} />
+      {svg}
-      </svg>
+    />
-      {#if $hasNotifications}
-      <span class="nav-link-notifications nav-link-notifications-digits-{notificationDigits}" aria-hidden="true">
-          {$numberOfNotifications}
-        </span>
-      {/if}
-    </div>
-    {:else}
-    <svg class="nav-link-svg">
-      <use xlink:href={svg} />
-    </svg>
-    {/if}
     <span class="nav-link-label">{label}</span>
   </div>
   <div class="nav-indicator"
@@ -46,40 +35,6 @@
     flex: 1;
   }
 
-  .nav-link-svg-wrapper {
-    position: relative;
-    display: inline-block;
-  }
-
-  .nav-link-svg-wrapper, .nav-link-svg {
-    width: 20px;
-    height: 20px;
-  }
-
-  .nav-link-notifications {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    transform: translate(10px, 7px);
-    z-index: 10;
-    border: 1px solid var(--nav-bg);
-    background: var(--nav-svg-fill);
-    color: var(--nav-bg);
-    border-radius: 100%;
-    font-size: 0.8em;
-    margin: 0 0 3px;
-    font-weight: 600;
-  }
-
-  .nav-link-notifications-digits-2, .nav-link-notifications-digits-3 {
-    font-size: 0.7em;
-  }
-
   .main-nav-link.selected {
     background: var(--nav-a-selected-bg);
   }
@@ -120,9 +75,6 @@
   .main-nav-link:hover .nav-link-label {
     color: var(--nav-text-color-hover);
   }
-  .main-nav-link:hover .nav-link-svg {
-    fill: var(--nav-svg-fill-hover);
-  }
 
   .main-nav-link:active {
     background-color: var(--nav-active-bg);
@@ -132,11 +84,6 @@
     background-color: var(--nav-a-selected-active-bg);
   }
 
-  .nav-link-svg {
-    display: inline-block;
-    fill: var(--nav-svg-fill);
-  }
-
   .nav-link-label {
     font-size: 16px;
     color: var(--nav-text-color);
@@ -150,20 +97,13 @@
     .main-nav-link .nav-link-label {
       display: none;
     }
-    .nav-link-svg-wrapper, .nav-link-svg {
-      width: 25px;
-      height: 25px;
-    }
     .nav-icon-and-label {
       padding: 20px 0;
     }
-    .nav-link-notifications {
-      transform: translate(15px, 7px);
-      margin: 2px 1px 4px;
-    }
   }
 </style>
 <script>
+  import NavItemIcon from './NavItemIcon.html'
   import { store } from '../_store/store'
   import { smoothScroll } from '../_utils/smoothScroll'
   import { on, emit } from '../_utils/eventBus'
@@ -218,9 +158,8 @@
         }
         return res
       },
-      notificationDigits: ({ $numberOfNotifications }) => (
+      showBadge: ({ name, $hasNotifications }) => name === 'notifications' && $hasNotifications,
-        $numberOfNotifications.toString().length
+      badgeNumber: ({ name, $numberOfNotifications }) => name === 'notifications' && $numberOfNotifications
-      )
     },
     methods: {
       onClick (e) {
@@ -237,6 +176,9 @@
         e.stopPropagation()
         smoothScroll(scroller, 0)
       }
+    },
+    components: {
+      NavItemIcon
     }
   }
 </script>

src/routes/_components/NavItemIcon.html

@@ -0,0 +1,85 @@
+{#if showBadge}
+  <div class="nav-link-svg-wrapper">
+    <svg class="nav-link-svg">
+      <use xlink:href={svg} />
+    </svg>
+    <span class="nav-link-badge nav-link-badge-digits-{badgeDigits}" aria-hidden="true">
+      {badgeNumberToShow}
+    </span>
+  </div>
+{:else}
+  <svg class="nav-link-svg">
+    <use xlink:href={svg} />
+  </svg>
+{/if}
+<style>
+  .nav-link-svg-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+
+  .nav-link-svg-wrapper, .nav-link-svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  .nav-link-badge {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translate(10px, 7px);
+    z-index: 10;
+    border: 1px solid var(--nav-bg);
+    background: var(--nav-svg-fill);
+    color: var(--nav-bg);
+    border-radius: 100%;
+    font-size: 0.8em;
+    margin: 0 0 3px;
+    font-weight: 600;
+  }
+
+  .nav-link-badge-digits-2 {
+    font-size: 0.7em;
+  }
+
+  .nav-link-badge-digits-3 {
+    font-size: 0.6em;
+  }
+
+  .nav-link-svg {
+    display: inline-block;
+    fill: var(--nav-svg-fill);
+  }
+
+  :global(.main-nav-link:hover .nav-link-svg) {
+    fill: var(--nav-svg-fill-hover);
+  }
+
+  @media (max-width: 991px) {
+    .nav-link-svg-wrapper, .nav-link-svg {
+      width: 25px;
+      height: 25px;
+    }
+    .nav-link-badge {
+      transform: translate(15px, 7px);
+      margin: 2px 1px 4px;
+    }
+  }
+</style>
+<script>
+  export default {
+    data: () => ({
+      showBadge: false,
+      badgeNumber: 0
+    }),
+    computed: {
+      badgeDigits: ({ badgeNumber }) => Math.min(3, badgeNumber.toString().length),
+      badgeNumberToShow: ({ badgeNumber }) => (badgeNumber < 100 ? badgeNumber.toString() : '99+')
+    }
+  }
+</script>

src/routes/_store/computations/timelineComputations.js

@@ -27,20 +27,15 @@ export function timelineComputations (store) {
   })
 
   store.compute('numberOfNotifications',
-    [`timelineData_itemIdsToAdd`, 'currentInstance', 'currentTimeline'],
+    [`timelineData_itemIdsToAdd`, 'currentInstance'],
-    (root, currentInstance, currentTimeline) => {
+    (root, currentInstance) => (
-      return (
+      (root && root[currentInstance] && root[currentInstance].notifications &&
-        currentTimeline !== 'notifications' &&
+        root[currentInstance].notifications.length) || 0
-        root &&
+    )
-        root[currentInstance] &&
-        root[currentInstance].notifications &&
-        root[currentInstance].notifications.length
-      ) || 0
-    }
   )
 
   store.compute('hasNotifications',
-    ['numberOfNotifications'],
+    ['numberOfNotifications', 'currentPage'],
-    (numberOfNotifications) => !!numberOfNotifications
+    (numberOfNotifications, currentPage) => currentPage !== 'notifications' && !!numberOfNotifications
   )
 }