feat: make Navbar fixed and show when scrolling up

Rule-34 · Jan 26, 2024 · fb3b093 · fb3b093
1 parent 2bc9dcf
commit fb3b093
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 51 deletions.
diff --git a/components/layout/navigation/Navbar.vue b/components/layout/navigation/Navbar.vue
@@ -1,5 +1,6 @@
 <script setup>
   import { Bars3Icon, XMarkIcon } from '@heroicons/vue/24/outline'
+  import { useScroll } from '@vueuse/core'
 
   const route = useRoute()
 
@@ -14,64 +15,93 @@
         return false
     }
   })
+
+  const showFixedNavbar = ref(false)
+
+  if (process.client) {
+    const { arrivedState, directions } = useScroll(window, {
+      onScroll: () => {
+        if (
+          //
+          arrivedState.top === false &&
+          //
+          directions.top === true
+        ) {
+          showFixedNavbar.value = true
+
+          //
+        } else {
+          showFixedNavbar.value = false
+        }
+      }
+    })
+  }
 </script>
 
 <template>
-  <nav>
+  <nav class="mb-14">
     <!-- -->
 
     <!-- Container -->
-    <div class="container mx-auto max-w-3xl sm:px-6 lg:px-8">
+    <div
+      :class="showFixedNavbar ? 'fixed ' : 'absolute'"
+      class="inset-x-0"
+    >
       <!-- -->
 
-      <!-- Navbar -->
-      <div class="relative flex h-14 items-center justify-between">
-        <!-- -->
+      <div class="container mx-auto max-w-3xl sm:px-6 lg:px-8">
+        <!-- Navbar -->
+        <div
+          :class="showFixedNavbar ? 'bg-base-1000/60 backdrop-blur' : ''"
+          class="relative flex h-14 items-center justify-between transition-colors duration-300 ease-in-out"
+        >
+          <!-- -->
 
-        <!-- Right side: Menu button -->
-        <div class="absolute inset-y-0 left-0 flex items-center pl-2">
-          <button
-            class="hover:hover-text-util focus-visible:focus-outline-util hover:hover-bg-util inline-flex items-center justify-center rounded-md p-2 text-base-content-highlight focus-visible:ring-inset"
-            type="button"
-            @click="toggleMenu()"
-          >
-            <span class="sr-only">Open main menu</span>
+          <!-- Right side: Menu button -->
+          <div class="absolute inset-y-0 left-0 flex items-center pl-2">
+            <button
+              class="hover:hover-text-util focus-visible:focus-outline-util hover:hover-bg-util inline-flex items-center justify-center rounded-md p-2 text-base-content-highlight focus-visible:ring-inset"
+              type="button"
+              @click="toggleMenu()"
+            >
+              <span class="sr-only">Open main menu</span>
 
-            <Bars3Icon
-              v-if="!isMenuActive"
-              class="block h-6 w-6"
-            />
+              <Bars3Icon
+                v-if="!isMenuActive"
+                class="block h-6 w-6"
+              />
 
-            <XMarkIcon
-              v-else
-              class="block h-6 w-6"
-            />
-          </button>
-        </div>
+              <XMarkIcon
+                v-else
+                class="block h-6 w-6"
+              />
+            </button>
+          </div>
 
-        <!-- Center: Logo -->
-        <div class="flex flex-1 items-center justify-center">
-          <NuxtLink
-            v-if="!isPageWithLogoDisabled"
-            class="focus-visible:focus-outline-util flex-shrink-0"
-            to="/"
-          >
-            <img
-              alt="Icon"
-              class="flip-vertical-fwd h-6 w-6 text-base-content-highlight"
-              height="16"
-              loading="eager"
-              src="/icon.svg"
-              width="16"
-            />
-          </NuxtLink>
-        </div>
+          <!-- Center: Logo -->
+          <div class="flex flex-1 items-center justify-center">
+            <NuxtLink
+              v-if="!isPageWithLogoDisabled"
+              class="focus-visible:focus-outline-util flex-shrink-0"
+              to="/"
+            >
+              <img
+                alt="Icon"
+                class="flip-vertical-fwd h-6 w-6 text-base-content-highlight"
+                height="16"
+                loading="eager"
+                src="/icon.svg"
+                width="16"
+              />
+            </NuxtLink>
+          </div>
 
-        <!-- Right side: Actions -->
-        <TeleportTarget
-          id="navbar-actions"
-          class="absolute inset-y-0 right-0 flex flex-row-reverse items-center pr-2"
-        />
+          <!-- Right side: Actions -->
+          <TeleportTarget
+            id="navbar-actions"
+            class="absolute inset-y-0 right-0 flex flex-row-reverse items-center pr-2"
+          />
+        </div>
       </div>
     </div>
   </nav>

diff --git a/components/shared/ScrollTopButton.vue b/components/shared/ScrollTopButton.vue
@@ -2,16 +2,26 @@
   import { useScroll } from '@vueuse/core'
   import { ArrowUpIcon } from '@heroicons/vue/24/solid'
 
-  let y = ref(0)
+  const showScrollTopButton = ref(false)
 
   if (process.client) {
-    const { y: scrollY } = useScroll(document)
+    const { y, directions } = useScroll(window, {
+      onScroll: () => {
+        if (
+          //
+          directions.top === true &&
+          y.value >= window.innerHeight
+        ) {
+          showScrollTopButton.value = true
 
-    y = scrollY
+          //
+        } else {
+          showScrollTopButton.value = false
+        }
+      }
+    })
   }
 
-  const shouldShowScrollTopButton = computed(() => y.value > 250)
-
   function scrollToTop() {
     window.scrollTo({
       top: 0
@@ -30,7 +40,7 @@
       leave-to-class="transform opacity-0 scale-95"
     >
       <button
-        v-if="shouldShowScrollTopButton"
+        v-show="showScrollTopButton"
         class="hover:hover-text-util hover:hover-bg-util fixed bottom-4 right-4 z-10 flex h-12 w-12 items-center justify-center rounded-full bg-base-1000/60 text-base-content-highlight ring-2 ring-base-0/20 backdrop-blur"
         type="button"
         @click="scrollToTop"