@oneuptime/common 9.3.9 → 9.3.10
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/UI/Components/Navbar/NavBar.tsx +146 -52
- package/UI/Components/Navbar/NavBarMenu.tsx +87 -7
- package/UI/Components/Navbar/NavBarMenuItem.tsx +12 -0
- package/build/dist/UI/Components/Navbar/NavBar.js +58 -13
- package/build/dist/UI/Components/Navbar/NavBar.js.map +1 -1
- package/build/dist/UI/Components/Navbar/NavBarMenu.js +37 -5
- package/build/dist/UI/Components/Navbar/NavBarMenu.js.map +1 -1
- package/build/dist/UI/Components/Navbar/NavBarMenuItem.js +12 -0
- package/build/dist/UI/Components/Navbar/NavBarMenuItem.js.map +1 -1
- package/package.json +1 -1
|
@@ -13,6 +13,7 @@ import NavBarMenuItem from "./NavBarMenuItem";
|
|
|
13
13
|
import Button, { ButtonStyleType } from "../Button/Button";
|
|
14
14
|
import Navigation from "../../Utils/Navigation";
|
|
15
15
|
import useComponentOutsideClick from "../../Types/UseComponentOutsideClick";
|
|
16
|
+
import Icon, { ThickProp } from "../Icon/Icon";
|
|
16
17
|
|
|
17
18
|
export interface NavItem {
|
|
18
19
|
id: string;
|
|
@@ -29,13 +30,16 @@ export interface MoreMenuItem {
|
|
|
29
30
|
description: string;
|
|
30
31
|
route: Route;
|
|
31
32
|
icon: IconProp;
|
|
32
|
-
iconColor?: string; // Tailwind color
|
|
33
|
+
iconColor?: string; // Tailwind color name like "blue", "purple", "amber"
|
|
34
|
+
category?: string; // Category for grouping items (e.g., "Essentials", "Observability")
|
|
35
|
+
activeRoute?: Route | undefined; // Route to check for active state
|
|
33
36
|
}
|
|
34
37
|
|
|
35
38
|
export interface ComponentProps {
|
|
36
39
|
items?: NavItem[];
|
|
37
40
|
rightElement?: NavItem;
|
|
38
41
|
moreMenuItems?: MoreMenuItem[];
|
|
42
|
+
moreMenuTitle?: string; // Title for the more menu (default: "More")
|
|
39
43
|
moreMenuFooter?: {
|
|
40
44
|
title: string;
|
|
41
45
|
description: string;
|
|
@@ -246,12 +250,150 @@ const Navbar: FunctionComponent<ComponentProps> = (
|
|
|
246
250
|
// Desktop view
|
|
247
251
|
const className: string =
|
|
248
252
|
props.className ||
|
|
249
|
-
"bg-white flex text-center
|
|
253
|
+
"bg-white flex text-center items-center lg:py-2 hidden md:flex";
|
|
254
|
+
|
|
255
|
+
// Find active item in more menu items (needed for breadcrumb)
|
|
256
|
+
const activeMoreItem: MoreMenuItem | undefined = props.moreMenuItems?.find(
|
|
257
|
+
(item: MoreMenuItem) => {
|
|
258
|
+
const routeToCheck: Route = item.activeRoute || item.route;
|
|
259
|
+
return Navigation.isStartWith(routeToCheck);
|
|
260
|
+
},
|
|
261
|
+
);
|
|
262
|
+
|
|
263
|
+
// Group items by category for the menu
|
|
264
|
+
const categories: Map<string, MoreMenuItem[]> = new Map();
|
|
265
|
+
props.moreMenuItems?.forEach((item: MoreMenuItem) => {
|
|
266
|
+
const cat: string = item.category || "Other";
|
|
267
|
+
if (!categories.has(cat)) {
|
|
268
|
+
categories.set(cat, []);
|
|
269
|
+
}
|
|
270
|
+
categories.get(cat)!.push(item);
|
|
271
|
+
});
|
|
272
|
+
|
|
273
|
+
// Convert to sections array for NavBarMenu
|
|
274
|
+
const sections: Array<{ title: string; items: Array<ReactElement> }> = [];
|
|
275
|
+
categories.forEach((items: MoreMenuItem[], category: string) => {
|
|
276
|
+
sections.push({
|
|
277
|
+
title: category,
|
|
278
|
+
items: items.map((item: MoreMenuItem) => {
|
|
279
|
+
return (
|
|
280
|
+
<NavBarMenuItem
|
|
281
|
+
key={item.title}
|
|
282
|
+
title={item.title}
|
|
283
|
+
description={item.description}
|
|
284
|
+
route={item.route}
|
|
285
|
+
icon={item.icon}
|
|
286
|
+
iconColor={item.iconColor}
|
|
287
|
+
onClick={forceHideMoreMenu}
|
|
288
|
+
/>
|
|
289
|
+
);
|
|
290
|
+
}),
|
|
291
|
+
});
|
|
292
|
+
});
|
|
293
|
+
|
|
294
|
+
// Find Home item from navItems
|
|
295
|
+
const homeItem: NavItem | undefined = props.items.find((item: NavItem) => {
|
|
296
|
+
return item.title === "Home";
|
|
297
|
+
});
|
|
298
|
+
const otherNavItems: NavItem[] = props.items.filter((item: NavItem) => {
|
|
299
|
+
return item.title !== "Home";
|
|
300
|
+
});
|
|
250
301
|
|
|
251
302
|
return (
|
|
252
|
-
<nav
|
|
303
|
+
<nav
|
|
304
|
+
className={props.rightElement ? `flex justify-between items-center` : ""}
|
|
305
|
+
>
|
|
253
306
|
<div data-testid="nav-children" className={className}>
|
|
254
|
-
{
|
|
307
|
+
{/* Combined Home > Product breadcrumb */}
|
|
308
|
+
<div className="flex items-center">
|
|
309
|
+
{/* Home link */}
|
|
310
|
+
{homeItem && (
|
|
311
|
+
<NavBarItem
|
|
312
|
+
key={homeItem.id}
|
|
313
|
+
id={homeItem.id}
|
|
314
|
+
title={homeItem.title}
|
|
315
|
+
icon={homeItem.icon}
|
|
316
|
+
activeRoute={homeItem.activeRoute}
|
|
317
|
+
route={homeItem.route}
|
|
318
|
+
exact={true}
|
|
319
|
+
/>
|
|
320
|
+
)}
|
|
321
|
+
|
|
322
|
+
{/* Separator and active product */}
|
|
323
|
+
{activeMoreItem && (
|
|
324
|
+
<>
|
|
325
|
+
<span className="text-gray-400 mx-1">/</span>
|
|
326
|
+
<div
|
|
327
|
+
onMouseOver={showMoreMenu}
|
|
328
|
+
onMouseLeave={hideMoreMenu}
|
|
329
|
+
className="relative"
|
|
330
|
+
>
|
|
331
|
+
<button
|
|
332
|
+
onClick={showMoreMenu}
|
|
333
|
+
onMouseOver={showMoreMenu}
|
|
334
|
+
className="bg-gray-100 text-gray-900 hover:bg-gray-200 rounded-md py-2 px-3 inline-flex items-center text-sm font-medium transition-colors cursor-pointer"
|
|
335
|
+
>
|
|
336
|
+
<Icon
|
|
337
|
+
icon={activeMoreItem.icon}
|
|
338
|
+
className="mr-1.5 h-4 w-4"
|
|
339
|
+
thick={ThickProp.Thick}
|
|
340
|
+
/>
|
|
341
|
+
<span>{activeMoreItem.title}</span>
|
|
342
|
+
<Icon
|
|
343
|
+
icon={IconProp.ChevronDown}
|
|
344
|
+
className="ml-1.5 h-3 w-3 text-gray-500"
|
|
345
|
+
/>
|
|
346
|
+
</button>
|
|
347
|
+
{isMoreMenuVisible && (
|
|
348
|
+
<NavBarMenu
|
|
349
|
+
sections={sections}
|
|
350
|
+
footer={props.moreMenuFooter}
|
|
351
|
+
/>
|
|
352
|
+
)}
|
|
353
|
+
</div>
|
|
354
|
+
</>
|
|
355
|
+
)}
|
|
356
|
+
|
|
357
|
+
{/* Show Products button when no product is selected */}
|
|
358
|
+
{!activeMoreItem &&
|
|
359
|
+
props.moreMenuItems &&
|
|
360
|
+
props.moreMenuItems.length > 0 && (
|
|
361
|
+
<>
|
|
362
|
+
<span className="text-gray-400 mx-1">/</span>
|
|
363
|
+
<div
|
|
364
|
+
onMouseOver={showMoreMenu}
|
|
365
|
+
onMouseLeave={hideMoreMenu}
|
|
366
|
+
className="relative"
|
|
367
|
+
>
|
|
368
|
+
<button
|
|
369
|
+
onClick={showMoreMenu}
|
|
370
|
+
onMouseOver={showMoreMenu}
|
|
371
|
+
className="text-gray-500 hover:bg-gray-50 hover:text-gray-900 rounded-md py-2 px-3 inline-flex items-center text-sm font-medium transition-colors cursor-pointer"
|
|
372
|
+
>
|
|
373
|
+
<Icon
|
|
374
|
+
icon={IconProp.Squares}
|
|
375
|
+
className="mr-1.5 h-4 w-4"
|
|
376
|
+
thick={ThickProp.Thick}
|
|
377
|
+
/>
|
|
378
|
+
<span>{props.moreMenuTitle || "Products"}</span>
|
|
379
|
+
<Icon
|
|
380
|
+
icon={IconProp.ChevronDown}
|
|
381
|
+
className="ml-1.5 h-3 w-3 text-gray-400"
|
|
382
|
+
/>
|
|
383
|
+
</button>
|
|
384
|
+
{isMoreMenuVisible && (
|
|
385
|
+
<NavBarMenu
|
|
386
|
+
sections={sections}
|
|
387
|
+
footer={props.moreMenuFooter}
|
|
388
|
+
/>
|
|
389
|
+
)}
|
|
390
|
+
</div>
|
|
391
|
+
</>
|
|
392
|
+
)}
|
|
393
|
+
</div>
|
|
394
|
+
|
|
395
|
+
{/* Other nav items */}
|
|
396
|
+
{otherNavItems.map((item: NavItem) => {
|
|
255
397
|
return (
|
|
256
398
|
<NavBarItem
|
|
257
399
|
key={item.id}
|
|
@@ -264,54 +406,6 @@ const Navbar: FunctionComponent<ComponentProps> = (
|
|
|
264
406
|
/>
|
|
265
407
|
);
|
|
266
408
|
})}
|
|
267
|
-
|
|
268
|
-
{/* More menu for desktop */}
|
|
269
|
-
{props.moreMenuItems && props.moreMenuItems.length > 0 && (
|
|
270
|
-
<NavBarItem
|
|
271
|
-
title="More"
|
|
272
|
-
icon={IconProp.More}
|
|
273
|
-
onMouseLeave={hideMoreMenu}
|
|
274
|
-
onMouseOver={showMoreMenu}
|
|
275
|
-
onClick={showMoreMenu}
|
|
276
|
-
>
|
|
277
|
-
<div onMouseOver={showMoreMenu} onMouseLeave={hideMoreMenu}>
|
|
278
|
-
{isMoreMenuVisible &&
|
|
279
|
-
(props.moreMenuFooter ? (
|
|
280
|
-
<NavBarMenu footer={props.moreMenuFooter}>
|
|
281
|
-
{props.moreMenuItems.map((item: MoreMenuItem) => {
|
|
282
|
-
return (
|
|
283
|
-
<NavBarMenuItem
|
|
284
|
-
key={item.title}
|
|
285
|
-
title={item.title}
|
|
286
|
-
description={item.description}
|
|
287
|
-
route={item.route}
|
|
288
|
-
icon={item.icon}
|
|
289
|
-
iconColor={item.iconColor}
|
|
290
|
-
onClick={forceHideMoreMenu}
|
|
291
|
-
/>
|
|
292
|
-
);
|
|
293
|
-
})}
|
|
294
|
-
</NavBarMenu>
|
|
295
|
-
) : (
|
|
296
|
-
<NavBarMenu>
|
|
297
|
-
{props.moreMenuItems.map((item: MoreMenuItem) => {
|
|
298
|
-
return (
|
|
299
|
-
<NavBarMenuItem
|
|
300
|
-
key={item.title}
|
|
301
|
-
title={item.title}
|
|
302
|
-
description={item.description}
|
|
303
|
-
route={item.route}
|
|
304
|
-
icon={item.icon}
|
|
305
|
-
iconColor={item.iconColor}
|
|
306
|
-
onClick={forceHideMoreMenu}
|
|
307
|
-
/>
|
|
308
|
-
);
|
|
309
|
-
})}
|
|
310
|
-
</NavBarMenu>
|
|
311
|
-
))}
|
|
312
|
-
</div>
|
|
313
|
-
</NavBarItem>
|
|
314
|
-
)}
|
|
315
409
|
</div>
|
|
316
410
|
|
|
317
411
|
{props.rightElement && (
|
|
@@ -6,11 +6,12 @@ import React, { FunctionComponent, ReactElement } from "react";
|
|
|
6
6
|
|
|
7
7
|
export interface MenuSection {
|
|
8
8
|
title: string;
|
|
9
|
-
|
|
9
|
+
items: Array<ReactElement>;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
export interface ComponentProps {
|
|
13
|
-
children
|
|
13
|
+
children?: ReactElement | Array<ReactElement>;
|
|
14
|
+
sections?: MenuSection[];
|
|
14
15
|
footer?: {
|
|
15
16
|
title: string;
|
|
16
17
|
description: string;
|
|
@@ -21,11 +22,90 @@ export interface ComponentProps {
|
|
|
21
22
|
const NavBarMenu: FunctionComponent<ComponentProps> = (
|
|
22
23
|
props: ComponentProps,
|
|
23
24
|
): ReactElement => {
|
|
24
|
-
|
|
25
|
-
if (
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
// If sections are provided, render categorized menu
|
|
26
|
+
if (props.sections && props.sections.length > 0) {
|
|
27
|
+
// Separate Settings section from other sections
|
|
28
|
+
const mainSections: MenuSection[] = props.sections.filter(
|
|
29
|
+
(section: MenuSection) => {
|
|
30
|
+
return section.title !== "Settings";
|
|
31
|
+
},
|
|
32
|
+
);
|
|
33
|
+
const settingsSection: MenuSection | undefined = props.sections.find(
|
|
34
|
+
(section: MenuSection) => {
|
|
35
|
+
return section.title === "Settings";
|
|
36
|
+
},
|
|
37
|
+
);
|
|
38
|
+
|
|
39
|
+
return (
|
|
40
|
+
<div className="absolute left-0 z-10 mt-8 w-screen max-w-5xl transform px-2 sm:px-0">
|
|
41
|
+
<div className="overflow-hidden rounded-2xl shadow-xl ring-1 ring-black ring-opacity-5 bg-white">
|
|
42
|
+
{/* Sections */}
|
|
43
|
+
<div className="p-6">
|
|
44
|
+
<div className="flex gap-6">
|
|
45
|
+
{/* Main sections grid */}
|
|
46
|
+
<div className="flex-1 grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
47
|
+
{mainSections.map((section: MenuSection, index: number) => {
|
|
48
|
+
return (
|
|
49
|
+
<div key={index} className="space-y-3">
|
|
50
|
+
<h3 className="text-xs font-semibold uppercase tracking-wider text-gray-500 px-2.5 text-left">
|
|
51
|
+
{section.title}
|
|
52
|
+
</h3>
|
|
53
|
+
<div className="space-y-1">{section.items}</div>
|
|
54
|
+
</div>
|
|
55
|
+
);
|
|
56
|
+
})}
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
{/* Settings section on the side */}
|
|
60
|
+
{settingsSection && (
|
|
61
|
+
<div className="border-l border-gray-100 pl-6 space-y-3 min-w-[200px]">
|
|
62
|
+
<h3 className="text-xs font-semibold uppercase tracking-wider text-gray-500 px-2.5 text-left">
|
|
63
|
+
{settingsSection.title}
|
|
64
|
+
</h3>
|
|
65
|
+
<div className="space-y-1">{settingsSection.items}</div>
|
|
66
|
+
</div>
|
|
67
|
+
)}
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
{/* Footer */}
|
|
72
|
+
{props.footer && (
|
|
73
|
+
<div className="border-t border-gray-100 bg-gray-50 px-4 py-4">
|
|
74
|
+
<Link
|
|
75
|
+
to={props.footer.link}
|
|
76
|
+
openInNewTab={true}
|
|
77
|
+
className="group flex items-center gap-3 rounded-lg p-2.5 -m-2 transition-colors hover:bg-gray-100"
|
|
78
|
+
>
|
|
79
|
+
<div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-gray-100 ring-1 ring-gray-200 group-hover:bg-gray-200 group-hover:ring-gray-300 transition-all">
|
|
80
|
+
<Icon
|
|
81
|
+
icon={IconProp.GitHub}
|
|
82
|
+
className="h-5 w-5 text-gray-700"
|
|
83
|
+
/>
|
|
84
|
+
</div>
|
|
85
|
+
<div className="flex-1 min-w-0 text-left">
|
|
86
|
+
<p className="text-sm font-medium text-gray-900">
|
|
87
|
+
{props.footer.title}
|
|
88
|
+
</p>
|
|
89
|
+
<p className="text-xs text-gray-500">
|
|
90
|
+
{props.footer.description}
|
|
91
|
+
</p>
|
|
92
|
+
</div>
|
|
93
|
+
</Link>
|
|
94
|
+
</div>
|
|
95
|
+
)}
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
// Legacy: render children directly
|
|
102
|
+
let children: Array<ReactElement> = [];
|
|
103
|
+
if (props.children) {
|
|
104
|
+
if (!Array.isArray(props.children)) {
|
|
105
|
+
children = [props.children];
|
|
106
|
+
} else {
|
|
107
|
+
children = props.children;
|
|
108
|
+
}
|
|
29
109
|
}
|
|
30
110
|
|
|
31
111
|
// Calculate number of columns based on items count
|
|
@@ -102,6 +102,18 @@ const NavBarMenuItem: FunctionComponent<ComponentProps> = (
|
|
|
102
102
|
hoverBg: "hover:bg-sky-50",
|
|
103
103
|
hoverRing: "group-hover:ring-sky-300",
|
|
104
104
|
},
|
|
105
|
+
emerald: {
|
|
106
|
+
bg: "bg-emerald-50",
|
|
107
|
+
ring: "ring-emerald-200",
|
|
108
|
+
hoverBg: "hover:bg-emerald-50",
|
|
109
|
+
hoverRing: "group-hover:ring-emerald-300",
|
|
110
|
+
},
|
|
111
|
+
cyan: {
|
|
112
|
+
bg: "bg-cyan-50",
|
|
113
|
+
ring: "ring-cyan-200",
|
|
114
|
+
hoverBg: "hover:bg-cyan-50",
|
|
115
|
+
hoverRing: "group-hover:ring-cyan-300",
|
|
116
|
+
},
|
|
105
117
|
};
|
|
106
118
|
|
|
107
119
|
const colors: {
|
|
@@ -6,8 +6,9 @@ import NavBarMenuItem from "./NavBarMenuItem";
|
|
|
6
6
|
import Button, { ButtonStyleType } from "../Button/Button";
|
|
7
7
|
import Navigation from "../../Utils/Navigation";
|
|
8
8
|
import useComponentOutsideClick from "../../Types/UseComponentOutsideClick";
|
|
9
|
+
import Icon, { ThickProp } from "../Icon/Icon";
|
|
9
10
|
const Navbar = (props) => {
|
|
10
|
-
var _a, _b;
|
|
11
|
+
var _a, _b, _c, _d;
|
|
11
12
|
const [isMobile, setIsMobile] = useState(false);
|
|
12
13
|
const [isMobileMenuVisible, setIsMobileMenuVisible] = useState(false);
|
|
13
14
|
const [isMoreMenuVisible, setIsMoreMenuVisible] = useState(false);
|
|
@@ -118,22 +119,66 @@ const Navbar = (props) => {
|
|
|
118
119
|
}
|
|
119
120
|
// Desktop view
|
|
120
121
|
const className = props.className ||
|
|
121
|
-
"bg-white flex text-center
|
|
122
|
-
|
|
122
|
+
"bg-white flex text-center items-center lg:py-2 hidden md:flex";
|
|
123
|
+
// Find active item in more menu items (needed for breadcrumb)
|
|
124
|
+
const activeMoreItem = (_b = props.moreMenuItems) === null || _b === void 0 ? void 0 : _b.find((item) => {
|
|
125
|
+
const routeToCheck = item.activeRoute || item.route;
|
|
126
|
+
return Navigation.isStartWith(routeToCheck);
|
|
127
|
+
});
|
|
128
|
+
// Group items by category for the menu
|
|
129
|
+
const categories = new Map();
|
|
130
|
+
(_c = props.moreMenuItems) === null || _c === void 0 ? void 0 : _c.forEach((item) => {
|
|
131
|
+
const cat = item.category || "Other";
|
|
132
|
+
if (!categories.has(cat)) {
|
|
133
|
+
categories.set(cat, []);
|
|
134
|
+
}
|
|
135
|
+
categories.get(cat).push(item);
|
|
136
|
+
});
|
|
137
|
+
// Convert to sections array for NavBarMenu
|
|
138
|
+
const sections = [];
|
|
139
|
+
categories.forEach((items, category) => {
|
|
140
|
+
sections.push({
|
|
141
|
+
title: category,
|
|
142
|
+
items: items.map((item) => {
|
|
143
|
+
return (React.createElement(NavBarMenuItem, { key: item.title, title: item.title, description: item.description, route: item.route, icon: item.icon, iconColor: item.iconColor, onClick: forceHideMoreMenu }));
|
|
144
|
+
}),
|
|
145
|
+
});
|
|
146
|
+
});
|
|
147
|
+
// Find Home item from navItems
|
|
148
|
+
const homeItem = props.items.find((item) => {
|
|
149
|
+
return item.title === "Home";
|
|
150
|
+
});
|
|
151
|
+
const otherNavItems = props.items.filter((item) => {
|
|
152
|
+
return item.title !== "Home";
|
|
153
|
+
});
|
|
154
|
+
return (React.createElement("nav", { className: props.rightElement ? `flex justify-between items-center` : "" },
|
|
123
155
|
React.createElement("div", { "data-testid": "nav-children", className: className },
|
|
124
|
-
|
|
156
|
+
React.createElement("div", { className: "flex items-center" },
|
|
157
|
+
homeItem && (React.createElement(NavBarItem, { key: homeItem.id, id: homeItem.id, title: homeItem.title, icon: homeItem.icon, activeRoute: homeItem.activeRoute, route: homeItem.route, exact: true })),
|
|
158
|
+
activeMoreItem && (React.createElement(React.Fragment, null,
|
|
159
|
+
React.createElement("span", { className: "text-gray-400 mx-1" }, "/"),
|
|
160
|
+
React.createElement("div", { onMouseOver: showMoreMenu, onMouseLeave: hideMoreMenu, className: "relative" },
|
|
161
|
+
React.createElement("button", { onClick: showMoreMenu, onMouseOver: showMoreMenu, className: "bg-gray-100 text-gray-900 hover:bg-gray-200 rounded-md py-2 px-3 inline-flex items-center text-sm font-medium transition-colors cursor-pointer" },
|
|
162
|
+
React.createElement(Icon, { icon: activeMoreItem.icon, className: "mr-1.5 h-4 w-4", thick: ThickProp.Thick }),
|
|
163
|
+
React.createElement("span", null, activeMoreItem.title),
|
|
164
|
+
React.createElement(Icon, { icon: IconProp.ChevronDown, className: "ml-1.5 h-3 w-3 text-gray-500" })),
|
|
165
|
+
isMoreMenuVisible && (React.createElement(NavBarMenu, { sections: sections, footer: props.moreMenuFooter }))))),
|
|
166
|
+
!activeMoreItem &&
|
|
167
|
+
props.moreMenuItems &&
|
|
168
|
+
props.moreMenuItems.length > 0 && (React.createElement(React.Fragment, null,
|
|
169
|
+
React.createElement("span", { className: "text-gray-400 mx-1" }, "/"),
|
|
170
|
+
React.createElement("div", { onMouseOver: showMoreMenu, onMouseLeave: hideMoreMenu, className: "relative" },
|
|
171
|
+
React.createElement("button", { onClick: showMoreMenu, onMouseOver: showMoreMenu, className: "text-gray-500 hover:bg-gray-50 hover:text-gray-900 rounded-md py-2 px-3 inline-flex items-center text-sm font-medium transition-colors cursor-pointer" },
|
|
172
|
+
React.createElement(Icon, { icon: IconProp.Squares, className: "mr-1.5 h-4 w-4", thick: ThickProp.Thick }),
|
|
173
|
+
React.createElement("span", null, props.moreMenuTitle || "Products"),
|
|
174
|
+
React.createElement(Icon, { icon: IconProp.ChevronDown, className: "ml-1.5 h-3 w-3 text-gray-400" })),
|
|
175
|
+
isMoreMenuVisible && (React.createElement(NavBarMenu, { sections: sections, footer: props.moreMenuFooter })))))),
|
|
176
|
+
otherNavItems.map((item) => {
|
|
125
177
|
var _a;
|
|
126
178
|
return (React.createElement(NavBarItem, { key: item.id, id: item.id, title: item.title, icon: item.icon, activeRoute: item.activeRoute, route: item.route, exact: (_a = item.exact) !== null && _a !== void 0 ? _a : false }));
|
|
127
|
-
}),
|
|
128
|
-
props.moreMenuItems && props.moreMenuItems.length > 0 && (React.createElement(NavBarItem, { title: "More", icon: IconProp.More, onMouseLeave: hideMoreMenu, onMouseOver: showMoreMenu, onClick: showMoreMenu },
|
|
129
|
-
React.createElement("div", { onMouseOver: showMoreMenu, onMouseLeave: hideMoreMenu }, isMoreMenuVisible &&
|
|
130
|
-
(props.moreMenuFooter ? (React.createElement(NavBarMenu, { footer: props.moreMenuFooter }, props.moreMenuItems.map((item) => {
|
|
131
|
-
return (React.createElement(NavBarMenuItem, { key: item.title, title: item.title, description: item.description, route: item.route, icon: item.icon, iconColor: item.iconColor, onClick: forceHideMoreMenu }));
|
|
132
|
-
}))) : (React.createElement(NavBarMenu, null, props.moreMenuItems.map((item) => {
|
|
133
|
-
return (React.createElement(NavBarMenuItem, { key: item.title, title: item.title, description: item.description, route: item.route, icon: item.icon, iconColor: item.iconColor, onClick: forceHideMoreMenu }));
|
|
134
|
-
})))))))),
|
|
179
|
+
})),
|
|
135
180
|
props.rightElement && (React.createElement("div", { className: className },
|
|
136
|
-
React.createElement(NavBarItem, { title: props.rightElement.title, icon: props.rightElement.icon, route: props.rightElement.route, activeRoute: props.rightElement.activeRoute, exact: (
|
|
181
|
+
React.createElement(NavBarItem, { title: props.rightElement.title, icon: props.rightElement.icon, route: props.rightElement.route, activeRoute: props.rightElement.activeRoute, exact: (_d = props.rightElement.exact) !== null && _d !== void 0 ? _d : false })))));
|
|
137
182
|
};
|
|
138
183
|
export default Navbar;
|
|
139
184
|
//# sourceMappingURL=NavBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavBar.js","sourceRoot":"","sources":["../../../../../UI/Components/Navbar/NavBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,QAAQ,EACR,SAAS,GACV,MAAM,OAAO,CAAC;AAGf,OAAO,QAAQ,MAAM,8BAA8B,CAAC;AACpD,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,MAAM,EAAE,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,UAAU,MAAM,wBAAwB,CAAC;AAChD,OAAO,wBAAwB,MAAM,sCAAsC,CAAC;
|
|
1
|
+
{"version":3,"file":"NavBar.js","sourceRoot":"","sources":["../../../../../UI/Components/Navbar/NavBar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,12 +3,44 @@ import Icon from "../Icon/Icon";
|
|
|
3
3
|
import IconProp from "../../../Types/Icon/IconProp";
|
|
4
4
|
import React from "react";
|
|
5
5
|
const NavBarMenu = (props) => {
|
|
6
|
-
|
|
7
|
-
if (
|
|
8
|
-
|
|
6
|
+
// If sections are provided, render categorized menu
|
|
7
|
+
if (props.sections && props.sections.length > 0) {
|
|
8
|
+
// Separate Settings section from other sections
|
|
9
|
+
const mainSections = props.sections.filter((section) => {
|
|
10
|
+
return section.title !== "Settings";
|
|
11
|
+
});
|
|
12
|
+
const settingsSection = props.sections.find((section) => {
|
|
13
|
+
return section.title === "Settings";
|
|
14
|
+
});
|
|
15
|
+
return (React.createElement("div", { className: "absolute left-0 z-10 mt-8 w-screen max-w-5xl transform px-2 sm:px-0" },
|
|
16
|
+
React.createElement("div", { className: "overflow-hidden rounded-2xl shadow-xl ring-1 ring-black ring-opacity-5 bg-white" },
|
|
17
|
+
React.createElement("div", { className: "p-6" },
|
|
18
|
+
React.createElement("div", { className: "flex gap-6" },
|
|
19
|
+
React.createElement("div", { className: "flex-1 grid grid-cols-1 md:grid-cols-3 gap-6" }, mainSections.map((section, index) => {
|
|
20
|
+
return (React.createElement("div", { key: index, className: "space-y-3" },
|
|
21
|
+
React.createElement("h3", { className: "text-xs font-semibold uppercase tracking-wider text-gray-500 px-2.5 text-left" }, section.title),
|
|
22
|
+
React.createElement("div", { className: "space-y-1" }, section.items)));
|
|
23
|
+
})),
|
|
24
|
+
settingsSection && (React.createElement("div", { className: "border-l border-gray-100 pl-6 space-y-3 min-w-[200px]" },
|
|
25
|
+
React.createElement("h3", { className: "text-xs font-semibold uppercase tracking-wider text-gray-500 px-2.5 text-left" }, settingsSection.title),
|
|
26
|
+
React.createElement("div", { className: "space-y-1" }, settingsSection.items))))),
|
|
27
|
+
props.footer && (React.createElement("div", { className: "border-t border-gray-100 bg-gray-50 px-4 py-4" },
|
|
28
|
+
React.createElement(Link, { to: props.footer.link, openInNewTab: true, className: "group flex items-center gap-3 rounded-lg p-2.5 -m-2 transition-colors hover:bg-gray-100" },
|
|
29
|
+
React.createElement("div", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-gray-100 ring-1 ring-gray-200 group-hover:bg-gray-200 group-hover:ring-gray-300 transition-all" },
|
|
30
|
+
React.createElement(Icon, { icon: IconProp.GitHub, className: "h-5 w-5 text-gray-700" })),
|
|
31
|
+
React.createElement("div", { className: "flex-1 min-w-0 text-left" },
|
|
32
|
+
React.createElement("p", { className: "text-sm font-medium text-gray-900" }, props.footer.title),
|
|
33
|
+
React.createElement("p", { className: "text-xs text-gray-500" }, props.footer.description))))))));
|
|
9
34
|
}
|
|
10
|
-
|
|
11
|
-
|
|
35
|
+
// Legacy: render children directly
|
|
36
|
+
let children = [];
|
|
37
|
+
if (props.children) {
|
|
38
|
+
if (!Array.isArray(props.children)) {
|
|
39
|
+
children = [props.children];
|
|
40
|
+
}
|
|
41
|
+
else {
|
|
42
|
+
children = props.children;
|
|
43
|
+
}
|
|
12
44
|
}
|
|
13
45
|
// Calculate number of columns based on items count
|
|
14
46
|
const itemCount = children.length;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavBarMenu.js","sourceRoot":"","sources":["../../../../../UI/Components/Navbar/NavBarMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,cAAc,CAAC;AAChC,OAAO,IAAI,MAAM,cAAc,CAAC;AAChC,OAAO,QAAQ,MAAM,8BAA8B,CAAC;AAEpD,OAAO,KAA0C,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"NavBarMenu.js","sourceRoot":"","sources":["../../../../../UI/Components/Navbar/NavBarMenu.tsx"],"names":[],"mappings":"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"}
|
|
@@ -84,6 +84,18 @@ const NavBarMenuItem = (props) => {
|
|
|
84
84
|
hoverBg: "hover:bg-sky-50",
|
|
85
85
|
hoverRing: "group-hover:ring-sky-300",
|
|
86
86
|
},
|
|
87
|
+
emerald: {
|
|
88
|
+
bg: "bg-emerald-50",
|
|
89
|
+
ring: "ring-emerald-200",
|
|
90
|
+
hoverBg: "hover:bg-emerald-50",
|
|
91
|
+
hoverRing: "group-hover:ring-emerald-300",
|
|
92
|
+
},
|
|
93
|
+
cyan: {
|
|
94
|
+
bg: "bg-cyan-50",
|
|
95
|
+
ring: "ring-cyan-200",
|
|
96
|
+
hoverBg: "hover:bg-cyan-50",
|
|
97
|
+
hoverRing: "group-hover:ring-cyan-300",
|
|
98
|
+
},
|
|
87
99
|
};
|
|
88
100
|
const colors = colorClasses[colorName] || colorClasses["indigo"];
|
|
89
101
|
return (React.createElement("div", { className: "dropdown" },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavBarMenuItem.js","sourceRoot":"","sources":["../../../../../UI/Components/Navbar/NavBarMenuItem.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"NavBarMenuItem.js","sourceRoot":"","sources":["../../../../../UI/Components/Navbar/NavBarMenuItem.tsx"],"names":[],"mappings":"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"}
|