@stfrigerio/sito-template 0.1.29 → 0.1.30

package/dist/index.js

@@ -2772,10 +2772,11 @@ var desktopStyles = {"navbar":"Navbar-module_navbar__-SNiN","navbarSidebar":"Nav
 
 var mobileStyles = {"navbar":"Navbar-mobile-module_navbar__-shkE","navLogo":"Navbar-mobile-module_navLogo__7Gnna","navList":"Navbar-mobile-module_navList__FBo8I","navItem":"Navbar-mobile-module_navItem__-9E9-","navLink":"Navbar-mobile-module_navLink__A8n8F","active":"Navbar-mobile-module_active__h3ajz","activeBackground":"Navbar-mobile-module_activeBackground__btXAN","navIcon":"Navbar-mobile-module_navIcon__4L17v","activeIcon":"Navbar-mobile-module_activeIcon__A8GF-","navText":"Navbar-mobile-module_navText__ewf-i","activeText":"Navbar-mobile-module_activeText__fNqcU","navBadge":"Navbar-mobile-module_navBadge__YccGx","chevron":"Navbar-mobile-module_chevron__nBPqn","subNavList":"Navbar-mobile-module_subNavList__8tINc","navFooter":"Navbar-mobile-module_navFooter__yijWu","mobileMenuButton":"Navbar-mobile-module_mobileMenuButton__Dx3t8","mobileBackdrop":"Navbar-mobile-module_mobileBackdrop__biYng","navbarTop":"Navbar-mobile-module_navbarTop__oyfPE","navbarMinimal":"Navbar-mobile-module_navbarMinimal__cudny"};
 
-const Navbar = ({ items, logo, onItemClick, variant = 'sidebar', isMobile = false, footer, className = '' }) => {
+const Navbar = ({ items, logo, onItemClick, variant = 'sidebar', isMobile = false, footer, className = '', soundConfig }) => {
     const styles = React.useMemo(() => isMobile ? mobileStyles : desktopStyles, [isMobile]);
     const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
     const [expandedItems, setExpandedItems] = React.useState(new Set());
+    const { handlers, playSound } = useComponentSound(soundConfig);
     // Close mobile menu when screen size changes
     React.useEffect(() => {
         const handleResize = () => {
@@ -2787,6 +2788,7 @@ const Navbar = ({ items, logo, onItemClick, variant = 'sidebar', isMobile = fals
         return () => window.removeEventListener('resize', handleResize);
     }, []);
     const toggleMobileMenu = () => {
+        playSound('toggle');
         setIsMobileMenuOpen(!isMobileMenuOpen);
     };
     const toggleExpanded = (itemId) => {
@@ -2802,6 +2804,7 @@ const Navbar = ({ items, logo, onItemClick, variant = 'sidebar', isMobile = fals
         });
     };
     const handleItemClick = (item) => {
+        handlers.onClick?.();
         if (item.children && item.children.length > 0) {
             toggleExpanded(item.id);
         }
@@ -2821,13 +2824,13 @@ const Navbar = ({ items, logo, onItemClick, variant = 'sidebar', isMobile = fals
         const Icon = item.icon;
         const isExpanded = expandedItems.has(item.id);
         const hasChildren = item.children && item.children.length > 0;
-        return (jsxRuntime.jsxs(framerMotion.motion.li, { className: `${styles.navItem} ${depth > 0 ? styles.subNavItem : ''}`, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { delay: index * 0.05 }, children: [jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles.navLink} ${item.isActive ? styles.active : ''}`, onClick: () => handleItemClick(item), whileHover: { x: 5 }, whileTap: { scale: 0.98 }, children: [item.isActive && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles.activeBackground, layoutId: "activeNavBackground", initial: false, transition: {
+        return (jsxRuntime.jsxs(framerMotion.motion.li, { className: `${styles.navItem} ${depth > 0 ? styles.subNavItem : ''}`, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { delay: index * 0.05 }, children: [jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles.navLink} ${item.isActive ? styles.active : ''}`, onClick: () => handleItemClick(item), onMouseEnter: handlers.onMouseEnter, whileHover: { x: 5 }, whileTap: { scale: 0.98 }, children: [item.isActive && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles.activeBackground, layoutId: "activeNavBackground", initial: false, transition: {
                                 type: "spring",
                                 stiffness: 500,
                                 damping: 35
                             } })), Icon && (jsxRuntime.jsx(Icon, { className: `${styles.navIcon} ${item.isActive ? styles.activeIcon : ''}` })), jsxRuntime.jsx("span", { className: `${styles.navText} ${item.isActive ? styles.activeText : ''}`, children: item.label }), item.badge && (jsxRuntime.jsx("span", { className: styles.navBadge, children: item.badge })), hasChildren && (jsxRuntime.jsx(framerMotion.motion.span, { className: styles.chevron, animate: { rotate: isExpanded ? 180 : 0 }, transition: { duration: 0.2 }, children: "\u25BC" }))] }), hasChildren && (jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isExpanded && (jsxRuntime.jsx(framerMotion.motion.ul, { className: styles.subNavList, initial: { height: 0, opacity: 0 }, animate: { height: 'auto', opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2 }, children: item.children.map((child, childIndex) => renderNavItem(child, childIndex, depth + 1)) })) }))] }, item.id));
     };
