@skalfa/skalfa-component 1.0.44 → 1.0.45
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.
|
@@ -3,5 +3,6 @@ export interface HeadbarProps {
|
|
|
3
3
|
title?: string;
|
|
4
4
|
backHref?: string | boolean;
|
|
5
5
|
rightContent?: ReactNode;
|
|
6
|
+
sidebarId?: string;
|
|
6
7
|
}
|
|
7
|
-
export declare function HeadbarComponent({ title, backHref, rightContent }: HeadbarProps): import("@types/react").JSX.Element;
|
|
8
|
+
export declare function HeadbarComponent({ title, backHref, rightContent, sidebarId }: HeadbarProps): import("@types/react").JSX.Element;
|
|
@@ -3,10 +3,12 @@
|
|
|
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 _contexts_1 = require("@contexts");
|
|
6
7
|
const skalfa_icon_1 = require("@skalfa/skalfa-icon");
|
|
7
8
|
const navigation_1 = require("next/navigation");
|
|
8
9
|
;
|
|
9
|
-
function HeadbarComponent({ title, backHref, rightContent }) {
|
|
10
|
+
function HeadbarComponent({ title, backHref, rightContent, sidebarId }) {
|
|
10
11
|
const router = (0, navigation_1.useRouter)();
|
|
11
|
-
|
|
12
|
+
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 })] }));
|
|
12
14
|
}
|
package/package.json
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
"use client"
|
|
2
|
+
import { useToggleContext } from "@contexts";
|
|
2
3
|
import { Icon, type IconName } from "@skalfa/skalfa-icon";
|
|
3
4
|
|
|
4
5
|
|
|
@@ -11,18 +12,25 @@ export interface HeadbarProps {
|
|
|
11
12
|
title ?: string;
|
|
12
13
|
backHref ?: string | boolean;
|
|
13
14
|
rightContent ?: ReactNode;
|
|
15
|
+
sidebarId ?: string;
|
|
14
16
|
};
|
|
15
17
|
|
|
16
18
|
|
|
17
|
-
export function HeadbarComponent({ title, backHref, rightContent }: HeadbarProps) {
|
|
19
|
+
export function HeadbarComponent({ title, backHref, rightContent, sidebarId }: HeadbarProps) {
|
|
18
20
|
const router = useRouter();
|
|
21
|
+
const { toggle, setToggle } = useToggleContext()
|
|
19
22
|
|
|
20
23
|
return (
|
|
21
24
|
<div className="flex justify-between w-full items-center mt-2 mb-4">
|
|
22
25
|
<div className="flex items-center">
|
|
26
|
+
{toggle[`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`] && (
|
|
27
|
+
<div className="w-8 aspect-square flex justify-center items-center cursor-pointer " onClick={() => setToggle(`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`, !toggle[`SIDEBAR${sidebarId ? ("_" + sidebarId?.toUpperCase()) : ""}`])}>
|
|
28
|
+
<Icon icon="solid/sidebar" className="text-xl" />
|
|
29
|
+
</div>
|
|
30
|
+
)}
|
|
23
31
|
{backHref && (
|
|
24
32
|
<div className="w-8 aspect-square flex justify-center items-center cursor-pointer" onClick={() => typeof backHref != "boolean" ? router.push(backHref) : router.back()}>
|
|
25
|
-
<Icon icon="solid/chevron-left" className="text-
|
|
33
|
+
<Icon icon="solid/chevron-left" className="text-xl" />
|
|
26
34
|
</div>
|
|
27
35
|
)}
|
|
28
36
|
<p className="text-lg font-bold px-2">{title}</p>
|