feat: active navigation item (#125)

Author: hmbanan666

apps/storefront-telegram/app/components/catalog/CategoriesSliderMenu.vue

@@ -1,13 +1,15 @@
 <template>
-  <div class="z-40 sticky top-0 h-fit tg-bg-secondary">
+  <div class="z-40 sticky top-0 h-fit tg-content-safe-area-top tg-bg-secondary">
     <div class="max-w-full overflow-x-scroll snap-x">
-      <div class="w-max flex flex-row flex-wrap gap-5">
+      <div class="py-1 w-max flex flex-row flex-wrap gap-1">
         <div
           v-for="category in menuStore.menu?.categories"
+          :id="`to-${category.slug}`"
           :key="category.id"
-          class="scroll-ml-6 snap-start"
+          class="scroll-ml-24 snap-start text-muted rounded-md"
+          :class="{ 'tg-text-button bg-primary': visibleCategory === category.slug }"
         >
-          <button class="py-2" @click="scrollToCategory(category.slug)">
+          <button class="px-3 py-1" @click="scrollToCategory(category.slug)">
             {{ category.name }}
           </button>
         </div>
@@ -18,6 +20,7 @@
 
 <script setup lang="ts">
 const { vibrate } = useFeedback()
+const { visibleCategory } = useCatalog()
 
 const menuStore = useMenuStore()
 

apps/storefront-telegram/app/components/catalog/CategoryBlock.vue

@@ -1,6 +1,12 @@
 <template>
-  <div class="flex flex-col gap-3 mb-10">
-    <h2 :id="category?.slug" class="scroll-mt-14 text-2xl/5 font-semibold tracking-tight">
+  <div
+    v-element-visibility="[
+      (isVisible) => (isVisible && category?.slug) ? visibleCategory = category.slug : null,
+      observerOptions,
+    ]"
+    class="flex flex-col gap-3 mb-10"
+  >
+    <h2 :id="category?.slug" class="scroll-mt-22 text-2xl/5 font-semibold tracking-tight">
       {{ category?.name }}
     </h2>
 
@@ -16,10 +22,14 @@
 </template>
 
 <script setup lang="ts">
+import { vElementVisibility } from '@vueuse/components'
+
 const { categoryId } = defineProps<{
   categoryId: string
 }>()
 
+const { visibleCategory, observerOptions } = useCatalog()
+
 const menuStore = useMenuStore()
 const category = menuStore.menu?.categories.find((c) => c.id === categoryId)
 const products = category?.products.filter((p) => p.isAvailableForPurchase && p.variants.length)

apps/storefront-telegram/app/composables/useCatalog.ts

@@ -0,0 +1,19 @@
+function _useCatalog() {
+  const visibleCategory = ref<string | null>(null)
+
+  const observerOptions = { rootMargin: '0px 0px -400px 0px' }
+
+  const scrollToCategory = useDebounceFn(() => {
+    const category = window.document.getElementById(`to-${visibleCategory.value}`)
+    category?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })
+  }, 1000)
+
+  watch(visibleCategory, () => scrollToCategory())
+
+  return {
+    visibleCategory,
+    observerOptions,
+  }
+}
+
+export const useCatalog = createSharedComposable(_useCatalog)

packages/ui/package.json

@@ -13,6 +13,7 @@
     "@nuxtjs/i18n": "catalog:",
     "@unovis/ts": "catalog:",
     "@unovis/vue": "catalog:",
+    "@vueuse/components": "catalog:",
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
     "@vueuse/nuxt": "catalog:",