@skalfa/skalfa-component 1.0.42 → 1.0.43

package/dist/nav/Sidebar.component.d.ts

@@ -26,6 +26,7 @@ export interface sidebarProps {
     className?: string;
 }
 export declare function SidebarComponent({ id, head, footer, items, basePath, prefetch, className, }: sidebarProps): import("@types/react").JSX.Element;
-export declare function SidebarContentComponent({ children }: {
+export declare function SidebarContentComponent({ children, id }: {
     children: ReactNode;
+    id: string;
 }): import("@types/react").JSX.Element;

package/dist/nav/Sidebar.component.js

@@ -79,6 +79,7 @@ function SidebarComponent({ id, head, footer, items, basePath, prefetch, classNa
                                             })] }) }, menu_head_key));
                         }) }), (0, jsx_runtime_1.jsx)("div", { className: toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "block" : "hidden lg:block", children: footer })] })] }));
 }
-function SidebarContentComponent({ children }) {
-    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 }));
+function SidebarContentComponent({ children, id }) {
+    const { toggle } = (0, _contexts_1.useToggleContext)();
+    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 }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skalfa/skalfa-component",
-  "version": "1.0.42",
+  "version": "1.0.43",
   "description": "Reusable UI components for Skalfa App.",
   "license": "MIT",
   "keywords": [

package/src/nav/Sidebar.component.tsx

@@ -305,9 +305,11 @@ export function SidebarComponent({
   );
 }
 
-export function SidebarContentComponent({ children }: { children: ReactNode }) {
+export function SidebarContentComponent({ children, id }: { children: ReactNode, id: string }) {
+  const { toggle }  =  useToggleContext()
+
   return (
-    <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">
+    <main className={cn("sidebar-main-content", toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "sidebar-main-content-active" : "sidebar-main-content-inactive")}>
       {children}
     </main>
   );