@codesinger0/shared-components 1.0.45 → 1.0.47

package/dist/components/Menu.jsx

@@ -0,0 +1,224 @@
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Link } from 'react-router-dom';
+import { useMediaQuery } from "react-responsive";
+import useScrollLock from '../../hooks/useScrollLock';
+
+const Menu = ({
+  // Business info
+  businessInfo = {},
+  
+  // Navigation items
+  navigationItems = [],
+  
+  // Auth/Action buttons component
+  AuthButtonsComponent = null,
+  
+  // User context (for admin check)
+  isAdmin = false,
+  
+  // Customization
+  mobileBreakpoint = 900,
+  logoClassName = '',
+  menuItemClassName = '',
+  sidebarWidth = 'w-80',
+  
+  // Callbacks
+  onMenuItemClick = () => {},
+}) => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });
+
+  // Close sidebar when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (isSidebarOpen && !event.target.closest('.sidebar') && !event.target.closest('.hamburger')) {
+        setIsSidebarOpen(false);
+      }
+    };
+
+    if (isSidebarOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isSidebarOpen]);
+
+  useScrollLock(isSidebarOpen && isMobile);
+
+  const toggleSidebar = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
+
+  const handleMenuItemClick = (item) => {
+    setIsSidebarOpen(false);
+    onMenuItemClick(item);
+  };
+
+  // Desktop Menu Component
+  const DesktopMenu = () => (
+    <nav className="sticky top-0 z-50 bg-menu py-4 border-b-2 border-primary">
+      <div className="w-full px-6 flex justify-between items-center">
+        {/* Left side - Auth buttons */}
+        <div className="flex items-center">
+          {AuthButtonsComponent && <AuthButtonsComponent />}
+        </div>
+
+        {/* Right side - Menu items and logo */}
+        <div className="flex items-center space-x-8 space-x-reverse">
+          {/* Menu items */}
+          <div className="flex items-center space-x-6 space-x-reverse mr-8" dir="rtl">
+            {navigationItems.map((item, index) => (
+              item.adminRoute && !isAdmin ? null : (
+                <Link
+                  key={index}
+                  to={item.href}
+                  onClick={() => handleMenuItemClick(item)}
+                  className={`subtitle font-normal cursor-pointer menu-item-hover px-4 py-2 rounded-md text transition-colors duration-500 ease-in-out hover:text-primary ${menuItemClassName}`}
+                >
+                  {item.label}
+                </Link>
+              )
+            ))}
+          </div>
+
+          {/* Desktop Logo */}
+          <Link to="/" className={`text-primary font-bold text-xl ml-8 ${logoClassName}`}>
+            <div className="text-primary font-bold text-xl ml-8">
+              <div className="relative w-24 h-12 lg:w-32 lg:h-16 overflow-hidden flex items-center justify-center">
+                <img
+                  src={businessInfo.logo}
+                  alt={businessInfo.name}
+                  className="relative z-10 w-full h-full object-contain"
+                  onError={(e) => {
+                    e.target.style.display = 'none';
+                    e.target.nextElementSibling.style.display = 'flex';
+                  }}
+                />
+                {/* Fallback text */}
+                <div
+                  className="relative z-10 w-full h-full flex items-center justify-center text-primary text-xs font-bold"
+                  style={{ display: 'none' }}
+                >
+                  {businessInfo.name?.slice(0, 2) || ''}
+                </div>
+              </div>
+            </div>
+          </Link>
+        </div>
+      </div>
+    </nav>
+  );
+
+  // Mobile Menu Component
+  const MobileMenu = () => (
+    <>
+      <nav className="sticky top-0 z-50 bg-menu px-4 py-2">
+        <div className="flex justify-between items-center">
+          {AuthButtonsComponent && <AuthButtonsComponent isMobile={true} />}
+
+          {/* Mobile Logo */}
+          <Link to="/" className={`text-primary font-bold text-xl ${logoClassName}`}>
+            <div className="text-primary font-bold text-lg">
+              <div className="w-25 h-12 overflow-hidden flex items-center justify-center">
+                <img
+                  src={businessInfo.logo}
+                  alt={businessInfo.name}
+                  className="w-full h-full object-contain"
+                  onError={(e) => {
+                    e.target.style.display = 'none';
+                    e.target.nextElementSibling.style.display = 'flex';
+                  }}
+                />
+                {/* Fallback text */}
+                <div
+                  className="w-full h-full flex items-center justify-center text-primary text-xs font-bold"
+                  style={{ display: 'none' }}
+                >
+                  {businessInfo.name?.slice(0, 2) || ''}
+                </div>
+              </div>
+            </div>
+          </Link>
+
+          {/* Hamburger button */}
+          <button
+            className="hamburger flex flex-col justify-center items-center w-8 h-8 focus:outline-none text-main"
+            onClick={toggleSidebar}
+            aria-label="תפריט"
+          >
+            <span className={`hamburger-line block w-6 h-0.5 mb-1 ${isSidebarOpen ? 'rotate-45 translate-y-1.5' : ''}`} style={{ backgroundColor: 'var(--text)' }}></span>
+            <span className={`hamburger-line block w-6 h-0.5 mb-1 ${isSidebarOpen ? 'opacity-0' : ''}`} style={{ backgroundColor: 'var(--text)' }}></span>
+            <span className={`hamburger-line block w-6 h-0.5 ${isSidebarOpen ? '-rotate-45 -translate-y-1.5' : ''}`} style={{ backgroundColor: 'var(--text)' }}></span>
+          </button>
+        </div>
+      </nav>
+
+      {/* Overlay + Sidebar (animated) */}
+      <AnimatePresence>
+        {isSidebarOpen && (
+          <>
+            {/* Overlay fade */}
+            <motion.div
+              key="overlay"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 0.5 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.2 }}
+              className="fixed inset-0 bg-black z-40 supports-[height:100dvh]:h-[100dvh]"
+              onClick={() => setIsSidebarOpen(false)}
+              aria-hidden="true"
+            />
+
+            {/* Sidebar spring slide */}
+            <motion.aside
+              key="sidebar"
+              initial={{ x: '100%' }}
+              animate={{ x: 0 }}
+              exit={{ x: '100%' }}
+              transition={{ type: 'spring', stiffness: 320, damping: 28, mass: 0.9 }}
+              className={`sidebar fixed top-0 right-0 h-full ${sidebarWidth} bg-white shadow-lg z-50`}
+              role="dialog"
+              aria-label="תפריט צד"
+            >
+              <div className="p-6">
+                {/* Close button */}
+                <div className="flex justify-start mb-8">
+                  <button
+                    onClick={() => setIsSidebarOpen(false)}
+                    className="text-black hover:text-gray-700 text-2xl"
+                    aria-label="סגור תפריט"
+                  >
+                    ×
+                  </button>
+                </div>
+
+                {/* Menu items */}
+                <div className="flex flex-col space-y-3">
+                  {navigationItems.map((item, index) => (
+                    item.adminRoute && !isAdmin ? null : (
+                      <Link
+                        key={index}
+                        to={item.href}
+                        onClick={() => handleMenuItemClick(item)}
+                        className={`text-lg py-3 px-2 text-black text-right ${menuItemClassName}`}
+                      >
+                        {item.label}
+                      </Link>
+                    )
+                  ))}
+                </div>
+              </div>
+            </motion.aside>
+          </>
+        )}
+      </AnimatePresence>
+    </>
+  );
+
+  return isMobile ? <MobileMenu /> : <DesktopMenu />;
+};
+
+export default Menu;

