cynx-lib 1.3.80 → 1.3.82

package/ui/components/Layout.jsx

@@ -1,138 +1,138 @@
-import React from 'react';
-import { Outlet } from 'react-router-dom';
-import Sidebar, { isDarkColor } from './Sidebar.jsx';
-import { ConfirmRoot } from './Confirm.jsx';
-
-export { isDarkColor };
-
-export default function Layout({
-  brand,
-  navSections = [],
-  navItems = [],
-  user,
-  onLogout,
-  onLock,
-  collapsible = true,
-  isCollapsed,
-  onToggleCollapse,
-  storageKey = 'app_sidebar_collapsed',
-  // Sidebar styling props
-  sidebarBg,
-  sidebarColor,
-  sidebarMutedColor,
-  sidebarBorder,
-  sidebarStyle = {},
-  sidebarClassName,
-  // Active states
-  activeBg,
-  activeColor,
-  activeSubBg,
-  activeSubColor,
-  subItemsIndent = 12,
-  // Topbar
-  topbarLeft,
-  topbarCenter,
-  topbarRight,
-  hasPermission = () => true,
-  outletContext,
-  contentStyle = {},
-  contentClassName,
-  children,
-}) {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        height: '100vh',
-        width: '100vw',
-        overflow: 'hidden',
-        background: 'var(--bg, #ffffff)',
-        color: 'var(--primary-text, #09090b)',
-        fontFamily: 'var(--sans, inherit)',
-      }}
-    >
-      {/* Standalone Reusable Sidebar Component */}
-      <Sidebar
-        brand={brand}
-        navSections={navSections}
-        navItems={navItems}
-        user={user}
-        onLogout={onLogout}
-        onLock={onLock}
-        collapsible={collapsible}
-        isCollapsed={isCollapsed}
-        onToggleCollapse={onToggleCollapse}
-        storageKey={storageKey}
-        sidebarBg={sidebarBg}
-        sidebarColor={sidebarColor}
-        sidebarMutedColor={sidebarMutedColor}
-        sidebarBorder={sidebarBorder}
-        sidebarStyle={sidebarStyle}
-        sidebarClassName={sidebarClassName}
-        activeBg={activeBg}
-        activeColor={activeColor}
-        activeSubBg={activeSubBg}
-        activeSubColor={activeSubColor}
-        subItemsIndent={subItemsIndent}
-        hasPermission={hasPermission}
-      />
-
-      {/* Main Content Area */}
-      <div
-        style={{
-          flex: 1,
-          display: 'flex',
-          flexDirection: 'column',
-          height: '100vh',
-          overflow: 'hidden',
-          minWidth: 0,
-        }}
-      >
-        {/* Top Navbar Header */}
-        <header
-          style={{
-            height: 56,
-            minHeight: 56,
-            borderBottom: '1px solid var(--border-light, #f4f4f5)',
-            background: 'var(--surface, #ffffff)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            padding: '0 24px',
-            flexShrink: 0,
-            boxSizing: 'border-box',
-          }}
-        >
-          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-            {topbarLeft}
-          </div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-            {topbarCenter}
-          </div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginLeft: 'auto' }}>
-            {topbarRight}
-          </div>
-        </header>
-
-        {/* Content Area */}
-        <main
-          className={contentClassName}
-          style={{
-            flex: 1,
-            display: 'flex',
-            flexDirection: 'column',
-            minHeight: 0,
-            overflowY: 'auto',
-            background: 'var(--bg, #ffffff)',
-            boxSizing: 'border-box',
-            ...contentStyle,
-          }}
-        >
-          {children || <Outlet context={outletContext} />}
-        </main>
-      </div>
-
-      <ConfirmRoot />
-    </div>
-  );
-}
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import Sidebar, { isDarkColor } from './Sidebar.jsx';
+import { ConfirmRoot } from './Confirm.jsx';
+
+export { isDarkColor };
+
+export default function Layout({
+  brand,
+  navSections = [],
+  navItems = [],
+  user,
+  onLogout,
+  onLock,
+  collapsible = true,
+  isCollapsed,
+  onToggleCollapse,
+  storageKey = 'app_sidebar_collapsed',
+  // Sidebar styling props
+  sidebarBg,
+  sidebarColor,
+  sidebarMutedColor,
+  sidebarBorder,
+  sidebarStyle = {},
+  sidebarClassName,
+  // Active states
+  activeBg,
+  activeColor,
+  activeSubBg,
+  activeSubColor,
+  subItemsIndent = 12,
+  // Topbar
+  topbarLeft,
+  topbarCenter,
+  topbarRight,
+  hasPermission = () => true,
+  outletContext,
+  contentStyle = {},
+  contentClassName,
+  children,
+}) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        height: '100vh',
+        width: '100vw',
+        overflow: 'hidden',
+        background: 'var(--bg, #ffffff)',
+        color: 'var(--primary-text, #09090b)',
+        fontFamily: 'var(--sans, inherit)',
+      }}
+    >
+      {/* Standalone Reusable Sidebar Component */}
+      <Sidebar
+        brand={brand}
+        navSections={navSections}
+        navItems={navItems}
+        user={user}
+        onLogout={onLogout}
+        onLock={onLock}
+        collapsible={collapsible}
+        isCollapsed={isCollapsed}
+        onToggleCollapse={onToggleCollapse}
+        storageKey={storageKey}
+        sidebarBg={sidebarBg}
+        sidebarColor={sidebarColor}
+        sidebarMutedColor={sidebarMutedColor}
+        sidebarBorder={sidebarBorder}
+        sidebarStyle={sidebarStyle}
+        sidebarClassName={sidebarClassName}
+        activeBg={activeBg}
+        activeColor={activeColor}
+        activeSubBg={activeSubBg}
+        activeSubColor={activeSubColor}
+        subItemsIndent={subItemsIndent}
+        hasPermission={hasPermission}
+      />
+
+      {/* Main Content Area */}
+      <div
+        style={{
+          flex: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100vh',
+          overflow: 'hidden',
+          minWidth: 0,
+        }}
+      >
+        {/* Top Navbar Header */}
+        <header
+          style={{
+            height: 56,
+            minHeight: 56,
+            borderBottom: '1px solid var(--border-light, #f4f4f5)',
+            background: 'var(--surface, #ffffff)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: '0 24px',
+            flexShrink: 0,
+            boxSizing: 'border-box',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            {topbarLeft}
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            {topbarCenter}
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginLeft: 'auto' }}>
+            {topbarRight}
+          </div>
+        </header>
+
+        {/* Content Area */}
+        <main
+          className={contentClassName}
+          style={{
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: 0,
+            overflowY: 'auto',
+            background: 'var(--bg, #ffffff)',
+            boxSizing: 'border-box',
+            ...contentStyle,
+          }}
+        >
+          {children || <Outlet context={outletContext} />}
+        </main>
+      </div>
+
+      <ConfirmRoot />
+    </div>
+  );
+}