change size with scroll

src/app/[name]/(Main)/components/MenuIndex.tsx

@@ -9,10 +9,8 @@ import MenuItem from "@/components/listview/MenuItem";
 import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
 import VerticalScrollView from "@/components/listview/VerticalScrollView";
 import useToggle from "@/hooks/helpers/useToggle";
-import clsx from "clsx";
-import { motion } from "framer-motion";
-import { Candle2 } from "iconsax-react";
 import { glassSurfaceFlat } from "@/lib/styles/glassSurface";
+import { Candle2 } from "iconsax-react";
 import { useQueryState } from "next-usequerystate";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -39,7 +37,7 @@ const MenuIndex = () => {
   });
   const [selectedIngredients, setSelectedIngredients] = useQueryState("ingredients", { defaultValue: "" });
   const [selectedDeliveryId, setSelectedDeliveryId] = useQueryState("delivery", { defaultValue: "0" });
-  const smallCategoriesRef: React.RefObject<HTMLDivElement | null> = useRef(null);
+  const categoryStickySentinelRef: React.RefObject<HTMLDivElement | null> = useRef(null);
   const wrapperRef: React.RefObject<HTMLDivElement | null> = useRef(null);
   const [smallCategoriesVisible, setSmallCategoriesVisibility] = useState(false);
   const [isInitialMount, setIsInitialMount] = useState(true);
@@ -68,16 +66,18 @@ const MenuIndex = () => {
     const scrollContainer = wrapperRef.current.parentElement?.parentElement;
     if (!scrollContainer) return;
 
-    const handleScroll = () => {
-      if (!smallCategoriesRef.current) return;
-      setSmallCategoriesVisibility(scrollContainer.scrollTop >= smallCategoriesRef.current.offsetTop);
-    };
+    const sentinel = categoryStickySentinelRef.current;
+    if (!sentinel) return;
 
-    scrollContainer.addEventListener("scroll", handleScroll, { passive: true });
-    handleScroll();
+    const observer = new IntersectionObserver(
+      ([entry]) => setSmallCategoriesVisibility(!entry.isIntersecting),
+      { root: scrollContainer, threshold: 0 },
+    );
+
+    observer.observe(sentinel);
 
     return () => {
-      scrollContainer.removeEventListener("scroll", handleScroll);
+      observer.disconnect();
     };
   }, [isLoading]);
 
