'use client';


import { cn } from "../../utils/cn.mjs";
import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
import { useScrollDetection } from "../../hooks/useScrollDetection.mjs";
import { Burger } from "./Burger.mjs";
import { useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { m } from "framer-motion";

//#region src/components/Navbar/MobileNavbar.tsx
/**
* Framer Motion animation variants for staggered menu item reveals
* Creates a smooth cascading effect when menu opens/closes
*/
const navVariants = {
	open: { transition: {
		staggerChildren: .07,
		delayChildren: .2
	} },
	closed: { transition: {
		staggerChildren: .05,
		staggerDirection: -1
	} }
};
/**
* Shared background styling for mobile navbar components
* Provides glass-morphism effect with blur and transparency
*/
const bgStyle = "bg-card/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur";
/**
* Mobile Navigation Bar Component
*
* A sophisticated mobile-first navigation component with collapsible full-screen menu,
* scroll-aware behavior, and smooth animations. Optimized for touch interactions and
* mobile user experience patterns.
*
* Features:
* - Collapsible hamburger menu with full-screen overlay
* - Auto-hide on scroll down, show on scroll up for screen space optimization
* - Background scroll prevention when menu is open
* - Staggered animations for smooth menu item reveals
* - Flexible content areas (top/bottom children and sections)
* - Responsive layout with viewport-aware sizing
* - Backdrop blur effects for modern glass-morphism design
*
* Layout Structure:
* ```
* [Logo] ----------- [Right Items] [Burger]
*           (when expanded)
* ┌─────────────────────────────────────────┐
* │ [Top Children]                          │
* │ [Top Sections - Navigation Items]       │
* │ [Bottom Sections - Navigation Items]    │
* │ [Bottom Children]                       │
* └─────────────────────────────────────────┘
* ```
*
* Behavioral Features:
* - Sticky positioning with dynamic hide/show based on scroll direction
* - Background scroll locking when menu is expanded
* - Click outside to close expanded menu
* - Smooth height animations with MaxHeightSmoother
* - Intelligent burger button visibility (only shown if sections exist)
*
* Animation Details:
* - Menu items animate in with staggered timing (70ms delay between items)
* - Exit animations are reversed with 50ms stagger
* - Initial delay of 200ms before items start animating in
* - Full viewport height menu with dynamic height calculation
*
* @example
* Basic mobile navbar:
* ```tsx
* <MobileNavbar
*   logo={<MobileLogo />}
*   topSections={primaryNavItems}
*   rightItems={<SearchIcon />}
* />
* ```
*
* @example
* Full-featured mobile navbar:
* ```tsx
* <MobileNavbar
*   logo={<Logo />}
*   topChildren={<WelcomeMessage />}
*   topSections={mainNavItems}
*   bottomSections={utilityNavItems}
*   bottomChildren={<UserProfile />}
*   rightItems={
*     <>
*       <NotificationIcon />
*       <SearchIcon />
*     </>
*   }
* />
* ```
*
* Accessibility Features:
* - Menu expanded state communicated via aria-expanded
* - Focus management and keyboard navigation support
* - Screen reader friendly with semantic nav structure
*
* @template T - Tab properties type extending TabProps for type safety
* @param props - MobileNavbar component props
* @returns Mobile navigation with collapsible full-screen menu
*/
const MobileNavbar = ({ logo, topChildren, topSections = [], bottomChildren, bottomSections = [], rightItems }) => {
	const [isHidden, setIsHidden] = useState(false);
	const [isUnrolled, setIsUnrolled] = useState(false);
	const navRef = useRef(null);
	useScrollBlockage({
		disableScroll: isUnrolled,
		key: "mobile_nav"
	});
	useScrollDetection({
		onScrollUp: () => setIsHidden(false),
		onScrollDown: () => setIsHidden(true),
		isEnabled: !isUnrolled
	});
	const backDivHeight = !isHidden ? navRef.current?.clientHeight ?? 0 : 0;
	const isBurgerShowed = topSections.length + bottomSections.length > 0;
	return /* @__PURE__ */ jsxs("nav", {
		className: cn(bgStyle, "sticky top-0 z-50 flex w-screen flex-col transition", isHidden ? "-translate-y-full" : "translate-y-0"),
		id: "mobile-menu",
		children: [/* @__PURE__ */ jsxs("div", {
			className: "flex w-full items-center justify-between gap-1 px-4 py-3 md:gap-[10vw]",
			ref: navRef,
			children: [logo, /* @__PURE__ */ jsxs("div", {
				className: "flex w-full flex-1 items-center justify-end gap-6",
				children: [/* @__PURE__ */ jsx("div", {
					className: "flex w-full items-center justify-end gap-1",
					children: rightItems
				}), isBurgerShowed && /* @__PURE__ */ jsx(Burger, {
					isActive: isUnrolled,
					onClick: () => setIsUnrolled((isUnrolled$1) => !isUnrolled$1)
				})]
			})]
		}), /* @__PURE__ */ jsx("div", {
			className: cn(bgStyle, "absolute bottom-0 left-0 w-full translate-y-full"),
			children: /* @__PURE__ */ jsx(MaxHeightSmoother, {
				isHidden: !isUnrolled,
				children: /* @__PURE__ */ jsxs(m.div, {
					className: "flex w-full flex-col pt-10 pb-[20%] text-lg text-text tracking-wide",
					onClick: () => setIsUnrolled(false),
					animate: isUnrolled ? "open" : "closed",
					variants: navVariants,
					style: { height: `calc(100vh - ${backDivHeight}px)` },
					children: [
						topChildren,
						/* @__PURE__ */ jsxs("div", {
							className: "flex h-full flex-col justify-center",
							children: [topSections, bottomSections]
						}),
						/* @__PURE__ */ jsx("div", {
							className: "m-auto flex w-full max-w-[400px] items-center justify-center gap-1 px-5 py-3",
							children: bottomChildren
						})
					]
				})
			})
		})]
	});
};

//#endregion
export { MobileNavbar };
//# sourceMappingURL=MobileNavbar.mjs.map