-    const navContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [logo && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles.navLogo, initial: { opacity: 0, y: -20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.1 }, children: jsxRuntime.jsxs("div", { className: styles.logoContainer, children: [logo.src ? (jsxRuntime.jsx(framerMotion.motion.img, { src: logo.src, alt: logo.alt || 'Logo', className: styles.logoImage, whileHover: { scale: 1.05 }, transition: { type: "spring", stiffness: 400 } })) : (jsxRuntime.jsx("div", { className: styles.logoPlaceholder, children: logo.text?.charAt(0) || 'L' })), (logo.text || logo.subtitle) && (jsxRuntime.jsxs("div", { className: styles.logoContent, children: [logo.text && (jsxRuntime.jsx("span", { className: styles.logoText, children: logo.text })), logo.subtitle && (jsxRuntime.jsx("span", { className: styles.logoSubtitle, children: logo.subtitle }))] }))] }) })), jsxRuntime.jsx("ul", { className: styles.navList, children: items.map((item, index) => renderNavItem(item, index)) }), footer && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles.navFooter, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.3 }, children: footer }))] }));
+    const navContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [logo && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles.navLogo, initial: { opacity: 0, y: -20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.1 }, children: jsxRuntime.jsxs("div", { className: styles.logoContainer, children: [logo.src ? (jsxRuntime.jsx(framerMotion.motion.img, { src: logo.src, alt: logo.alt || 'Logo', className: styles.logoImage, onMouseEnter: handlers.onMouseEnter, whileHover: { scale: 1.05 }, transition: { type: "spring", stiffness: 400 } })) : (jsxRuntime.jsx("div", { className: styles.logoPlaceholder, children: logo.text?.charAt(0) || 'L' })), (logo.text || logo.subtitle) && (jsxRuntime.jsxs("div", { className: styles.logoContent, children: [logo.text && (jsxRuntime.jsx("span", { className: styles.logoText, children: logo.text })), logo.subtitle && (jsxRuntime.jsx("span", { className: styles.logoSubtitle, children: logo.subtitle }))] }))] }) })), jsxRuntime.jsx("ul", { className: styles.navList, children: items.map((item, index) => renderNavItem(item, index)) }), footer && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles.navFooter, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.3 }, children: footer }))] }));
     if (variant === 'top') {
         return (jsxRuntime.jsx(framerMotion.motion.nav, { className: `${styles.navbar} ${styles.navbarTop} ${className}`, initial: { y: -100 }, animate: { y: 0 }, transition: { type: "spring", stiffness: 300, damping: 30 }, children: navContent }));
     }