feat: scroll to top (elk-zone#237)

gcavanunez · Nov 29, 2022 · 0e7076b · 0e7076b
1 parent cf225e2
commit 0e7076b
Show file tree

Hide file tree

Showing 11 changed files with 48 additions and 15 deletions.
diff --git a/components/nav/NavBottom.vue b/components/nav/NavBottom.vue
@@ -5,24 +5,24 @@
 <template>
   <nav h-14 fixed bottom-0 left-0 right-0 z-10 border="t base" bg-base flex flex-row>
     <template v-if="currentUser">
-      <NuxtLink to="/home" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1>
+      <NuxtLink to="/home" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
         <div i-ri:home-5-line />
       </NuxtLink>
-      <NuxtLink to="/notifications" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1>
+      <NuxtLink to="/notifications" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
         <div i-ri:notification-4-line />
       </NuxtLink>
     </template>
-    <NuxtLink to="/explore" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1>
+    <NuxtLink to="/explore" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
       <div i-ri:hashtag />
     </NuxtLink>
-    <NuxtLink group to="/public/local" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1>
+    <NuxtLink group to="/public/local" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
       <div i-ri:group-2-line />
     </NuxtLink>
-    <NuxtLink to="/public" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1>
+    <NuxtLink to="/public" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
       <div i-ri:earth-line />
     </NuxtLink>
     <template v-if="currentUser">
-      <NuxtLink to="/conversations" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1>
+      <NuxtLink to="/conversations" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
         <div i-ri:at-line />
       </NuxtLink>
     </template>

diff --git a/components/nav/NavSideItem.vue b/components/nav/NavSideItem.vue
@@ -25,7 +25,7 @@ useCommand({
 </script>
 
 <template>
-  <NuxtLink :to="to" active-class="text-primary" group focus:outline-none>
+  <NuxtLink :to="to" active-class="text-primary" group focus:outline-none @click="$scrollToTop">
     <div flex w-fit px5 py2 gap2 items-center transition-100 rounded-full group-hover:bg-active group-focus-visible:ring="2 current">
       <slot name="icon">
         <div :class="icon" />

diff --git a/pages/bookmarks.vue b/pages/bookmarks.vue
@@ -15,7 +15,10 @@ useHead({
 <template>
   <MainContent>
     <template #title>
-      <span text-lg font-bold>{{ t('nav_side.bookmarks') }}</span>
+      <NuxtLink to="/bookmarks" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+        <div i-ri:bookmark-line />
+        <span>{{ t('nav_side.bookmarks') }}</span>
+      </NuxtLink>
     </template>
 
     <slot>

diff --git a/pages/conversations.vue b/pages/conversations.vue
@@ -15,7 +15,10 @@ useHead({
 <template>
   <MainContent>
     <template #title>
-      <span text-lg font-bold>{{ t('nav_side.conversations') }}</span>
+      <NuxtLink to="/conversations" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+        <div i-ri:at-line />
+        <span>{{ t('nav_side.conversations') }}</span>
+      </NuxtLink>
     </template>
 
     <slot>

diff --git a/pages/explore.vue b/pages/explore.vue
@@ -11,7 +11,10 @@ useHead({
 <template>
   <MainContent>
     <template #title>
-      <div i-ri:hashtag h-6 mr-1 /><span>{{ t('nav_side.explore') }}</span>
+      <NuxtLink to="/explore" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+        <div i-ri:hashtag />
+        <span>{{ t('nav_side.explore') }}</span>
+      </NuxtLink>
     </template>
 
     <slot>

diff --git a/pages/favourites.vue b/pages/favourites.vue
@@ -14,7 +14,10 @@ useHead({
 <template>
   <MainContent>
     <template #title>
-      <span text-lg font-bold>{{ t('nav_side.favourites') }}</span>
+      <NuxtLink to="/favourites" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+        <div i-ri:heart-3-line />
+        <span>{{ t('nav_side.favourites') }}</span>
+      </NuxtLink>
     </template>
     <slot>
       <TimelinePaginator :paginator="paginator" />

diff --git a/pages/home.vue b/pages/home.vue
@@ -24,7 +24,10 @@ useHead({
 <template>
   <MainContent>
     <template #title>
-      <span text-lg font-bold>{{ $t('nav_side.home') }}</span>
+      <NuxtLink to="/home" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+        <div i-ri:home-5-line />
+        <span>{{ $t('nav_side.home') }}</span>
+      </NuxtLink>
     </template>
     <slot>
       <PublishWidget draft-key="home" border="b base" />

diff --git a/pages/notifications.vue b/pages/notifications.vue
@@ -22,7 +22,10 @@ useHead({
 <template>
   <MainContent>
     <template #title>
-      <span text-lg font-bold>{{ t('nav_side.notifications') }}</span>
+      <NuxtLink to="/notifications" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+        <div i-ri:notification-4-line />
+        <span>{{ t('nav_side.notifications') }}</span>
+      </NuxtLink>
     </template>
 
     <template #header>

diff --git a/pages/public/index.vue b/pages/public/index.vue
@@ -13,7 +13,10 @@ useHead({
 <template>
   <MainContent>
     <template #title>
-      <span text-lg font-bold>{{ t('title.federated_timeline') }}</span>
+      <NuxtLink to="/public" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+        <div i-ri:group-2-line />
+        <span>{{ t('title.federated_timeline') }}</span>
+      </NuxtLink>
     </template>
 
     <slot>

diff --git a/pages/public/local.vue b/pages/public/local.vue
@@ -13,7 +13,10 @@ useHead({
 <template>
   <MainContent>
     <template #title>
-      <span text-lg font-bold>{{ t('title.local_timeline') }}</span>
+      <NuxtLink to="/public/local" text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+        <div i-ri:group-2-line />
+        <span>{{ t('title.local_timeline') }}</span>
+      </NuxtLink>
     </template>
 
     <slot>

diff --git a/plugins/scroll-to-top.ts b/plugins/scroll-to-top.ts
@@ -0,0 +1,9 @@
+export default defineNuxtPlugin(() => {
+  return {
+    provide: {
+      scrollToTop: () => {
+        document.body.scrollTo(0, 0)
+      },
+    },
+  }
+})