base bottom navbar

src/components/navigation/BottomNavBar.tsx

@@ -1,50 +1,59 @@
-'use client';
+"use client";
 
-import React from 'react'
+import { useGetProfile } from "@/app/[name]/(Profile)/profile/hooks/userProfileData";
-import Link from 'next/link'
+import { glassSurfaceNav } from "@/lib/styles/glassSurface";
-import BottomNavLink from './BottomNavLink'
+import clsx from "clsx";
-import BottomNavHighlightLink from './BottomNavLinkBig'
+import type { Icon } from "iconsax-react";
-import PagerIcon from '../icons/PagerIcon'
+import { Bag2, Heart, Home2, NotificationStatus, Reserve } from "iconsax-react";
-import BagIcon from '../icons/BagIcon'
+import Link from "next/link";
-import HeartIcon from '../icons/HeartIcon'
+import { useParams, usePathname, useRouter } from "next/navigation";
-import { useParams, usePathname, useRouter } from 'next/navigation'
+import { toastLoginRequired } from "../Toast";
-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';
 
 type BottomNavBarProps = {
   onPagerClick?: () => void;
+  compact?: boolean;
 };
 
-function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
+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, compact = false }: BottomNavBarProps) {
   const params = useParams();
-  const { name } = params;
+  const name = params.name as string;
   const pathname = usePathname();
-  const isHomeRoute = pathname === `/${name}`;
+  const router = useRouter();
-  const isAboutRoute = pathname.includes('about');
+  const { isSuccess } = useGetProfile();
-  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 navMaskStyle = React.useMemo(() => getBottomNavMaskStyle(), []);
+  const isHomeActive = pathname === `/${name}`;
-
+  const isFavoriteActive = pathname.startsWith(`/${name}/favorite`);
-  const cartItemsCount = React.useMemo(() => {
+  const isPagerActive = pathname.includes("/pager");
-    return Object.values(items).reduce((total, item) => {
+  const isNotificationsActive = pathname.startsWith(`/${name}/notifications`);
-      return total + (item?.quantity || 0);
+  const isCartActive = pathname.startsWith(`/${name}/cart`);
-    }, 0);
-  }, [items]);
 
   const handleFavoritesClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault();
@@ -52,99 +61,34 @@ 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
-      <div className="max-w-md mx-auto w-full aspect-436/104 relative z-30">
+      className={glassSurfaceNav(
-        <div
+        "mx-auto w-full rounded-full flex items-center",
-          aria-hidden
+        "transition-[height,max-width,gap] duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]",
-          className={glassSurfaceNav('absolute inset-0 pointer-events-none')}
+        compact ? "h-11 max-w-[300px] gap-1.5" : "h-14 max-w-md gap-2.5",
-          style={navMaskStyle}
+      )}
-        />
+    >
-
+      <NavItem href={`/${name}`} isActive={isHomeActive} Icon={Home2} />
-        <nav
+      <NavItem href={`/${name}/favorite`} isActive={isFavoriteActive} onClick={handleFavoritesClick} Icon={Heart} />
-          className="absolute left-0 right-0 grid grid-cols-5 gap-x-1 items-end px-4 text-[10px] pointer-events-auto"
+      {onPagerClick ? <NavItem isActive={isPagerActive} onButtonClick={onPagerClick} Icon={Reserve} /> : <NavItem href={`/${name}/pager`} isActive={isPagerActive} Icon={Reserve} />}
-          style={{
+      <NavItem href={`/${name}/notifications`} isActive={isNotificationsActive} onClick={handleNotificationClick} Icon={NotificationStatus} />
-            top: 'calc(10 / 104 * 100%)',
+      <NavItem href={`/${name}/cart`} isActive={isCartActive} Icon={Bag2} />
-            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>
-  )
+  );
 }
 
-export default BottomNavBar
+export default BottomNavBar;

src/components/wrapper/ClientMenuRouteWrapper.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import TopBar from '../topbar/TopBar'
 import SideMenu from '../menu/SideMenu'
 import BottomNavBar from '../navigation/BottomNavBar'
@@ -44,6 +44,8 @@ function ClientMenuRouteWrapper({ children }: Props) {
 
   const location = usePathname();
   const hideBottomNav = pathname.endsWith('/cart');
+  const mainRef = useRef<HTMLElement>(null);
+  const [navCompact, setNavCompact] = useState(false);
 
   useEffect(() => {
     if (menuState) {
@@ -52,6 +54,23 @@ function ClientMenuRouteWrapper({ children }: Props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [location])
 
+  useEffect(() => {
+    const scrollContainer = mainRef.current;
+    if (!scrollContainer || hideBottomNav) {
+      setNavCompact(false);
+      return;
+    }
+
+    const handleScroll = () => {
+      setNavCompact(scrollContainer.scrollTop > 24);
+    };
+
+    scrollContainer.addEventListener('scroll', handleScroll, { passive: true });
+    handleScroll();
+
+    return () => scrollContainer.removeEventListener('scroll', handleScroll);
+  }, [hideBottomNav, location]);
+
   return (
     <div className="h-svh overflow-hidden pt-10 flex flex-col pb-4 xl:pt-12">
 
@@ -70,8 +89,8 @@ function ClientMenuRouteWrapper({ children }: Props) {
 
 
       {!hideBottomNav && (
-        <div className="fixed bottom-0 left-0 right-0 z-45 px-4">
+        <div className="fixed bottom-7 left-0 right-0 z-45 px-4">
-          <BottomNavBar onPagerClick={togglePager} />
+          <BottomNavBar onPagerClick={togglePager} compact={navCompact} />
         </div>
       )}
 
@@ -85,6 +104,7 @@ function ClientMenuRouteWrapper({ children }: Props) {
 
 
       <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',