@jameskabz/nextcraft-ui 0.7.3 → 0.7.4
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.
|
@@ -125,7 +125,7 @@ function Sidebar({
|
|
|
125
125
|
item.active ? "bg-[rgb(var(--nc-accent-1)/0.18)] text-[rgb(var(--nc-fg))] shadow-[inset_0_0_0_1px_rgb(var(--nc-accent-1)/0.25)]" : "text-[rgb(var(--nc-fg-muted))] hover:bg-[rgb(var(--nc-surface)/0.1)] hover:text-[rgb(var(--nc-fg))]"
|
|
126
126
|
),
|
|
127
127
|
children: [
|
|
128
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex shrink-0 items-center justify-center transition-all duration-300 ease-in-out", children: typeof item.icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_craft_icon.CraftIcon, { name: item.icon, size: "
|
|
128
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex shrink-0 items-center justify-center transition-all duration-300 ease-in-out", children: typeof item.icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_craft_icon.CraftIcon, { name: item.icon, size: "2xl" }) : item.icon }),
|
|
129
129
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
130
130
|
"span",
|
|
131
131
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/layout/sidebar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport Link from \"next/link\";\n\nimport { CraftIcon } from \"@/components/craft-icon\";\nimport { cn } from \"@/utils/cn\";\n\nexport type SidebarItem = {\n label: React.ReactNode;\n href?: string;\n icon?: React.ReactNode | string;\n active?: boolean;\n};\n\nexport type SidebarProps = React.HTMLAttributes<HTMLElement> & {\n title?: React.ReactNode;\n items: SidebarItem[];\n footer?: React.ReactNode;\n hoverExpand?: boolean;\n expanded?: boolean;\n onExpandedChange?: (expanded: boolean) => void;\n defaultExpanded?: boolean;\n collapsedWidth?: string;\n expandedWidth?: string;\n};\n\nexport function Sidebar({\n className,\n title,\n items,\n footer,\n hoverExpand = true,\n expanded,\n onExpandedChange,\n defaultExpanded = false,\n collapsedWidth = \"72px\",\n expandedWidth = \"224px\",\n ...props\n}: SidebarProps) {\n const [internalExpanded, setInternalExpanded] = React.useState(defaultExpanded);\n const isExpanded = expanded ?? internalExpanded;\n\n const toggleSidebar = () => {\n const next = !isExpanded;\n if (expanded === undefined) setInternalExpanded(next);\n onExpandedChange?.(next);\n };\n\n return (\n <aside\n className={cn(\n \"group flex h-full flex-col gap-4 rounded-2xl border border-[rgb(var(--nc-border)/0.2)] bg-[rgb(var(--nc-surface)/0.04)] p-3 text-[rgb(var(--nc-fg))] backdrop-blur-xl transition-all duration-300 ease-in-out\",\n \"w-(--nc-sidebar-width)\",\n hoverExpand && !isExpanded ? \"hover:w-(--nc-sidebar-expanded)\" : \"\",\n hoverExpand\n ? \"fixed left-0 top-0 z-50 shadow-[0_16px_40px_rgba(0,0,0,0.18)]\"\n : \"relative\",\n className\n )}\n style={\n {\n \"--nc-sidebar-width\": isExpanded ? expandedWidth : collapsedWidth,\n \"--nc-sidebar-expanded\": expandedWidth,\n } as React.CSSProperties\n }\n {...props}\n >\n {title && (\n <div className=\"flex items-center gap-3 px-1\">\n <div className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-[rgb(var(--nc-accent-1)/0.18)] text-2xl font-semibold\">\n {typeof title === \"string\" ? title.slice(0, 1) : title}\n </div>\n <span\n className={cn(\n \"truncate text-sm font-semibold transition-all duration-300 ease-in-out\",\n hoverExpand && !isExpanded\n ? \"max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100\"\n : \"max-w-40 opacity-100\"\n )}\n >\n {title}\n </span>\n </div>\n )}\n\n {hoverExpand && (\n <button\n onClick={toggleSidebar}\n className={cn(\n \"flex items-center rounded-xl text-sm transition-all duration-300 ease-in-out\",\n !isExpanded\n ? \"justify-center px-0.5 py-2 group-hover:justify-start group-hover:gap-3 group-hover:px-0.5\"\n : \"justify-start gap-3 px-0.5 py-2\",\n \"hover:bg-[rgb(var(--nc-surface)/0.1)]\",\n isExpanded\n ? \"text-[rgb(var(--nc-fg))] bg-[rgb(var(--nc-surface)/0.08)]\"\n : \"text-[rgb(var(--nc-fg-muted))]\"\n )}\n aria-label={isExpanded ? \"Collapse sidebar\" : \"Expand sidebar\"}\n aria-expanded={isExpanded}\n >\n <div className=\"flex shrink-0 items-center justify-center transition-all duration-300 ease-in-out\">\n <CraftIcon name=\"bars\" size=\"4xl\" />\n </div>\n <span\n className={cn(\n \"truncate whitespace-nowrap transition-all duration-300 ease-in-out\",\n !isExpanded\n ? \"max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100\"\n : \"max-w-40 opacity-100\"\n )}\n >\n {isExpanded ? \"Collapse\" : \"Expand\"}\n </span>\n </button>\n )}\n\n <nav className=\"flex flex-col gap-2.5\">\n {items.map((item, index) => (\n <Link\n key={`${item.label}-${index}`}\n href={item.href ?? \"#\"}\n className={cn(\n \"flex items-center rounded-xl text-sm transition-all duration-300 ease-in-out\",\n !isExpanded\n ? \"justify-center px-2 py-2 group-hover:justify-start group-hover:gap-3 group-hover:px-3\"\n : \"justify-start gap-3 px-3 py-2\",\n item.active\n ? \"bg-[rgb(var(--nc-accent-1)/0.18)] text-[rgb(var(--nc-fg))] shadow-[inset_0_0_0_1px_rgb(var(--nc-accent-1)/0.25)]\"\n : \"text-[rgb(var(--nc-fg-muted))] hover:bg-[rgb(var(--nc-surface)/0.1)] hover:text-[rgb(var(--nc-fg))]\"\n )}\n >\n <div className=\"flex shrink-0 items-center justify-center transition-all duration-300 ease-in-out\">\n {typeof item.icon === \"string\" ? (\n <CraftIcon name={item.icon} size=\"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/layout/sidebar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport Link from \"next/link\";\n\nimport { CraftIcon } from \"@/components/craft-icon\";\nimport { cn } from \"@/utils/cn\";\n\nexport type SidebarItem = {\n label: React.ReactNode;\n href?: string;\n icon?: React.ReactNode | string;\n active?: boolean;\n};\n\nexport type SidebarProps = React.HTMLAttributes<HTMLElement> & {\n title?: React.ReactNode;\n items: SidebarItem[];\n footer?: React.ReactNode;\n hoverExpand?: boolean;\n expanded?: boolean;\n onExpandedChange?: (expanded: boolean) => void;\n defaultExpanded?: boolean;\n collapsedWidth?: string;\n expandedWidth?: string;\n};\n\nexport function Sidebar({\n className,\n title,\n items,\n footer,\n hoverExpand = true,\n expanded,\n onExpandedChange,\n defaultExpanded = false,\n collapsedWidth = \"72px\",\n expandedWidth = \"224px\",\n ...props\n}: SidebarProps) {\n const [internalExpanded, setInternalExpanded] = React.useState(defaultExpanded);\n const isExpanded = expanded ?? internalExpanded;\n\n const toggleSidebar = () => {\n const next = !isExpanded;\n if (expanded === undefined) setInternalExpanded(next);\n onExpandedChange?.(next);\n };\n\n return (\n <aside\n className={cn(\n \"group flex h-full flex-col gap-4 rounded-2xl border border-[rgb(var(--nc-border)/0.2)] bg-[rgb(var(--nc-surface)/0.04)] p-3 text-[rgb(var(--nc-fg))] backdrop-blur-xl transition-all duration-300 ease-in-out\",\n \"w-(--nc-sidebar-width)\",\n hoverExpand && !isExpanded ? \"hover:w-(--nc-sidebar-expanded)\" : \"\",\n hoverExpand\n ? \"fixed left-0 top-0 z-50 shadow-[0_16px_40px_rgba(0,0,0,0.18)]\"\n : \"relative\",\n className\n )}\n style={\n {\n \"--nc-sidebar-width\": isExpanded ? expandedWidth : collapsedWidth,\n \"--nc-sidebar-expanded\": expandedWidth,\n } as React.CSSProperties\n }\n {...props}\n >\n {title && (\n <div className=\"flex items-center gap-3 px-1\">\n <div className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-[rgb(var(--nc-accent-1)/0.18)] text-2xl font-semibold\">\n {typeof title === \"string\" ? title.slice(0, 1) : title}\n </div>\n <span\n className={cn(\n \"truncate text-sm font-semibold transition-all duration-300 ease-in-out\",\n hoverExpand && !isExpanded\n ? \"max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100\"\n : \"max-w-40 opacity-100\"\n )}\n >\n {title}\n </span>\n </div>\n )}\n\n {hoverExpand && (\n <button\n onClick={toggleSidebar}\n className={cn(\n \"flex items-center rounded-xl text-sm transition-all duration-300 ease-in-out\",\n !isExpanded\n ? \"justify-center px-0.5 py-2 group-hover:justify-start group-hover:gap-3 group-hover:px-0.5\"\n : \"justify-start gap-3 px-0.5 py-2\",\n \"hover:bg-[rgb(var(--nc-surface)/0.1)]\",\n isExpanded\n ? \"text-[rgb(var(--nc-fg))] bg-[rgb(var(--nc-surface)/0.08)]\"\n : \"text-[rgb(var(--nc-fg-muted))]\"\n )}\n aria-label={isExpanded ? \"Collapse sidebar\" : \"Expand sidebar\"}\n aria-expanded={isExpanded}\n >\n <div className=\"flex shrink-0 items-center justify-center transition-all duration-300 ease-in-out\">\n <CraftIcon name=\"bars\" size=\"4xl\" />\n </div>\n <span\n className={cn(\n \"truncate whitespace-nowrap transition-all duration-300 ease-in-out\",\n !isExpanded\n ? \"max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100\"\n : \"max-w-40 opacity-100\"\n )}\n >\n {isExpanded ? \"Collapse\" : \"Expand\"}\n </span>\n </button>\n )}\n\n <nav className=\"flex flex-col gap-2.5\">\n {items.map((item, index) => (\n <Link\n key={`${item.label}-${index}`}\n href={item.href ?? \"#\"}\n className={cn(\n \"flex items-center rounded-xl text-sm transition-all duration-300 ease-in-out\",\n !isExpanded\n ? \"justify-center px-2 py-2 group-hover:justify-start group-hover:gap-3 group-hover:px-3\"\n : \"justify-start gap-3 px-3 py-2\",\n item.active\n ? \"bg-[rgb(var(--nc-accent-1)/0.18)] text-[rgb(var(--nc-fg))] shadow-[inset_0_0_0_1px_rgb(var(--nc-accent-1)/0.25)]\"\n : \"text-[rgb(var(--nc-fg-muted))] hover:bg-[rgb(var(--nc-surface)/0.1)] hover:text-[rgb(var(--nc-fg))]\"\n )}\n >\n <div className=\"flex shrink-0 items-center justify-center transition-all duration-300 ease-in-out\">\n {typeof item.icon === \"string\" ? (\n <CraftIcon name={item.icon} size=\"2xl\" /> //change icon size\n ) : (\n item.icon\n )}\n </div>\n <span\n className={cn(\n \"truncate whitespace-nowrap transition-all duration-300 ease-in-out\",\n !isExpanded\n ? \"max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100\"\n : \"max-w-40 opacity-100\"\n )}\n >\n {item.label}\n </span>\n </Link>\n ))}\n </nav>\n\n {footer && (\n <div\n className={cn(\n \"mt-auto px-2 pt-3 text-xs text-[rgb(var(--nc-fg-muted))] transition-all duration-300 ease-in-out\",\n !isExpanded\n ? \"max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100\"\n : \"max-w-40 opacity-100\"\n )}\n >\n {footer}\n </div>\n )}\n </aside>\n );\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqEQ;AAnER,YAAuB;AACvB,kBAAiB;AAEjB,wBAA0B;AAC1B,gBAAmB;AAqBZ,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,GAAG;AACL,GAAiB;AACf,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,MAAM,SAAS,eAAe;AAC9E,QAAM,aAAa,8BAAY;AAE/B,QAAM,gBAAgB,MAAM;AAC1B,UAAM,OAAO,CAAC;AACd,QAAI,aAAa,OAAW,qBAAoB,IAAI;AACpD,yDAAmB;AAAA,EACrB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,eAAe,CAAC,aAAa,oCAAoC;AAAA,QACjE,cACI,kEACA;AAAA,QACJ;AAAA,MACF;AAAA,MACA,OACE;AAAA,QACE,sBAAsB,aAAa,gBAAgB;AAAA,QACnD,yBAAyB;AAAA,MAC3B;AAAA,MAED,GAAG;AAAA,MAEH;AAAA,iBACC,6CAAC,SAAI,WAAU,gCACb;AAAA,sDAAC,SAAI,WAAU,yHACZ,iBAAO,UAAU,WAAW,MAAM,MAAM,GAAG,CAAC,IAAI,OACnD;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,gBACT;AAAA,gBACA,eAAe,CAAC,aACZ,mEACA;AAAA,cACN;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,WACF;AAAA,QAGD,eACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,eAAW;AAAA,cACT;AAAA,cACA,CAAC,aACG,8FACA;AAAA,cACJ;AAAA,cACA,aACI,8DACA;AAAA,YACN;AAAA,YACA,cAAY,aAAa,qBAAqB;AAAA,YAC9C,iBAAe;AAAA,YAEf;AAAA,0DAAC,SAAI,WAAU,qFACb,sDAAC,+BAAU,MAAK,QAAO,MAAK,OAAM,GACpC;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAW;AAAA,oBACT;AAAA,oBACA,CAAC,aACG,mEACA;AAAA,kBACN;AAAA,kBAEC,uBAAa,aAAa;AAAA;AAAA,cAC7B;AAAA;AAAA;AAAA,QACF;AAAA,QAGF,4CAAC,SAAI,WAAU,yBACZ,gBAAM,IAAI,CAAC,MAAM,UAAO;AAvHjC;AAwHU;AAAA,YAAC,YAAAA;AAAA,YAAA;AAAA,cAEC,OAAM,UAAK,SAAL,YAAa;AAAA,cACnB,eAAW;AAAA,gBACT;AAAA,gBACA,CAAC,aACG,0FACA;AAAA,gBACJ,KAAK,SACD,qHACA;AAAA,cACN;AAAA,cAEA;AAAA,4DAAC,SAAI,WAAU,qFACZ,iBAAO,KAAK,SAAS,WACpB,4CAAC,+BAAU,MAAM,KAAK,MAAM,MAAK,OAAM,IAEvC,KAAK,MAET;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,eAAW;AAAA,sBACT;AAAA,sBACA,CAAC,aACG,mEACA;AAAA,oBACN;AAAA,oBAEC,eAAK;AAAA;AAAA,gBACR;AAAA;AAAA;AAAA,YA5BK,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,UA6B7B;AAAA,SACD,GACH;AAAA,QAEC,UACC;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,cACT;AAAA,cACA,CAAC,aACG,mEACA;AAAA,YACN;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":["Link"]}
|
|
@@ -92,7 +92,7 @@ function Sidebar({
|
|
|
92
92
|
item.active ? "bg-[rgb(var(--nc-accent-1)/0.18)] text-[rgb(var(--nc-fg))] shadow-[inset_0_0_0_1px_rgb(var(--nc-accent-1)/0.25)]" : "text-[rgb(var(--nc-fg-muted))] hover:bg-[rgb(var(--nc-surface)/0.1)] hover:text-[rgb(var(--nc-fg))]"
|
|
93
93
|
),
|
|
94
94
|
children: [
|
|
95
|
-
/* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center justify-center transition-all duration-300 ease-in-out", children: typeof item.icon === "string" ? /* @__PURE__ */ jsx(CraftIcon, { name: item.icon, size: "
|
|
95
|
+
/* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center justify-center transition-all duration-300 ease-in-out", children: typeof item.icon === "string" ? /* @__PURE__ */ jsx(CraftIcon, { name: item.icon, size: "2xl" }) : item.icon }),
|
|
96
96
|
/* @__PURE__ */ jsx(
|
|
97
97
|
"span",
|
|
98
98
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/layout/sidebar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport Link from \"next/link\";\n\nimport { CraftIcon } from \"@/components/craft-icon\";\nimport { cn } from \"@/utils/cn\";\n\nexport type SidebarItem = {\n label: React.ReactNode;\n href?: string;\n icon?: React.ReactNode | string;\n active?: boolean;\n};\n\nexport type SidebarProps = React.HTMLAttributes<HTMLElement> & {\n title?: React.ReactNode;\n items: SidebarItem[];\n footer?: React.ReactNode;\n hoverExpand?: boolean;\n expanded?: boolean;\n onExpandedChange?: (expanded: boolean) => void;\n defaultExpanded?: boolean;\n collapsedWidth?: string;\n expandedWidth?: string;\n};\n\nexport function Sidebar({\n className,\n title,\n items,\n footer,\n hoverExpand = true,\n expanded,\n onExpandedChange,\n defaultExpanded = false,\n collapsedWidth = \"72px\",\n expandedWidth = \"224px\",\n ...props\n}: SidebarProps) {\n const [internalExpanded, setInternalExpanded] = React.useState(defaultExpanded);\n const isExpanded = expanded ?? internalExpanded;\n\n const toggleSidebar = () => {\n const next = !isExpanded;\n if (expanded === undefined) setInternalExpanded(next);\n onExpandedChange?.(next);\n };\n\n return (\n <aside\n className={cn(\n \"group flex h-full flex-col gap-4 rounded-2xl border border-[rgb(var(--nc-border)/0.2)] bg-[rgb(var(--nc-surface)/0.04)] p-3 text-[rgb(var(--nc-fg))] backdrop-blur-xl transition-all duration-300 ease-in-out\",\n \"w-(--nc-sidebar-width)\",\n hoverExpand && !isExpanded ? \"hover:w-(--nc-sidebar-expanded)\" : \"\",\n hoverExpand\n ? \"fixed left-0 top-0 z-50 shadow-[0_16px_40px_rgba(0,0,0,0.18)]\"\n : \"relative\",\n className\n )}\n style={\n {\n \"--nc-sidebar-width\": isExpanded ? expandedWidth : collapsedWidth,\n \"--nc-sidebar-expanded\": expandedWidth,\n } as React.CSSProperties\n }\n {...props}\n >\n {title && (\n <div className=\"flex items-center gap-3 px-1\">\n <div className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-[rgb(var(--nc-accent-1)/0.18)] text-2xl font-semibold\">\n {typeof title === \"string\" ? title.slice(0, 1) : title}\n </div>\n <span\n className={cn(\n \"truncate text-sm font-semibold transition-all duration-300 ease-in-out\",\n hoverExpand && !isExpanded\n ? \"max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100\"\n : \"max-w-40 opacity-100\"\n )}\n >\n {title}\n </span>\n </div>\n )}\n\n {hoverExpand && (\n <button\n onClick={toggleSidebar}\n className={cn(\n \"flex items-center rounded-xl text-sm transition-all duration-300 ease-in-out\",\n !isExpanded\n ? \"justify-center px-0.5 py-2 group-hover:justify-start group-hover:gap-3 group-hover:px-0.5\"\n : \"justify-start gap-3 px-0.5 py-2\",\n \"hover:bg-[rgb(var(--nc-surface)/0.1)]\",\n isExpanded\n ? \"text-[rgb(var(--nc-fg))] bg-[rgb(var(--nc-surface)/0.08)]\"\n : \"text-[rgb(var(--nc-fg-muted))]\"\n )}\n aria-label={isExpanded ? \"Collapse sidebar\" : \"Expand sidebar\"}\n aria-expanded={isExpanded}\n >\n <div className=\"flex shrink-0 items-center justify-center transition-all duration-300 ease-in-out\">\n <CraftIcon name=\"bars\" size=\"4xl\" />\n </div>\n <span\n className={cn(\n \"truncate whitespace-nowrap transition-all duration-300 ease-in-out\",\n !isExpanded\n ? \"max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100\"\n : \"max-w-40 opacity-100\"\n )}\n >\n {isExpanded ? \"Collapse\" : \"Expand\"}\n </span>\n </button>\n )}\n\n <nav className=\"flex flex-col gap-2.5\">\n {items.map((item, index) => (\n <Link\n key={`${item.label}-${index}`}\n href={item.href ?? \"#\"}\n className={cn(\n \"flex items-center rounded-xl text-sm transition-all duration-300 ease-in-out\",\n !isExpanded\n ? \"justify-center px-2 py-2 group-hover:justify-start group-hover:gap-3 group-hover:px-3\"\n : \"justify-start gap-3 px-3 py-2\",\n item.active\n ? \"bg-[rgb(var(--nc-accent-1)/0.18)] text-[rgb(var(--nc-fg))] shadow-[inset_0_0_0_1px_rgb(var(--nc-accent-1)/0.25)]\"\n : \"text-[rgb(var(--nc-fg-muted))] hover:bg-[rgb(var(--nc-surface)/0.1)] hover:text-[rgb(var(--nc-fg))]\"\n )}\n >\n <div className=\"flex shrink-0 items-center justify-center transition-all duration-300 ease-in-out\">\n {typeof item.icon === \"string\" ? (\n <CraftIcon name={item.icon} size=\"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/layout/sidebar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport Link from \"next/link\";\n\nimport { CraftIcon } from \"@/components/craft-icon\";\nimport { cn } from \"@/utils/cn\";\n\nexport type SidebarItem = {\n label: React.ReactNode;\n href?: string;\n icon?: React.ReactNode | string;\n active?: boolean;\n};\n\nexport type SidebarProps = React.HTMLAttributes<HTMLElement> & {\n title?: React.ReactNode;\n items: SidebarItem[];\n footer?: React.ReactNode;\n hoverExpand?: boolean;\n expanded?: boolean;\n onExpandedChange?: (expanded: boolean) => void;\n defaultExpanded?: boolean;\n collapsedWidth?: string;\n expandedWidth?: string;\n};\n\nexport function Sidebar({\n className,\n title,\n items,\n footer,\n hoverExpand = true,\n expanded,\n onExpandedChange,\n defaultExpanded = false,\n collapsedWidth = \"72px\",\n expandedWidth = \"224px\",\n ...props\n}: SidebarProps) {\n const [internalExpanded, setInternalExpanded] = React.useState(defaultExpanded);\n const isExpanded = expanded ?? internalExpanded;\n\n const toggleSidebar = () => {\n const next = !isExpanded;\n if (expanded === undefined) setInternalExpanded(next);\n onExpandedChange?.(next);\n };\n\n return (\n <aside\n className={cn(\n \"group flex h-full flex-col gap-4 rounded-2xl border border-[rgb(var(--nc-border)/0.2)] bg-[rgb(var(--nc-surface)/0.04)] p-3 text-[rgb(var(--nc-fg))] backdrop-blur-xl transition-all duration-300 ease-in-out\",\n \"w-(--nc-sidebar-width)\",\n hoverExpand && !isExpanded ? \"hover:w-(--nc-sidebar-expanded)\" : \"\",\n hoverExpand\n ? \"fixed left-0 top-0 z-50 shadow-[0_16px_40px_rgba(0,0,0,0.18)]\"\n : \"relative\",\n className\n )}\n style={\n {\n \"--nc-sidebar-width\": isExpanded ? expandedWidth : collapsedWidth,\n \"--nc-sidebar-expanded\": expandedWidth,\n } as React.CSSProperties\n }\n {...props}\n >\n {title && (\n <div className=\"flex items-center gap-3 px-1\">\n <div className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-[rgb(var(--nc-accent-1)/0.18)] text-2xl font-semibold\">\n {typeof title === \"string\" ? title.slice(0, 1) : title}\n </div>\n <span\n className={cn(\n \"truncate text-sm font-semibold transition-all duration-300 ease-in-out\",\n hoverExpand && !isExpanded\n ? \"max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100\"\n : \"max-w-40 opacity-100\"\n )}\n >\n {title}\n </span>\n </div>\n )}\n\n {hoverExpand && (\n <button\n onClick={toggleSidebar}\n className={cn(\n \"flex items-center rounded-xl text-sm transition-all duration-300 ease-in-out\",\n !isExpanded\n ? \"justify-center px-0.5 py-2 group-hover:justify-start group-hover:gap-3 group-hover:px-0.5\"\n : \"justify-start gap-3 px-0.5 py-2\",\n \"hover:bg-[rgb(var(--nc-surface)/0.1)]\",\n isExpanded\n ? \"text-[rgb(var(--nc-fg))] bg-[rgb(var(--nc-surface)/0.08)]\"\n : \"text-[rgb(var(--nc-fg-muted))]\"\n )}\n aria-label={isExpanded ? \"Collapse sidebar\" : \"Expand sidebar\"}\n aria-expanded={isExpanded}\n >\n <div className=\"flex shrink-0 items-center justify-center transition-all duration-300 ease-in-out\">\n <CraftIcon name=\"bars\" size=\"4xl\" />\n </div>\n <span\n className={cn(\n \"truncate whitespace-nowrap transition-all duration-300 ease-in-out\",\n !isExpanded\n ? \"max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100\"\n : \"max-w-40 opacity-100\"\n )}\n >\n {isExpanded ? \"Collapse\" : \"Expand\"}\n </span>\n </button>\n )}\n\n <nav className=\"flex flex-col gap-2.5\">\n {items.map((item, index) => (\n <Link\n key={`${item.label}-${index}`}\n href={item.href ?? \"#\"}\n className={cn(\n \"flex items-center rounded-xl text-sm transition-all duration-300 ease-in-out\",\n !isExpanded\n ? \"justify-center px-2 py-2 group-hover:justify-start group-hover:gap-3 group-hover:px-3\"\n : \"justify-start gap-3 px-3 py-2\",\n item.active\n ? \"bg-[rgb(var(--nc-accent-1)/0.18)] text-[rgb(var(--nc-fg))] shadow-[inset_0_0_0_1px_rgb(var(--nc-accent-1)/0.25)]\"\n : \"text-[rgb(var(--nc-fg-muted))] hover:bg-[rgb(var(--nc-surface)/0.1)] hover:text-[rgb(var(--nc-fg))]\"\n )}\n >\n <div className=\"flex shrink-0 items-center justify-center transition-all duration-300 ease-in-out\">\n {typeof item.icon === \"string\" ? (\n <CraftIcon name={item.icon} size=\"2xl\" /> //change icon size\n ) : (\n item.icon\n )}\n </div>\n <span\n className={cn(\n \"truncate whitespace-nowrap transition-all duration-300 ease-in-out\",\n !isExpanded\n ? \"max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100\"\n : \"max-w-40 opacity-100\"\n )}\n >\n {item.label}\n </span>\n </Link>\n ))}\n </nav>\n\n {footer && (\n <div\n className={cn(\n \"mt-auto px-2 pt-3 text-xs text-[rgb(var(--nc-fg-muted))] transition-all duration-300 ease-in-out\",\n !isExpanded\n ? \"max-w-0 opacity-0 group-hover:max-w-40 group-hover:opacity-100\"\n : \"max-w-40 opacity-100\"\n )}\n >\n {footer}\n </div>\n )}\n </aside>\n );\n}"],"mappings":";AAqEQ,SACE,KADF;AAnER,YAAY,WAAW;AACvB,OAAO,UAAU;AAEjB,SAAS,iBAAiB;AAC1B,SAAS,UAAU;AAqBZ,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,GAAG;AACL,GAAiB;AACf,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,MAAM,SAAS,eAAe;AAC9E,QAAM,aAAa,8BAAY;AAE/B,QAAM,gBAAgB,MAAM;AAC1B,UAAM,OAAO,CAAC;AACd,QAAI,aAAa,OAAW,qBAAoB,IAAI;AACpD,yDAAmB;AAAA,EACrB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,eAAe,CAAC,aAAa,oCAAoC;AAAA,QACjE,cACI,kEACA;AAAA,QACJ;AAAA,MACF;AAAA,MACA,OACE;AAAA,QACE,sBAAsB,aAAa,gBAAgB;AAAA,QACnD,yBAAyB;AAAA,MAC3B;AAAA,MAED,GAAG;AAAA,MAEH;AAAA,iBACC,qBAAC,SAAI,WAAU,gCACb;AAAA,8BAAC,SAAI,WAAU,yHACZ,iBAAO,UAAU,WAAW,MAAM,MAAM,GAAG,CAAC,IAAI,OACnD;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,eAAe,CAAC,aACZ,mEACA;AAAA,cACN;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,WACF;AAAA,QAGD,eACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,WAAW;AAAA,cACT;AAAA,cACA,CAAC,aACG,8FACA;AAAA,cACJ;AAAA,cACA,aACI,8DACA;AAAA,YACN;AAAA,YACA,cAAY,aAAa,qBAAqB;AAAA,YAC9C,iBAAe;AAAA,YAEf;AAAA,kCAAC,SAAI,WAAU,qFACb,8BAAC,aAAU,MAAK,QAAO,MAAK,OAAM,GACpC;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA,oBACA,CAAC,aACG,mEACA;AAAA,kBACN;AAAA,kBAEC,uBAAa,aAAa;AAAA;AAAA,cAC7B;AAAA;AAAA;AAAA,QACF;AAAA,QAGF,oBAAC,SAAI,WAAU,yBACZ,gBAAM,IAAI,CAAC,MAAM,UAAO;AAvHjC;AAwHU;AAAA,YAAC;AAAA;AAAA,cAEC,OAAM,UAAK,SAAL,YAAa;AAAA,cACnB,WAAW;AAAA,gBACT;AAAA,gBACA,CAAC,aACG,0FACA;AAAA,gBACJ,KAAK,SACD,qHACA;AAAA,cACN;AAAA,cAEA;AAAA,oCAAC,SAAI,WAAU,qFACZ,iBAAO,KAAK,SAAS,WACpB,oBAAC,aAAU,MAAM,KAAK,MAAM,MAAK,OAAM,IAEvC,KAAK,MAET;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAW;AAAA,sBACT;AAAA,sBACA,CAAC,aACG,mEACA;AAAA,oBACN;AAAA,oBAEC,eAAK;AAAA;AAAA,gBACR;AAAA;AAAA;AAAA,YA5BK,GAAG,KAAK,KAAK,IAAI,KAAK;AAAA,UA6B7B;AAAA,SACD,GACH;AAAA,QAEC,UACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,CAAC,aACG,mEACA;AAAA,YACN;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
|