bottom navbar like instagram

2026-06-27 12:43:52 +03:30
parent bcfaceae94
commit fae7da51fa
2 changed files with 75 additions and 61 deletions
@@ -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
-      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",
-      )}
-    >
+    <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} />}
@@ -1,80 +1,112 @@
-'use client';
+"use client";

-import React, { useEffect, useRef, useState } 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);
-  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;
-    if (!scrollContainer || hideBottomNav) {
-      setNavCompact(false);
+    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 handleScroll = () => {
-      setNavCompact(scrollContainer.scrollTop > 24);
+    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)})`;
    };

-    scrollContainer.addEventListener('scroll', handleScroll, { passive: true });
-    handleScroll();
+    const onScroll = () => {
+      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">
-          <BottomNavBar onPagerClick={togglePager} compact={navCompact} />
+        <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
-        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',
-        )}
-      >
+      <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;