aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
107 lines (104 loc) • 3.18 kB
JavaScript
'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { forwardRef, useState, useEffect } from 'react';
import { GlassMobileNav } from './GlassMobileNav.js';
import { GlassBottomNav } from './GlassBottomNav.js';
import { cn } from '../../lib/utilsComprehensive.js';
import { useA11yId } from '../../utils/a11y.js';
import { useReducedMotion } from '../../hooks/useReducedMotion.js';
/**
* GlassResponsiveNav component
* Adaptive navigation that switches between mobile drawer and bottom nav based on screen size
*/
const GlassResponsiveNav = /*#__PURE__*/forwardRef(({
config = {},
mobileNavOpen = false,
onMobileNavOpenChange,
navigation = [],
bottomNavItems = [],
activePath = "",
activeBottomNavId,
onBottomNavActiveChange,
isActive,
logo,
title,
footer,
elevation = "level2",
respectMotionPreference = true,
className,
children
}, ref) => {
// Accessibility and motion preferences
const navId = useA11yId("responsive-nav");
useReducedMotion();
const {
mobileBreakpoint = 768,
tabletBreakpoint = 1024,
mobileNavType = "both",
tabletNavType = "sidebar"
} = config;
const [screenSize, setScreenSize] = useState("desktop");
// Handle responsive behavior
useEffect(() => {
const checkScreenSize = () => {
const width = window.innerWidth;
if (width < mobileBreakpoint) {
setScreenSize("mobile");
} else if (width < tabletBreakpoint) {
setScreenSize("tablet");
} else {
setScreenSize("desktop");
}
};
checkScreenSize();
window.addEventListener("resize", checkScreenSize);
return () => window.removeEventListener("resize", checkScreenSize);
}, [mobileBreakpoint, tabletBreakpoint]);
// Determine which navigation to show
const shouldShowMobileNav = () => {
if (screenSize === "mobile") {
return mobileNavType === "drawer" || mobileNavType === "both";
}
if (screenSize === "tablet") {
return tabletNavType === "drawer";
}
return false;
};
const shouldShowBottomNav = () => {
if (screenSize === "mobile") {
return mobileNavType === "bottom" || mobileNavType === "both";
}
if (screenSize === "tablet") {
return tabletNavType === "bottom";
}
return false;
};
return jsxs("div", {
ref: ref,
className: cn("relative", className),
id: navId,
role: "navigation",
"aria-label": "Responsive navigation",
children: [shouldShowMobileNav() && jsx(GlassMobileNav, {
open: mobileNavOpen,
onOpenChange: onMobileNavOpenChange,
navigation: navigation,
activePath: activePath,
isActive: isActive,
logo: logo,
title: title,
footer: footer,
elevation: elevation
}), shouldShowBottomNav() && bottomNavItems.length > 0 && jsx(GlassBottomNav, {
items: bottomNavItems,
activeId: activeBottomNavId,
onActiveChange: onBottomNavActiveChange,
elevation: elevation,
variant: "default",
className: 'z-40'
}), children]
});
});
GlassResponsiveNav.displayName = "GlassResponsiveNav";
export { GlassResponsiveNav };
//# sourceMappingURL=GlassResponsiveNav.js.map