@skalfa/skalfa-component 1.0.45 → 1.0.47
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.
|
@@ -4,5 +4,7 @@ export interface HeadbarProps {
|
|
|
4
4
|
backHref?: string | boolean;
|
|
5
5
|
rightContent?: ReactNode;
|
|
6
6
|
sidebarId?: string;
|
|
7
|
+
/** Use custom class with: "left::", "right::", "title::", "toggle::", "back::". */
|
|
8
|
+
className?: string;
|
|
7
9
|
}
|
|
8
|
-
export declare function HeadbarComponent({ title, backHref, rightContent, sidebarId }: HeadbarProps): import("@types/react").JSX.Element;
|
|
10
|
+
export declare function HeadbarComponent({ title, backHref, rightContent, sidebarId, className, }: HeadbarProps): import("@types/react").JSX.Element;
|
|
@@ -3,12 +3,13 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
exports.HeadbarComponent = HeadbarComponent;
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
const _utils_1 = require("@utils");
|
|
6
7
|
const _contexts_1 = require("@contexts");
|
|
7
8
|
const skalfa_icon_1 = require("@skalfa/skalfa-icon");
|
|
8
9
|
const navigation_1 = require("next/navigation");
|
|
9
10
|
;
|
|
10
|
-
function HeadbarComponent({ title, backHref, rightContent, sidebarId }) {
|
|
11
|
+
function HeadbarComponent({ title, backHref, rightContent, sidebarId, className = "", }) {
|
|
11
12
|
const router = (0, navigation_1.useRouter)();
|
|
12
13
|
const { toggle, setToggle } = (0, _contexts_1.useToggleContext)();
|
|
13
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between w-full items-center mt-2 mb-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [toggle[`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`] && ((0, jsx_runtime_1.jsx)("div", { className: "w-8 aspect-square flex justify-center items-center cursor-pointer ", onClick: () => setToggle(`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`, !toggle[`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`]), children: (0, jsx_runtime_1.jsx)(skalfa_icon_1.Icon, { icon: "solid/sidebar", className: "text-xl" }) })), backHref && ((0, jsx_runtime_1.jsx)("div", { className: "w-8 aspect-square flex justify-center items-center cursor-pointer", 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" }) })), (0, jsx_runtime_1.jsx)("p", { className: "text-lg font-bold px-2", children: title })] }), rightContent && (0, jsx_runtime_1.jsx)("div", { children: rightContent })] }));
|
|
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: "solid/sidebar", 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 }))] }));
|
|
14
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
|
@@ -1,41 +1,83 @@
|
|
|
1
1
|
"use client"
|
|
2
|
+
import { cn, pcn } from "@utils";
|
|
2
3
|
import { useToggleContext } from "@contexts";
|
|
3
4
|
import { Icon, type IconName } from "@skalfa/skalfa-icon";
|
|
4
|
-
|
|
5
|
-
|
|
6
5
|
import { useRouter } from "next/navigation";
|
|
7
6
|
import { ReactNode } from "react";
|
|
8
7
|
|
|
9
8
|
|
|
10
9
|
|
|
10
|
+
type CT = "base" | "left" | "right" | "title" | "toggle" | "back";
|
|
11
|
+
|
|
11
12
|
export interface HeadbarProps {
|
|
12
13
|
title ?: string;
|
|
13
14
|
backHref ?: string | boolean;
|
|
14
15
|
rightContent ?: ReactNode;
|
|
15
16
|
sidebarId ?: string;
|
|
17
|
+
|
|
18
|
+
/** Use custom class with: "left::", "right::", "title::", "toggle::", "back::". */
|
|
19
|
+
className ?: string;
|
|
16
20
|
};
|
|
17
21
|
|
|
18
22
|
|
|
19
|
-
|
|
23
|
+
|
|
24
|
+
export function HeadbarComponent({
|
|
25
|
+
title,
|
|
26
|
+
backHref,
|
|
27
|
+
rightContent,
|
|
28
|
+
sidebarId,
|
|
29
|
+
className = "",
|
|
30
|
+
}: HeadbarProps) {
|
|
20
31
|
const router = useRouter();
|
|
21
|
-
const { toggle, setToggle } = useToggleContext()
|
|
32
|
+
const { toggle, setToggle } = useToggleContext();
|
|
22
33
|
|
|
23
34
|
return (
|
|
24
|
-
<div
|
|
25
|
-
|
|
35
|
+
<div
|
|
36
|
+
className={cn(
|
|
37
|
+
"flex justify-between w-full items-center mt-2 mb-4 headbar",
|
|
38
|
+
pcn<CT>(className, "base")
|
|
39
|
+
)}
|
|
40
|
+
>
|
|
41
|
+
<div className={cn("flex items-center headbar-left", pcn<CT>(className, "left"))}>
|
|
26
42
|
{toggle[`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`] && (
|
|
27
|
-
<div
|
|
28
|
-
|
|
43
|
+
<div
|
|
44
|
+
className={cn(
|
|
45
|
+
"w-8 aspect-square flex justify-center items-center cursor-pointer headbar-toggle headbar-sidebar-toggle",
|
|
46
|
+
pcn<CT>(className, "toggle")
|
|
47
|
+
)}
|
|
48
|
+
onClick={() =>
|
|
49
|
+
setToggle(
|
|
50
|
+
`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`,
|
|
51
|
+
!toggle[`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`]
|
|
52
|
+
)
|
|
53
|
+
}
|
|
54
|
+
>
|
|
55
|
+
<Icon icon="solid/sidebar" className="text-xl headbar-toggle-icon headbar-icon" />
|
|
29
56
|
</div>
|
|
30
57
|
)}
|
|
31
58
|
{backHref && (
|
|
32
|
-
<div
|
|
33
|
-
|
|
59
|
+
<div
|
|
60
|
+
className={cn(
|
|
61
|
+
"w-8 aspect-square flex justify-center items-center cursor-pointer headbar-back headbar-back-button",
|
|
62
|
+
pcn<CT>(className, "back")
|
|
63
|
+
)}
|
|
64
|
+
onClick={() =>
|
|
65
|
+
typeof backHref != "boolean" ? router.push(backHref) : router.back()
|
|
66
|
+
}
|
|
67
|
+
>
|
|
68
|
+
<Icon icon="solid/chevron-left" className="text-xl headbar-back-icon headbar-icon" />
|
|
34
69
|
</div>
|
|
35
70
|
)}
|
|
36
|
-
<p className="text-lg font-bold px-2">
|
|
71
|
+
<p className={cn("text-lg font-bold px-2 headbar-title", pcn<CT>(className, "title"))}>
|
|
72
|
+
{title}
|
|
73
|
+
</p>
|
|
37
74
|
</div>
|
|
38
|
-
{rightContent &&
|
|
75
|
+
{rightContent && (
|
|
76
|
+
<div className={cn("headbar-right", pcn<CT>(className, "right"))}>
|
|
77
|
+
{rightContent}
|
|
78
|
+
</div>
|
|
79
|
+
)}
|
|
39
80
|
</div>
|
|
40
81
|
);
|
|
41
82
|
}
|
|
83
|
+
|
|
@@ -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
|
);
|