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
-      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} />}