@skalfa/skalfa-component 1.0.11 → 1.0.12
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.
|
@@ -64,7 +64,7 @@ function SidebarComponent({ id, head, footer, items, basePath, className = "", }
|
|
|
64
64
|
(0, react_1.useEffect)(() => {
|
|
65
65
|
setToggle(`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`, false);
|
|
66
66
|
}, [pathName]);
|
|
67
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("sidebar-backdrop", toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "scale-100 lg:scale-0" : "scale-0", (0, _utils_1.pcn)(className, "backdrop")), onClick: () => setToggle(`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`) }), (0, jsx_runtime_1.jsxs)("aside", { className: (0, _utils_1.cn)("sidebar-base scroll-sm", toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "w-full sm:w-[280px]" : "w-0 sm:w-14 lg:w-[280px]", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsx)("div", { className: toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "block" : "hidden lg:block", children: head }), (0, jsx_runtime_1.jsx)("div", { className: toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "hidden" : "flex justify-center pt-4 h-full lg:hidden", onClick: () => setToggle(`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`), children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/bars" }) }), (0, jsx_runtime_1.jsx)("nav", { className: (0, _utils_1.cn)("flex flex-col flex-1 overflow-hidden", toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "w-full" : "w-0 lg:w-full"), children: items?.map((menu_head, menu_head_key) => {
|
|
67
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("sidebar-backdrop", toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "scale-100 lg:scale-0" : "scale-0", (0, _utils_1.pcn)(className, "backdrop")), onClick: () => setToggle(`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`) }), (0, jsx_runtime_1.jsxs)("aside", { className: (0, _utils_1.cn)("sidebar-base scroll-sm", toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "w-full sm:w-[280px]" : "w-0 sm:w-14 lg:w-[280px]", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsx)("div", { className: toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "block" : "hidden lg:block", children: head }), (0, jsx_runtime_1.jsx)("div", { className: toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "hidden" : "flex justify-center pt-4 h-full lg:hidden", onClick: () => setToggle(`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`), children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/bars" }) }), (0, jsx_runtime_1.jsx)("nav", { className: (0, _utils_1.cn)("flex flex-col flex-1 overflow-y-auto overflow-x-hidden", toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "w-full" : "w-0 lg:w-full"), children: items?.map((menu_head, menu_head_key) => {
|
|
68
68
|
return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("sidebar-head-item", menu_head?.collapse && "cursor-pointer", (0, _utils_1.pcn)(className, "head-item"), menu_head?.className), onClick: () => setShow(String(menu_head_key)), children: [menu_head?.label, menu_head.collapse && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-down", className: (0, _utils_1.cn)(checkShow(String(menu_head_key)) && "rotate-180") }))] }), (!menu_head?.collapse || checkShow(String(menu_head_key))) &&
|
|
69
69
|
menu_head?.items?.map((menu, menu_key) => {
|
|
70
70
|
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SidebarWrapper, { path: menu?.path ? `${basePath || ""}${menu?.path}` : "", onClick: () => setShow(`${menu_head_key}.${menu_key}`), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("sidebar-item", menu?.path && cekActive(menu?.path || "") && "sidebar-item-active", (0, _utils_1.pcn)(className, "item"), menu?.className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [menu?.leftContent, (0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: menu?.label })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [menu?.rightContent, menu?.items?.length && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-up", className: `text-[10px] ${checkShow(`${menu_head_key}.${menu_key}`) || "rotate-180"}` }))] })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "px-4", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col", children: menu?.items?.length &&
|
package/package.json
CHANGED
|
@@ -154,7 +154,7 @@ export function SidebarComponent({
|
|
|
154
154
|
</div>
|
|
155
155
|
|
|
156
156
|
<nav className={cn(
|
|
157
|
-
"flex flex-col flex-1 overflow-hidden",
|
|
157
|
+
"flex flex-col flex-1 overflow-y-auto overflow-x-hidden",
|
|
158
158
|
toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "w-full" : "w-0 lg:w-full",
|
|
159
159
|
)}>
|
|
160
160
|
{items?.map((menu_head, menu_head_key) => {
|