feat(mobile-nav): hide bar on scroll down, reveal on scroll up

Author: Adebesin-Cell

app/components/Header/MobileBottomBar.client.vue

@@ -9,6 +9,37 @@ const contextLabel = computed(() => {
   return ''
 })
 
+// Hide on scroll down, reveal on scroll up (svelte.dev-style).
+// Keeps the bar visible while the menu is open, near the top of the page,
+// or when scroll direction flips.
+const hidden = shallowRef(false)
+const SCROLL_THRESHOLD = 24
+
+if (typeof window !== 'undefined') {
+  let lastY = window.scrollY
+  const onScroll = () => {
+    if (isOpen.value) {
+      hidden.value = false
+      lastY = window.scrollY
+      return
+    }
+    const y = window.scrollY
+    if (y < SCROLL_THRESHOLD) {
+      hidden.value = false
+    } else if (y > lastY) {
+      hidden.value = true
+    } else if (y < lastY) {
+      hidden.value = false
+    }
+    lastY = y
+  }
+  useEventListener(window, 'scroll', onScroll, { passive: true })
+}
+
+watch(isOpen, open => {
+  if (open) hidden.value = false
+})
+
 function handleSearchClick() {
   if (isOpen.value) close()
   nextTick(() => openCommandPalette())
@@ -22,7 +53,8 @@ function handleThemeClick() {
 <template>
   <Teleport to="body">
     <div
-      class="sm:hidden fixed inset-x-0 bottom-0 z-50 bg-bg border-t border-border flex items-center gap-2 px-3 h-14"
+      class="sm:hidden fixed inset-x-0 bottom-0 z-50 bg-bg border-t border-border flex items-center gap-2 px-3 h-14 transition-transform duration-200 ease-out motion-reduce:transition-none"
+      :class="hidden ? 'translate-y-full' : 'translate-y-0'"
       :style="{ '--mobile-bar-height': '3.5rem' }"
     >
       <NuxtLink