From 0e7076b9918c607ce5fec5eedb4c2f6fce135060 Mon Sep 17 00:00:00 2001
From: Shinigami <chrissi92@hotmail.de>
Date: Tue, 29 Nov 2022 21:15:53 +0100
Subject: [PATCH] feat: scroll to top (#237)

---
 components/nav/NavBottom.vue   | 12 ++++++------
 components/nav/NavSideItem.vue |  2 +-
 pages/bookmarks.vue            |  5 ++++-
 pages/conversations.vue        |  5 ++++-
 pages/explore.vue              |  5 ++++-
 pages/favourites.vue           |  5 ++++-
 pages/home.vue                 |  5 ++++-
 pages/notifications.vue        |  5 ++++-
 pages/public/index.vue         |  5 ++++-
 pages/public/local.vue         |  5 ++++-
 plugins/scroll-to-top.ts       |  9 +++++++++
 11 files changed, 48 insertions(+), 15 deletions(-)
 create mode 100644 plugins/scroll-to-top.ts

diff --git a/components/nav/NavBottom.vue b/components/nav/NavBottom.vue
index 7ca403f6..ea6fbbe2 100644
--- 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
index 0f777abb..9eceba50 100644
--- 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
index 1ad192e0..179ed8a9 100644
--- 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
index 32b13705..df65ec7e 100644
--- 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
index e4fda751..396b99c1 100644
--- 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
index c3c951ff..193720d9 100644
--- 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
index 23913eed..508424f8 100644
--- 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
index 292dc551..f09b4769 100644
--- 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
index cbb0c987..c491cf0c 100644
--- 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
index 12fd584b..13ec4daa 100644
--- 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
new file mode 100644
index 00000000..943acc7d
--- /dev/null
+++ b/plugins/scroll-to-top.ts
@@ -0,0 +1,9 @@
+export default defineNuxtPlugin(() => {
+  return {
+    provide: {
+      scrollToTop: () => {
+        document.body.scrollTo(0, 0)
+      },
+    },
+  }
+})