@@ -169,40 +169,33 @@ const MenuIndex = () => {
     <div className="flex flex-col gap-4 items-center pt-5 mb-8" ref={wrapperRef}>
       <div className="w-full">
         <SearchBox value={search} placeholder={tCommon("SearchPlaceholder")} onChange={updateSearch} />
-        <CategoryScroll categories={categories} selectedCategory={selectedCategory} onSelect={updateCategory} />
+        <div ref={categoryStickySentinelRef} className="h-px w-full" aria-hidden />
+        <div className="sticky z-20 top-16 xl:top-20 w-full">
+          <CategoryScroll
+            categories={categories}
+            selectedCategory={selectedCategory}
+            onSelect={updateCategory}
+            variant={smallCategoriesVisible ? "small" : "large"}
+          />
+        </div>
       </div>
 
-      <section className="w-full">
-        <div className="flex flex-wrap gap-2 items-center relative" ref={smallCategoriesRef}>
+      <section className="w-full relative z-0">
+        <div className="flex flex-wrap gap-2 items-center relative">
           <span className="sm:text-base text-sm font-medium max-w-[113px] sm:max-w-auto">{selectedCategory === "0" ? "" : categories.find((c) => c.id === selectedCategory)?.title || ""}</span>
           <div className="flex min-w-[247px] flex-1 gap-2 justify-end items-center">
-            <button onClick={toggleFilterModal} className={glassSurfaceFlat('rounded-xl h-8 ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]')}>
+            <button onClick={toggleFilterModal} className={glassSurfaceFlat("rounded-xl h-8 ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]")}>
               <Candle2 className="stroke-foreground" size={16} />
               <span className="text-xs leading-5 font-medium whitespace-nowrap">{tMenu("MenuFilterDrawer.Label")}</span>
             </button>
-            <button onClick={toggleSortingModal} className={glassSurfaceFlat('rounded-xl h-8 ps-4 pe-2 py-1.5 inline-flex items-center gap-2')}>
+            <button onClick={toggleSortingModal} className={glassSurfaceFlat("rounded-xl h-8 ps-4 pe-2 py-1.5 inline-flex items-center gap-2")}>
               <TextAlignIcon className="text-foreground" />
               <span className="text-xs leading-5 font-medium whitespace-nowrap">{activeSortingLabel}</span>
             </button>
           </div>
         </div>
 
-        <motion.div
-          initial={{
-            y: smallCategoriesVisible ? 0 : -50,
-            opacity: smallCategoriesVisible ? 1 : 0,
-          }}
-          animate={{
-            y: smallCategoriesVisible ? 0 : -50,
-            opacity: smallCategoriesVisible ? 1 : 0,
-          }}
-          transition={{ duration: 0.1 }}
-          className={clsx(glassSurfaceFlat('fixed left-0 z-10 top-0 px-4 pt-16 right-0 xl:pr-72 xl:pt-20 border-x-0 border-t-0 rounded-none'), !smallCategoriesVisible && "pointer-events-none")}
-        >
-          <CategoryScroll categories={categories} selectedCategory={selectedCategory} onSelect={updateCategory} variant="small" />
-        </motion.div>
-
-        <VerticalScrollView className="mt-5! overflow-y-auto h-full">
+        <VerticalScrollView className="mt-5!">
           {filteredReceiptItems.length === 0 ? (
             <div className="text-center text-foreground/60 py-8">{foodsData ? "غذایی یافت نشد" : "در حال بارگذاری..."}</div>
           ) : (

src/components/navigation/BottomNavBar.tsx

@@ -1,50 +1,58 @@
-'use client';
+"use client";
 
-import React from 'react'
-import Link from 'next/link'
-import BottomNavLink from './BottomNavLink'
-import BottomNavHighlightLink from './BottomNavLinkBig'
-import PagerIcon from '../icons/PagerIcon'
-import BagIcon from '../icons/BagIcon'
-import HeartIcon from '../icons/HeartIcon'
-import { useParams, usePathname, useRouter } from 'next/navigation'
-import HomeIcon from '../icons/HomeIcon'
-import { useTranslation } from 'react-i18next';
-import { useCart } from '@/app/[name]/(Main)/cart/hook/useCart';
-import { Building } from 'iconsax-react';
-import { glassSurfaceNav } from '@/lib/styles/glassSurface';
-import { getBottomNavMaskStyle } from './bottomNavShape';
-import { useGetProfile } from '@/app/[name]/(Profile)/profile/hooks/userProfileData';
-import { toastLoginRequired } from '../Toast';
+import { useGetProfile } from "@/app/[name]/(Profile)/profile/hooks/userProfileData";
+import { glassSurfaceNav } from "@/lib/styles/glassSurface";
+import clsx from "clsx";
+import type { Icon } from "iconsax-react";
+import { Bag2, Heart, Home2, NotificationStatus, Reserve } from "iconsax-react";
+import Link from "next/link";
+import { useParams, usePathname, useRouter } from "next/navigation";
+import { toastLoginRequired } from "../Toast";
 
 type BottomNavBarProps = {
   onPagerClick?: () => void;
 };
 
+type NavItemProps = {
+  href?: string;
+  isActive: boolean;
+  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+  onButtonClick?: () => void;
+  Icon: Icon;
+};
+
+function NavItem({ href, isActive, onClick, onButtonClick, Icon }: NavItemProps) {
+  const className = clsx("flex-1 flex items-center justify-center h-full rounded-full", isActive && "bg-primary/12");
+
+  const icon = <Icon size={20} color="currentColor" variant={isActive ? "Bold" : "Linear"} className={isActive ? "text-primary" : "text-icon-deactive"} />;
+
+  if (onButtonClick) {
+    return (
+      <button type="button" onClick={onButtonClick} className={className}>
+        {icon}
+      </button>
+    );
+  }
+
+  return (
+    <Link href={href ?? "#"} onClick={onClick} className={className}>
+      {icon}
+    </Link>
+  );
+}
+
 function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
-
   const params = useParams();
-  const { name } = params;
+  const name = params.name as string;
   const pathname = usePathname();
-  const isHomeRoute = pathname === `/${name}`;
-  const isAboutRoute = pathname.includes('about');
-  const buildingVariant = React.useMemo(() => {
-    return (isAboutRoute ? 'Bold' : 'Outline') as 'Bold' | 'Outline';
-  }, [isAboutRoute]);
-  const { isSuccess } = useGetProfile()
-  const router = useRouter()
-  const { t } = useTranslation('common', {
-    keyPrefix: 'BottomNavbar'
-  });
-  const { items } = useCart();
+  const router = useRouter();
+  const { isSuccess } = useGetProfile();
 
-  const navMaskStyle = React.useMemo(() => getBottomNavMaskStyle(), []);
-
-  const cartItemsCount = React.useMemo(() => {
-    return Object.values(items).reduce((total, item) => {
-      return total + (item?.quantity || 0);
-    }, 0);
-  }, [items]);
+  const isHomeActive = pathname === `/${name}`;
+  const isFavoriteActive = pathname.startsWith(`/${name}/favorite`);
+  const isPagerActive = pathname.includes("/pager");
+  const isNotificationsActive = pathname.startsWith(`/${name}/notifications`);
+  const isCartActive = pathname.startsWith(`/${name}/cart`);
 
   const handleFavoritesClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault();
@@ -52,99 +60,28 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
       router.push(`/${name}/favorite`);
     } else {
       e.stopPropagation();
-      toastLoginRequired(() => router.push(`/${name}/auth`), 'error');
+      toastLoginRequired(() => router.push(`/${name}/auth`), "error");
     }
-  }
+  };
+
+  const handleNotificationClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    if (isSuccess) {
+      router.push(`/${name}/notifications`);
+    } else {
+      toastLoginRequired(() => router.push(`/${name}/auth`), "error");
+    }
+  };
 
   return (
-    <div className="fixed bottom-0 left-0 w-full bg-transparent pointer-events-none">
-      <div className="max-w-md mx-auto w-full aspect-436/104 relative z-30">
-        <div
-          aria-hidden
-          className={glassSurfaceNav('absolute inset-0 pointer-events-none')}
-          style={navMaskStyle}
-        />
-
-        <nav
-          className="absolute left-0 right-0 grid grid-cols-5 gap-x-1 items-end px-4 text-[10px] pointer-events-auto"
-          style={{
-            top: 'calc(10 / 104 * 100%)',
-            height: 'calc(80 / 104 * 100%)',
-          }}
-        >
-          <BottomNavLink
-            href={`/${name}/cart`}
-            icon={<BagIcon width={20} height={20} />}
-            value={t('Cart')}
-          />
-          {onPagerClick ? (
-            <button
-              onClick={onPagerClick}
-              className="flex flex-col justify-arround items-center gap-[5px] text-primary pointer-events-auto **:stroke-primary"
-            >
-              <PagerIcon width={20} height={20} />
-              <span className="text-xs2">
-                {t('Pager')}
-              </span>
-            </button>
-          ) : (
-            <BottomNavLink href={`/${name}/pager`} icon={<PagerIcon width={20} height={20} />} value={t('Pager')} />
-          )}
-          <BottomNavHighlightLink
-            href={`/${name}`}
-            icon={
-              <HomeIcon
-                className="transition-all duration-200 stroke-primary"
-                fill="white"
-                stroke="currentColor"
-                variant={isHomeRoute ? 'Bold' : 'Outline'}
-                width={20}
-                height={20} />}
-            value={t('Menu')} />
-          <Link
-            href={`/${name}/about`}
-            className="flex flex-col justify-arround items-center gap-[5px] pointer-events-auto min-w-0 text-primary **:stroke-primary"
-          >
-            <div className="shrink-0">
-              <Building
-                key={`building-${buildingVariant}-${isAboutRoute}`}
-                size={20}
-                variant={buildingVariant as 'Bold' | 'Outline'}
-                color="currentColor"
-                className='stroke-0'
-              />
-            </div>
-            <span className="text-xs2 text-center truncate w-full">
-              {t('about')}
-            </span>
-          </Link>
-          <BottomNavLink href={`/${name}/favorite`} onClick={handleFavoritesClick} icon={<HeartIcon width={20} height={20} />} value={t('Favorites')} />
-        </nav>
-
-        {cartItemsCount > 0 && (
-          <div
-            className="absolute left-0 right-0 pointer-events-none"
-            style={{
-              top: 'calc(10 / 104 * 100%)',
-              height: 'calc(80 / 104 * 100%)'
-            }}
-          >
-            <div className="h-full px-4 grid grid-cols-5 gap-x-1 items-end">
-              <div className="flex flex-col items-center gap-[5px]">
-                <div className="relative shrink-0">
-                  <div className="w-5 h-5 opacity-0"></div>
-                  <span className="absolute sm:-top-1 sm:-right-1 top-0 -right-1 flex items-center justify-center min-w-[14px] min-h-[14px] px-1 text-[8px] font-medium text-white dark:bg-white dark:text-black bg-primary rounded-full z-50">
-                    {cartItemsCount > 99 ? '99+' : cartItemsCount}
-                  </span>
-                </div>
-                <span className="text-xs2 opacity-0">{t('Cart')}</span>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
+    <div className={glassSurfaceNav("mx-auto w-full rounded-full flex items-center h-14 max-w-md gap-2.5")}>
+      <NavItem href={`/${name}`} isActive={isHomeActive} Icon={Home2} />
+      <NavItem href={`/${name}/favorite`} isActive={isFavoriteActive} onClick={handleFavoritesClick} Icon={Heart} />
+      {onPagerClick ? <NavItem isActive={isPagerActive} onButtonClick={onPagerClick} Icon={Reserve} /> : <NavItem href={`/${name}/pager`} isActive={isPagerActive} Icon={Reserve} />}
+      <NavItem href={`/${name}/notifications`} isActive={isNotificationsActive} onClick={handleNotificationClick} Icon={NotificationStatus} />
+      <NavItem href={`/${name}/cart`} isActive={isCartActive} Icon={Bag2} />
     </div>
-  )
+  );
 }
 
