laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
107 lines (106 loc) • 4.28 kB
JavaScript
"use client";
import { jsxs as r, jsx as t, Fragment as I } from "react/jsx-runtime";
import * as v from "react";
import { Sidebar as y, SidebarHeader as z, SidebarContent as B, SidebarGroup as x, SidebarGroupLabel as A, SidebarGroupContent as N, SidebarMenu as w, SidebarMenuItem as C, SidebarMenuSub as E, SidebarMenuSubItem as M, SidebarRail as F, SidebarMenuButton as j, SidebarMenuSubButton as D } from "./sidebar.js";
import { Icon as h } from "./icon.js";
function O({
navigation: u,
navigationFooter: G,
versions: H,
defaultVersion: V,
headerContent: m,
footerContent: R,
showRail: g = !0,
linkComponent: d,
linkProps: b = {},
...k
}) {
const [o, f] = v.useState({});
v.useEffect(() => {
const e = { ...o };
u.forEach((n) => {
n.items.some(
(i) => i.isActive || i.subItems && i.subItems.some((c) => c.isActive)
) && (e[n.title] = !0);
}), f(e);
}, [u]);
const S = (e, n, s) => {
const i = e.subItems && e.subItems.length > 0, c = /* @__PURE__ */ r(I, { children: [
/* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
e.iconName && /* @__PURE__ */ t(h, { name: e.iconName, size: "sm" }),
/* @__PURE__ */ t("span", { children: e.title })
] }),
i && /* @__PURE__ */ t("div", { className: "text-d-muted-foreground", children: n ? /* @__PURE__ */ t(h, { name: "ChevronDown", className: "h-4 w-4" }) : /* @__PURE__ */ t(h, { name: "ChevronRight", className: "h-4 w-4" }) })
] });
return d ? /* @__PURE__ */ t(j, { isActive: e.isActive, children: /* @__PURE__ */ t(
d,
{
href: i ? "#" : e.url,
className: "flex w-full items-center justify-between gap-2",
onClick: i ? s : void 0,
...b,
children: c
}
) }) : /* @__PURE__ */ t(j, { isActive: e.isActive, children: /* @__PURE__ */ t(
"a",
{
href: i ? "#" : e.url,
className: "flex w-full items-center justify-between gap-2",
onClick: i ? s : void 0,
children: c
}
) });
}, p = (e) => {
const n = /* @__PURE__ */ r(I, { children: [
e.iconName && /* @__PURE__ */ t(h, { name: e.iconName, size: "xs" }),
/* @__PURE__ */ t("span", { children: e.title })
] });
return d ? /* @__PURE__ */ t(D, { isActive: e.isActive, asChild: !0, children: /* @__PURE__ */ t(
d,
{
href: e.url,
className: "flex w-full items-center gap-2",
...b,
children: n
}
) }) : /* @__PURE__ */ t(D, { isActive: e.isActive, asChild: !0, children: /* @__PURE__ */ t("a", { href: e.url, className: "flex w-full items-center gap-2", children: n }) });
};
return /* @__PURE__ */ r(y, { ...k, children: [
m && /* @__PURE__ */ t(z, { children: m }),
/* @__PURE__ */ t(B, { children: u.map((e) => /* @__PURE__ */ r(x, { children: [
e.title && /* @__PURE__ */ t(A, { children: e.title }),
/* @__PURE__ */ t(N, { children: /* @__PURE__ */ t(w, { children: e.items.map((n) => {
const s = n.subItems && n.subItems.length > 0, i = o[n.title] || !1;
return /* @__PURE__ */ r(C, { children: [
S(n, i, (l) => {
s && (l.preventDefault(), f((a) => ({
...a,
[n.title]: !a[n.title]
})));
}),
s && i && /* @__PURE__ */ t(E, { children: n.subItems.map((l) => /* @__PURE__ */ t(M, { children: p(l) }, l.title)) })
] }, n.title);
}) }) })
] }, e.title)) }),
G?.map((e) => /* @__PURE__ */ r(x, { children: [
e.title && /* @__PURE__ */ t(A, { children: e.title }),
/* @__PURE__ */ t(N, { children: /* @__PURE__ */ t(w, { children: e.items.map((n) => {
const s = n.subItems && n.subItems.length > 0, i = o[n.title] || !1;
return /* @__PURE__ */ r(C, { children: [
S(n, i, (l) => {
s && (l.preventDefault(), f((a) => ({
...a,
[n.title]: !a[n.title]
})));
}),
s && i && /* @__PURE__ */ t(E, { children: n.subItems.map((l) => /* @__PURE__ */ t(M, { children: p(l) }, l.title)) })
] }, n.title);
}) }) })
] }, e.title)),
R,
g && /* @__PURE__ */ t(F, {})
] });
}
export {
O as AppSidebar
};