detect "selected" when doing smooth scroll to top

routes/_components/Nav.html

@@ -1,25 +1,25 @@
 <nav class="main-nav">
 	<ul class="main-nav-ul">
-		<li class="main-nav-li" on:click="onClick(event, '/')">
+		<li class="main-nav-li">
       <NavItem :page name="home" href="/" svg="#pinafore-logo" label="Home" />
 		</li>
-		<li class="main-nav-li" on:click="onClick(event, '/notifications')">
+		<li class="main-nav-li">
       <NavItem :page name="notifications" href="/notifications" svg="#fa-bell" label="Notifications" />
 		</li>
     {{#if $pinnedPage === '/local'}}
-      <li class="main-nav-li" on:click="onClick(event, '/local')">
+      <li class="main-nav-li">
         <NavItem :page name="local" href="/local" svg="#fa-users" label="Local" />
       </li>
     {{elseif $pinnedPage === '/federated'}}
-      <li class="main-nav-li" on:click="onClick(event, '/federated')">
+      <li class="main-nav-li">
         <NavItem :page name="federated" href="/federated" svg="#fa-globe" label="Federated" />
       </li>
     {{elseif $pinnedPage === '/favorites'}}
-      <li class="main-nav-li" on:click="onClick(event, '/favorites')">
+      <li class="main-nav-li">
         <NavItem :page name="favorites" href="/favorites" svg="#fa-star" label="Favorites" />
       </li>
     {{elseif $pinnedPage.startsWith('/lists/')}}
-      <li class="main-nav-li" on:click="onClick(event, '/lists')">
+      <li class="main-nav-li">
         <NavItem :page name="lists" href="{{$pinnedPage}}" svg="#fa-bars" label="{{$pinnedListTitle}}" />
       </li>
     {{/if}}
@@ -68,20 +68,11 @@
 <script>
   import NavItem from './NavItem'
   import { store } from '../_store/store'
-  import { scrollTop } from '../_actions/scroll'
 
   export default {
     store: () => store,
     components: {
       NavItem
-    },
-    methods: {
-      onClick(event, path) {
-        if (window.location.pathname === path || (window.location.pathname.startsWith(path) && window.location.pathname === '/')) {
-          scrollTop(document.querySelector('.container'))
-          event.preventDefault()
-        }
-      }
     }
   }
 </script>

routes/_components/NavItem.html

@@ -1,6 +1,7 @@
-<a class='main-nav-link {{page === name ? "selected" : ""}}'
+<a class='main-nav-link {{selected ? "selected" : ""}}'
    aria-label='{{ariaLabel}}'
-   aria-current="{{page === name}}"
+   aria-current="{{selected}}"
+   on:click="onClick(event)"
    :href >
   {{#if name === 'notifications'}}
     <div class="nav-link-svg-wrapper">
@@ -116,13 +117,15 @@
 </style>
 <script>
   import { store } from '../_store/store'
+  import { smoothScrollToTop } from '../_utils/smoothScrollToTop'
 
   export default {
     store: () => store,
     computed: {
-      ariaLabel: (page, name, label, $numberOfNotifications) => {
+      selected: (page, name) => page === name,
+      ariaLabel: (selected, name, label, $numberOfNotifications) => {
         let res = label
-        if (page === name) {
+        if (selected) {
           res += ' (current page)'
         }
         if (name === 'notifications' && $numberOfNotifications) {
@@ -130,6 +133,16 @@
         }
         return res
       }
+    },
+    methods: {
+      onClick(e) {
+        if (!this.get('selected')) {
+          return
+        }
+        e.preventDefault()
+        e.stopPropagation()
+        smoothScrollToTop(document.getElementsByClassName('container')[0])
+      }
     }
   }
 

routes/_utils/smoothScrollToTop.js

@@ -1,3 +1,4 @@
+// via https://github.com/tootsuite/mastodon/blob/f59ed3a4fafab776b4eeb92f805dfe1fecc17ee3/app/javascript/mastodon/scroll.js
 const easingOutQuint = (x, t, b, c, d) =>
   c * ((t = t / d - 1) * t * t * t * t + 1) + b
 
@@ -27,4 +28,4 @@ const scroll = (node, key, target) => {
   }
 }
 
-export const scrollTop = node => scroll(node, 'scrollTop', 0)
+export const smoothScrollToTop = node => scroll(node, 'scrollTop', 0)