@codesinger0/shared-components 1.1.42 → 1.1.44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Menu.jsx +41 -20
- package/package.json +1 -1
package/dist/components/Menu.jsx
CHANGED
|
@@ -7,24 +7,27 @@ import useScrollLock from '../hooks/useScrollLock';
|
|
|
7
7
|
const Menu = ({
|
|
8
8
|
// Business info
|
|
9
9
|
businessInfo = {},
|
|
10
|
-
|
|
10
|
+
|
|
11
11
|
// Navigation items
|
|
12
12
|
navigationItems = [],
|
|
13
|
-
|
|
13
|
+
|
|
14
14
|
// Auth/Action buttons component
|
|
15
15
|
AuthButtonsComponent = null,
|
|
16
|
-
|
|
16
|
+
|
|
17
17
|
// User context (for admin check)
|
|
18
18
|
isAdmin = false,
|
|
19
|
-
|
|
19
|
+
|
|
20
20
|
// Customization
|
|
21
21
|
mobileBreakpoint = 900,
|
|
22
22
|
logoClassName = '',
|
|
23
23
|
menuItemClassName = '',
|
|
24
24
|
sidebarWidth = 'w-80',
|
|
25
|
-
|
|
25
|
+
|
|
26
26
|
// Callbacks
|
|
27
|
-
onMenuItemClick = () => {},
|
|
27
|
+
onMenuItemClick = () => { },
|
|
28
|
+
|
|
29
|
+
// Children to display above menu items
|
|
30
|
+
children = null,
|
|
28
31
|
}) => {
|
|
29
32
|
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
|
|
30
33
|
const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });
|
|
@@ -68,20 +71,31 @@ const Menu = ({
|
|
|
68
71
|
|
|
69
72
|
{/* Right side - Menu items and logo */}
|
|
70
73
|
<div className="flex items-center space-x-8 space-x-reverse">
|
|
71
|
-
{/* Menu items */}
|
|
72
|
-
<div className="flex
|
|
73
|
-
{
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
)
|
|
84
|
-
|
|
74
|
+
{/* Menu items section */}
|
|
75
|
+
<div className="flex flex-col items-end mr-8" dir="rtl">
|
|
76
|
+
{/* Children above menu items */}
|
|
77
|
+
{children && (
|
|
78
|
+
<div className="mb-2">
|
|
79
|
+
{children}
|
|
80
|
+
</div>
|
|
81
|
+
)}
|
|
82
|
+
|
|
83
|
+
{/* Menu items - horizontal */}
|
|
84
|
+
<div className="flex items-center space-x-6 space-x-reverse">
|
|
85
|
+
|
|
86
|
+
{navigationItems.map((item, index) => (
|
|
87
|
+
item.adminRoute && !isAdmin ? null : (
|
|
88
|
+
<Link
|
|
89
|
+
key={index}
|
|
90
|
+
to={item.href}
|
|
91
|
+
onClick={() => handleMenuItemClick(item)}
|
|
92
|
+
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}`}
|
|
93
|
+
>
|
|
94
|
+
{item.label}
|
|
95
|
+
</Link>
|
|
96
|
+
)
|
|
97
|
+
))}
|
|
98
|
+
</div>
|
|
85
99
|
</div>
|
|
86
100
|
|
|
87
101
|
{/* Desktop Logo */}
|
|
@@ -143,6 +157,13 @@ const Menu = ({
|
|
|
143
157
|
</div>
|
|
144
158
|
</Link>
|
|
145
159
|
|
|
160
|
+
{/* Children next to logo */}
|
|
161
|
+
{children && (
|
|
162
|
+
<div>
|
|
163
|
+
{children}
|
|
164
|
+
</div>
|
|
165
|
+
)}
|
|
166
|
+
|
|
146
167
|
{/* Hamburger button */}
|
|
147
168
|
<button
|
|
148
169
|
className="hamburger flex flex-col justify-center items-center w-8 h-8 focus:outline-none text-main"
|