-export default BottomNavBar
+export default BottomNavBar;

src/components/wrapper/ClientMenuRouteWrapper.tsx

@@ -1,61 +1,112 @@
-'use client';
+"use client";
 
-import React, { useEffect } from 'react'
-import TopBar from '../topbar/TopBar'
-import SideMenu from '../menu/SideMenu'
-import BottomNavBar from '../navigation/BottomNavBar'
-import useToggle from '@/hooks/helpers/useToggle';
-import { usePathname, useRouter } from 'next/navigation';
-import usePreference from '@/hooks/helpers/usePreference';
-import PagerModal from '../pager/PagerModal';
-import clsx from 'clsx';
-import { glassSurface } from '@/lib/styles/glassSurface';
+import usePreference from "@/hooks/helpers/usePreference";
+import useToggle from "@/hooks/helpers/useToggle";
+import { glassSurface } from "@/lib/styles/glassSurface";
+import clsx from "clsx";
+import { usePathname, useRouter } from "next/navigation";
+import React, { useEffect, useRef } from "react";
+import SideMenu from "../menu/SideMenu";
+import BottomNavBar from "../navigation/BottomNavBar";
+import PagerModal from "../pager/PagerModal";
+import TopBar from "../topbar/TopBar";
 
-type Props = {} & React.AllHTMLAttributes<HTMLBodyElementEventMap>
+type Props = {} & React.AllHTMLAttributes<HTMLBodyElementEventMap>;
 
 function ClientMenuRouteWrapper({ children }: Props) {
   const { state: profileDrop, toggle: _toggleProfileDrop } = useToggle(false);
   const { state: menuState, toggle: _toggleMenuState, set: setMenuState } = useToggle(false);
   const { state: searchModal, toggle: _toggleSearchModal } = useToggle(false);
-  const { state: nightMode, toggle: _toggleNightMode } = usePreference<boolean>('night-mode', false);
+  const { state: nightMode, toggle: _toggleNightMode } = usePreference<boolean>("night-mode", false);
   const { state: pagerOpen, toggle: togglePager, set: setPagerOpen } = useToggle(false);
   const router = useRouter();
   const pathname = usePathname();
 
   const toggleProfileDrop = () => {
     _toggleProfileDrop();
-  }
+  };
 
   const toggleNightMode = () => {
     _toggleNightMode();
-  }
+  };
 
   const toggleMenuState = () => {
     _toggleMenuState();
-  }
+  };
 
   const toggleSearchModal = () => {
     _toggleSearchModal();
-  }
+  };
 
   const handleClosePager = () => {
     setPagerOpen(false);
   };
 
   const location = usePathname();
