@skalfa/skalfa-component 1.0.41 → 1.0.43

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.
Files changed (4) hide show
  1. package/dist/nav/Sidebar.component.d.ts +2 -1
  2. package/dist/nav/Sidebar.component.js +4 -3
  3. package/package.json +1 -1
  4. package/src/nav/Sidebar.component.tsx +5 -3
package/dist/nav/Sidebar.component.d.ts CHANGED
@@ -26,6 +26,7 @@ export interface sidebarProps {
26
26
  className?: string;
27
27
  }
28
28
  export declare function SidebarComponent({ id, head, footer, items, basePath, prefetch, className, }: sidebarProps): import("@types/react").JSX.Element;
29
- export declare function SidebarContentComponent({ children }: {
29
+ export declare function SidebarContentComponent({ children, id }: {
30
30
  children: ReactNode;
31
+ id: string;
31
32
  }): import("@types/react").JSX.Element;
package/dist/nav/Sidebar.component.js CHANGED
@@ -64,7 +64,7 @@ function SidebarComponent({ id, head, footer, items, basePath, prefetch, classNa
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-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) => {
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", 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 &&
@@ -79,6 +79,7 @@ function SidebarComponent({ id, head, footer, items, basePath, prefetch, classNa
79
79
  })] }) }, menu_head_key));
80
80
  }) }), (0, jsx_runtime_1.jsx)("div", { className: toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "block" : "hidden lg:block", children: footer })] })] }));
81
81
  }
82
- function SidebarContentComponent({ children }) {
83
- return ((0, jsx_runtime_1.jsx)("main", { className: "w-full sm:ml-14 sm:w-[calc(100vw-56px)] lg:ml-[280px] lg:w-[calc(100vw-280px)] min-h-screen overflow-x-hidden", children: children }));
82
+ function SidebarContentComponent({ children, id }) {
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 ? "" : "_" + id?.toUpperCase()}`] ? "sidebar-main-content-active" : "sidebar-main-content-inactive"), children: children }));
84
85
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skalfa/skalfa-component",
3
- "version": "1.0.41",
3
+ "version": "1.0.43",
4
4
  "description": "Reusable UI components for Skalfa App.",
5
5
  "license": "MIT",
6
6
  "keywords": [
package/src/nav/Sidebar.component.tsx CHANGED
@@ -143,7 +143,7 @@ export function SidebarComponent({
143
143
  <aside
144
144
  className={cn(
145
145
  "sidebar-base scroll-sm",
146
- toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "w-full sm:w-[280px]" : "w-0 sm:w-14 lg:w-[280px]",
146
+ toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "sidebar-active" : "sidebar-inactive",
147
147
  pcn<CT>(className, "base"),
148
148
  )}
149
149
  >
@@ -305,9 +305,11 @@ export function SidebarComponent({
305
305
  );
306
306
  }
307
307
 
308
- export function SidebarContentComponent({ children }: { children: ReactNode }) {
308
+ export function SidebarContentComponent({ children, id }: { children: ReactNode, id: string }) {
309
+ const { toggle } = useToggleContext()
310
+
309
311
  return (
310
- <main className="w-full sm:ml-14 sm:w-[calc(100vw-56px)] lg:ml-[280px] lg:w-[calc(100vw-280px)] min-h-screen overflow-x-hidden">
312
+ <main className={cn("sidebar-main-content", toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "sidebar-main-content-active" : "sidebar-main-content-inactive")}>
311
313
  {children}
312
314
  </main>
313
315
  );