bottom navbar like instagram

src/components/navigation/BottomNavBar.tsx

@@ -11,7 +11,6 @@ import { toastLoginRequired } from "../Toast";
 
 type BottomNavBarProps = {
   onPagerClick?: () => void;
-  compact?: boolean;
 };
 
 type NavItemProps = {
@@ -42,7 +41,7 @@ function NavItem({ href, isActive, onClick, onButtonClick, Icon }: NavItemProps)
   );
 }
 
-function BottomNavBar({ onPagerClick, compact = false }: BottomNavBarProps) {
+function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
   const params = useParams();
   const name = params.name as string;
   const pathname = usePathname();
@@ -75,13 +74,7 @@ function BottomNavBar({ onPagerClick, compact = false }: BottomNavBarProps) {
   };
 
   return (
-    <div
+    <div className={glassSurfaceNav("mx-auto w-full rounded-full flex items-center h-14 max-w-md gap-2.5")}>
-      className={glassSurfaceNav(
-        "mx-auto w-full rounded-full flex items-center",
-        "transition-[height,max-width,gap] duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]",
-        compact ? "h-11 max-w-[300px] gap-1.5" : "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} />}

src/components/wrapper/ClientMenuRouteWrapper.tsx

@@ -1,80 +1,112 @@
-'use client';
+"use client";
 
-import React, { useEffect, useRef, useState } from 'react'
+import usePreference from "@/hooks/helpers/usePreference";
-import TopBar from '../topbar/TopBar'
+import useToggle from "@/hooks/helpers/useToggle";
-import SideMenu from '../menu/SideMenu'
+import { glassSurface } from "@/lib/styles/glassSurface";
-import BottomNavBar from '../navigation/BottomNavBar'
+import clsx from "clsx";
-import useToggle from '@/hooks/helpers/useToggle';
+import { usePathname, useRouter } from "next/navigation";
-import { usePathname, useRouter } from 'next/navigation';
+import React, { useEffect, useRef } from "react";
-import usePreference from '@/hooks/helpers/usePreference';
+import SideMenu from "../menu/SideMenu";
-import PagerModal from '../pager/PagerModal';
+import BottomNavBar from "../navigation/BottomNavBar";
-import clsx from 'clsx';
+import PagerModal from "../pager/PagerModal";
-import { glassSurface } from '@/lib/styles/glassSurface';
+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);
-  const [navCompact, setNavCompact] = useState(false);
+
+  // 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 scrollContainer = mainRef.current;
+    const scrollEl = mainRef.current;
-    if (!scrollContainer || hideBottomNav) {
+    const navEl = navContainerRef.current;
-      setNavCompact(false);
+
+    if (!navEl) return;
+
+    if (!scrollEl || hideBottomNav) {
+      cancelAnimationFrame(rafIdRef.current);
+      navEl.style.transform = "";
+      targetProgressRef.current = 0;
+      currentProgressRef.current = 0;
       return;
     }
 
-    const handleScroll = () => {
+    const SCROLL_RANGE = 150; // px of scroll to reach full compact state
-      setNavCompact(scrollContainer.scrollTop > 24);
+    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)})`;
     };
 
-    scrollContainer.addEventListener('scroll', handleScroll, { passive: true });
+    const onScroll = () => {
-    handleScroll();
+      targetProgressRef.current = Math.min(1, Math.max(0, scrollEl.scrollTop / SCROLL_RANGE));
+      cancelAnimationFrame(rafIdRef.current);
+      rafIdRef.current = requestAnimationFrame(tick);
+    };
 
-    return () => scrollContainer.removeEventListener('scroll', handleScroll);
+    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}
@@ -87,36 +119,25 @@ function ClientMenuRouteWrapper({ children }: Props) {
         />
       </div>
 
-
       {!hideBottomNav && (
-        <div className="fixed bottom-7 left-0 right-0 z-45 px-4">
+        <div
-          <BottomNavBar onPagerClick={togglePager} compact={navCompact} />
+          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
+      <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")}>
-        nightModeState={nightMode}
-        togglenightModeState={toggleNightMode}
-        menuState={menuState}
-        toggleMenuState={toggleMenuState}
-      />
-
-
-      <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;