-  const hideBottomNav = pathname.endsWith('/cart');
+  const hideBottomNav = pathname.endsWith("/cart");
+  const mainRef = useRef<HTMLElement>(null);
+
+  // Refs for the scroll-driven animation — kept outside React state so scroll
+  // events never trigger re-renders. The RAF+lerp loop writes directly to the DOM.
+  const navContainerRef = useRef<HTMLDivElement>(null);
+  const targetProgressRef = useRef(0);
+  const currentProgressRef = useRef(0);
+  const rafIdRef = useRef(0);
 
   useEffect(() => {
     if (menuState) {
-      setMenuState(false)
+      setMenuState(false);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [location])
+  }, [location]);
+
+  useEffect(() => {
+    const scrollEl = mainRef.current;
+    const navEl = navContainerRef.current;
+
+    if (!navEl) return;
+
+    if (!scrollEl || hideBottomNav) {
+      cancelAnimationFrame(rafIdRef.current);
+      navEl.style.transform = "";
+      targetProgressRef.current = 0;
+      currentProgressRef.current = 0;
+      return;
+    }
+
+    const SCROLL_RANGE = 150; // px of scroll to reach full compact state
+    const LERP_FACTOR = 0.1;  // per-frame smoothing (lower = smoother, higher = snappier)
+    const MIN_SCALE = 0.82;   // scale floor (18% smaller at full scroll)
+
+    const tick = () => {
+      const diff = targetProgressRef.current - currentProgressRef.current;
+      if (Math.abs(diff) < 0.0005) {
+        currentProgressRef.current = targetProgressRef.current;
+      } else {
+        currentProgressRef.current += diff * LERP_FACTOR;
+        rafIdRef.current = requestAnimationFrame(tick);
+      }
+      const scale = 1 - (1 - MIN_SCALE) * currentProgressRef.current;
+      navEl.style.transform = `scale(${scale.toFixed(4)})`;
+    };
+
+    const onScroll = () => {
+      targetProgressRef.current = Math.min(1, Math.max(0, scrollEl.scrollTop / SCROLL_RANGE));
+      cancelAnimationFrame(rafIdRef.current);
+      rafIdRef.current = requestAnimationFrame(tick);
+    };
+
+    scrollEl.addEventListener("scroll", onScroll, { passive: true });
+
+    return () => {
+      scrollEl.removeEventListener("scroll", onScroll);
+      cancelAnimationFrame(rafIdRef.current);
+    };
+  }, [hideBottomNav, location]);
 
   return (
     <div className="h-svh overflow-hidden pt-10 flex flex-col pb-4 xl:pt-12">
-
-      <div className={glassSurface('z-50 fixed right-4 left-4 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-4 justify-between rounded-[32px] xl:w-[calc(100%-305px)]')}>
+      <div className={glassSurface("z-50 fixed right-4 left-4 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-4 justify-between rounded-[32px] xl:w-[calc(100%-305px)]")}>
         <TopBar
           profileDropState={profileDrop}
           toggleProfileDropState={toggleProfileDrop}
@@ -68,35 +119,25 @@ function ClientMenuRouteWrapper({ children }: Props) {
         />
       </div>
 
-
       {!hideBottomNav && (
-        <div className="fixed bottom-0 left-0 right-0 z-45 px-4">
+        <div
+          ref={navContainerRef}
+          className="fixed bottom-7 left-0 right-0 z-45 px-4"
+          style={{ willChange: "transform", transformOrigin: "center bottom" }}
+        >
           <BottomNavBar onPagerClick={togglePager} />
         </div>
       )}
 
+      <SideMenu nightModeState={nightMode} togglenightModeState={toggleNightMode} menuState={menuState} toggleMenuState={toggleMenuState} />
 
-      <SideMenu
-        nightModeState={nightMode}
-        togglenightModeState={toggleNightMode}
-        menuState={menuState}
-        toggleMenuState={toggleMenuState}
-      />
-
-
-      <main
-        className={clsx(
-          'relative noscrollbar overflow-y-auto h-svh pt-6 xl:pt-8 px-4 xl:pr-0 xl:pl-5 w-full xl:w-[calc(100%-285px)] md:self-end',
-          hideBottomNav ? 'pb-4' : 'pb-12',
-        )}
-      >
+      <main ref={mainRef} className={clsx("relative noscrollbar overflow-y-auto h-svh pt-6 xl:pt-8 px-4 xl:pr-0 xl:pl-5 w-full xl:w-[calc(100%-285px)] md:self-end", hideBottomNav ? "pb-4" : "pb-12")}>
         {children}
       </main>
 
       <PagerModal visible={pagerOpen} onClose={handleClosePager} />
     </div>
-
-  )
+  );
 }
 
-export default ClientMenuRouteWrapper
+export default ClientMenuRouteWrapper;