package/dist/index.js

@@ -9,6 +9,7 @@ export { default as QAAccordion } from './components/QAAccordion'
 export { default as AdvantagesList } from './components/AdvantagesList'
 export { default as ShoppingCartModal } from './components/cart/ShoppingCartModal'
 export { default as FloatingCartButton } from './components/cart/FloatingCartButton'
+export { default as Menu } from './components/Menu'
 
 // Modals
 export { default as ItemDetailsModal } from './components/modals/ItemDetailsModal'
@@ -19,4 +20,7 @@ export { ToastProvider, useToast } from './components/ToastProvider'
 export { CartProvider, useCart } from './context/CartContext'
 
 // Hooks
-export { default as useScrollLock } from './hooks/useScrollLock'
+export { default as useScrollLock } from './hooks/useScrollLock'
+
+// Utils
+export { default as ScrollToTop } from './utils/ScrollToTop'

package/dist/utils/ScrollToTop.jsx

@@ -0,0 +1,14 @@
+// ScrollToTop.jsx
+import { useLayoutEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+export default function ScrollToTop({ behavior = 'auto' }) {
+  const { pathname } = useLocation();
+
+  // useLayoutEffect prevents visible jump because it runs before paint
+  useLayoutEffect(() => {
+    window.scrollTo({ top: 0, left: 0, behavior });
+  }, [pathname, behavior]);
+
+  return null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codesinger0/shared-components",
-  "version": "1.0.45",
+  "version": "1.0.47",
   "description": "Shared React components for customer projects",
   "main": "dist/index.js",
   "files": [