@skalfa/skalfa-component 1.0.46 → 1.0.48
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.
|
@@ -11,5 +11,5 @@ const navigation_1 = require("next/navigation");
|
|
|
11
11
|
function HeadbarComponent({ title, backHref, rightContent, sidebarId, className = "", }) {
|
|
12
12
|
const router = (0, navigation_1.useRouter)();
|
|
13
13
|
const { toggle, setToggle } = (0, _contexts_1.useToggleContext)();
|
|
14
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("flex justify-between w-full items-center mt-2 mb-4 headbar", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("flex items-center headbar-left", (0, _utils_1.pcn)(className, "left")), children: [toggle[`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`] && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("w-8 aspect-square flex justify-center items-center cursor-pointer headbar-toggle headbar-sidebar-toggle", (0, _utils_1.pcn)(className, "toggle")), onClick: () => setToggle(`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`, !toggle[`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`]), children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "
|
|
14
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("flex justify-between w-full items-center mt-2 mb-4 headbar", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("flex items-center headbar-left", (0, _utils_1.pcn)(className, "left")), children: [toggle[`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`] && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("w-8 aspect-square flex justify-center items-center cursor-pointer headbar-toggle headbar-sidebar-toggle", (0, _utils_1.pcn)(className, "toggle")), onClick: () => setToggle(`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`, !toggle[`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`]), children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "outline/sidebar-close", className: "text-xl headbar-toggle-icon headbar-icon" }) })), backHref && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("w-8 aspect-square flex justify-center items-center cursor-pointer headbar-back headbar-back-button", (0, _utils_1.pcn)(className, "back")), onClick: () => typeof backHref != "boolean" ? router.push(backHref) : router.back(), children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-left", className: "text-xl headbar-back-icon headbar-icon" }) })), (0, jsx_runtime_1.jsx)("p", { className: (0, _utils_1.cn)("text-lg font-bold px-2 headbar-title", (0, _utils_1.pcn)(className, "title")), children: title })] }), rightContent && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("headbar-right", (0, _utils_1.pcn)(className, "right")), children: rightContent }))] }));
|
|
15
15
|
}
|
|
@@ -62,9 +62,9 @@ function SidebarComponent({ id, head, footer, items, basePath, prefetch, classNa
|
|
|
62
62
|
});
|
|
63
63
|
}, []);
|
|
64
64
|
(0, react_1.useEffect)(() => {
|
|
65
|
-
setToggle(`SIDEBAR${id ? "
|
|
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 ? "
|
|
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()) : ""}`] ? "sidebar-active" : "sidebar-inactive", (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}` : "", prefetch: menu?.prefetch ?? prefetch, 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 sidebar-item-label", 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 &&
|
|
@@ -77,9 +77,9 @@ function SidebarComponent({ id, head, footer, items, basePath, prefetch, classNa
|
|
|
77
77
|
"sidebar-child-item-active", (0, _utils_1.pcn)(className, "child-item"), child?.className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [child?.leftContent, (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] font-medium sidebar-child-item-label", children: child?.label })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [child?.rightContent, child?.items?.length && ((0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/chevron-up", className: `block text-[10px] ${checkShow(`${menu_head_key}.${menu_key}`) || "rotate-180"}` }))] })] }) }) }, `${menu_head_key}.${menu_key}.${menu_child_key}`));
|
|
78
78
|
}) }) })] }, `${menu_head_key}.${menu_key}`));
|
|
79
79
|
})] }) }, menu_head_key));
|
|
80
|
-
}) }), (0, jsx_runtime_1.jsx)("div", { className: toggle[`SIDEBAR${id ? "
|
|
80
|
+
}) }), (0, jsx_runtime_1.jsx)("div", { className: toggle[`SIDEBAR${id ? ("_" + id?.toUpperCase()) : ""}`] ? "block" : "hidden lg:block", children: footer })] })] }));
|
|
81
81
|
}
|
|
82
82
|
function SidebarContentComponent({ children, id }) {
|
|
83
83
|
const { toggle } = (0, _contexts_1.useToggleContext)();
|
|
84
|
-
return ((0, jsx_runtime_1.jsx)("main", { className: (0, _utils_1.cn)("sidebar-main-content", toggle[`SIDEBAR${id ? "
|
|
84
|
+
return ((0, jsx_runtime_1.jsx)("main", { className: (0, _utils_1.cn)("sidebar-main-content", toggle[`SIDEBAR${id ? ("_" + id?.toUpperCase()) : ""}`] ? "sidebar-main-content-active" : "sidebar-main-content-inactive"), children: children }));
|
|
85
85
|
}
|
package/package.json
CHANGED
|
@@ -52,7 +52,7 @@ export function HeadbarComponent({
|
|
|
52
52
|
)
|
|
53
53
|
}
|
|
54
54
|
>
|
|
55
|
-
<Icon icon="
|
|
55
|
+
<Icon icon="outline/sidebar-close" className="text-xl headbar-toggle-icon headbar-icon" />
|
|
56
56
|
</div>
|
|
57
57
|
)}
|
|
58
58
|
{backHref && (
|
|
@@ -127,7 +127,7 @@ export function SidebarComponent({
|
|
|
127
127
|
}, []);
|
|
128
128
|
|
|
129
129
|
useEffect(() => {
|
|
130
|
-
setToggle(`SIDEBAR${id ? "
|
|
130
|
+
setToggle(`SIDEBAR${id ? ("_" + id?.toUpperCase()) : ""}`, false)
|
|
131
131
|
}, [pathName]);
|
|
132
132
|
|
|
133
133
|
return (
|
|
@@ -135,32 +135,32 @@ export function SidebarComponent({
|
|
|
135
135
|
<div
|
|
136
136
|
className={cn(
|
|
137
137
|
"sidebar-backdrop",
|
|
138
|
-
toggle[`SIDEBAR${id ? "
|
|
138
|
+
toggle[`SIDEBAR${id ? ("_" + id?.toUpperCase()) : ""}`] ? "scale-100 lg:scale-0" : "scale-0",
|
|
139
139
|
pcn<CT>(className, "backdrop"),
|
|
140
140
|
)}
|
|
141
|
-
onClick={() => setToggle(`SIDEBAR${id ? "
|
|
141
|
+
onClick={() => setToggle(`SIDEBAR${id ? ("_" + id?.toUpperCase()) : ""}`)}
|
|
142
142
|
></div>
|
|
143
143
|
<aside
|
|
144
144
|
className={cn(
|
|
145
145
|
"sidebar-base scroll-sm",
|
|
146
|
-
toggle[`SIDEBAR${id ? "
|
|
146
|
+
toggle[`SIDEBAR${id ? ("_" + id?.toUpperCase()) : ""}`] ? "sidebar-active" : "sidebar-inactive",
|
|
147
147
|
pcn<CT>(className, "base"),
|
|
148
148
|
)}
|
|
149
149
|
>
|
|
150
|
-
<div className={toggle[`SIDEBAR${id ? "
|
|
150
|
+
<div className={toggle[`SIDEBAR${id ? ("_" + id?.toUpperCase()) : ""}`] ? "block" : "hidden lg:block"}>
|
|
151
151
|
{head}
|
|
152
152
|
</div>
|
|
153
153
|
|
|
154
154
|
<div
|
|
155
|
-
className={toggle[`SIDEBAR${id ? "
|
|
156
|
-
onClick={() => setToggle(`SIDEBAR${id ? "
|
|
155
|
+
className={toggle[`SIDEBAR${id ? ("_" + id?.toUpperCase()) : ""}`] ? "hidden" : "flex justify-center pt-4 h-full lg:hidden"}
|
|
156
|
+
onClick={() => setToggle(`SIDEBAR${id ? ("_" + id?.toUpperCase()) : ""}`)}
|
|
157
157
|
>
|
|
158
158
|
<Icon icon={"solid/bars"} />
|
|
159
159
|
</div>
|
|
160
160
|
|
|
161
161
|
<nav className={cn(
|
|
162
162
|
"flex flex-col flex-1 overflow-y-auto overflow-x-hidden",
|
|
163
|
-
toggle[`SIDEBAR${id ? "
|
|
163
|
+
toggle[`SIDEBAR${id ? ("_" + id?.toUpperCase()) : ""}`] ? "w-full" : "w-0 lg:w-full",
|
|
164
164
|
)}>
|
|
165
165
|
{items?.map((menu_head, menu_head_key) => {
|
|
166
166
|
return (
|
|
@@ -297,7 +297,7 @@ export function SidebarComponent({
|
|
|
297
297
|
})}
|
|
298
298
|
</nav>
|
|
299
299
|
|
|
300
|
-
<div className={toggle[`SIDEBAR${id ? "
|
|
300
|
+
<div className={toggle[`SIDEBAR${id ? ("_" + id?.toUpperCase()) : ""}`] ? "block" : "hidden lg:block"}>
|
|
301
301
|
{footer}
|
|
302
302
|
</div>
|
|
303
303
|
</aside>
|
|
@@ -309,7 +309,7 @@ export function SidebarContentComponent({ children, id }: { children: ReactNode,
|
|
|
309
309
|
const { toggle } = useToggleContext()
|
|
310
310
|
|
|
311
311
|
return (
|
|
312
|
-
<main className={cn("sidebar-main-content", toggle[`SIDEBAR${id ? "
|
|
312
|
+
<main className={cn("sidebar-main-content", toggle[`SIDEBAR${id ? ("_" + id?.toUpperCase()) : ""}`] ? "sidebar-main-content-active" : "sidebar-main-content-inactive")}>
|
|
313
313
|
{children}
|
|
314
314
|
</main>
|
|
315
315
|
);
|