izen-react-starter 2.5.6 → 2.5.8

package/README.md

@@ -4,6 +4,7 @@ A modern React component library built with Vite, TypeScript, and best practices
 
 ## Changelog
 
+- 2026-01-12: Added `DashboardLayout` component with integrated `AppSidebar`, header, and overlay support. Sidebar now supports `collapsible: 'icon'` for desktop toggle and `'offcanvas'` for mobile sheet behavior. Updated `ApiService` interface to include `setTokenGetter` method for token management.
 - 2026-01-02: `BrowserRouter` removed from inside `AppProvider`. Consumers must wrap `AppProvider` (and any `react-router-dom` usage) in their own router at the app root.
 
 ## Features
@@ -257,6 +258,72 @@ function ThemeToggle() {
 }
 ```
 
+### Dashboard Layout with Sidebar
+
+Use `DashboardLayout` with `AppSidebar` to create a complete dashboard structure with sidebar navigation, header, and content area. The sidebar is responsive and includes built-in toggle functionality.
+
+```tsx
+import { DashboardLayout, AppSidebar } from 'izen-react-starter';
+import { LayoutDashboardIcon, UsersIcon, SettingsIcon } from 'lucide-react';
+import { pageTitles } from '@/lib/constants/URLS';
+import { useAuth } from 'izen-react-starter';
+
+export default function DashboardLay({ children }: { children: React.ReactNode }) {
+  const { user } = useAuth();
+  
+  const sidebarProps = {
+    navMain: [
+      { title: 'Dashboard', url: '/dashboard', icon: LayoutDashboardIcon },
+      { title: 'Users', url: '/dashboard/users', icon: UsersIcon },
+    ],
+    navSecondary: [
+      { title: 'Settings', url: '/dashboard/preferences', icon: SettingsIcon },
+    ],
+    user: user ? {
+      name: user.name,
+      email: user.email,
+      avatar: user.avatar,
+    } : undefined,
+    onLogout: () => {
+      // Handle logout
+      window.location.href = '/login';
+    },
+    logoText: 'My App',
+    logoHref: '/dashboard',
+    pageTitles,
+    collapsible: 'icon', // Enable sidebar collapse on desktop
+  };
+
+  const headerProps = {
+    pageTitles,
+    defaultTitle: 'Dashboard',
+  };
+
+  return (
+    <DashboardLayout
+      sidebarProps={sidebarProps}
+      headerProps={headerProps}
+      defaultOpen={true}
+    >
+      {children}
+    </DashboardLayout>
+  );
+}
+```
+
+**Key Features:**
+- **Sidebar Navigation**: Supports `navMain` (primary nav) and `navSecondary` (secondary nav like Settings)
+- **User Profile**: Optional user section at the bottom with logout
+- **Responsive**: Collapses to icon-only on desktop (with toggle), becomes a sheet on mobile
+- **Page Titles**: Auto-displays page title in header based on route
+- **Overlay Integration**: Built-in overlay/modal support via `useOverlay` hook
+- **Collapsible Modes**: Set `collapsible` to `'icon'` (desktop collapse), `'offcanvas'` (mobile sheet), or `'none'` (always visible)
+
+> **Note**: Make sure to import the library CSS in your app entry:
+> ```tsx
+> import 'izen-react-starter/dist/style.css';
+> ```
+
 ### Form Layout (RHF + Axios)
 
 Use `FormLayout` to wire react-hook-form + zod validation with built-in Axios auth, RBAC visibility checks, toasts, and submit helpers.

package/dist/{2SSKDMRQ-BZ0L1Ejz.js → 2SSKDMRQ-DX65y15m.js}

@@ -1,5 +1,5 @@
-import { c as s, T as c, P as u, a as i, b as m, C as P, Q as d } from "./AP7HFJJL-qzOuapxb.js";
-import { g as h, c as v, a as e } from "./index-D2ZQoJ_A.js";
+import { c as s, T as c, P as u, a as i, b as m, C as P, Q as d } from "./AP7HFJJL-BIGKw1Hk.js";
+import { g as h, c as v, a as e } from "./index-Df-O5vd7.js";
 var C = (r) => {
   const [t, o] = s({
     prefix: "TanstackQueryDevtools"

package/dist/{AP7HFJJL-qzOuapxb.js → AP7HFJJL-BIGKw1Hk.js}

@@ -1,7 +1,7 @@
 var xs = Object.defineProperty;
 var $s = (e, t, n) => t in e ? xs(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
 var Re = (e, t, n) => $s(e, typeof t != "symbol" ? t + "" : t, n);
-import { b as $e, d as B, o as ft, e as H, c as P, a as m, P as No, m as ve, S as K, t as _, i as k, f as U, h as F, j as Cs, k as ur, u as Ce, l as V, s as Qn, n as Yn, p as gt, q as T, r as Ss, v as Ut, w as _t, x as qe, y as ks, z as Rt, A as Bt, B as Es, C as Ds, D as En, F as As, E as Ht, $ as Ho, G as Ms, H as Ts, I as W, J as Vr, K as Fs, L as Is, M as cr, N as Os, O as Ls, Q as Hn, R as Ps, T as qs, U as ie, V as _s, W as Rs } from "./index-D2ZQoJ_A.js";
+import { b as $e, d as B, o as ft, e as H, c as P, a as m, P as No, m as ve, S as K, t as _, i as k, f as U, h as F, j as Cs, k as ur, u as Ce, l as V, s as Qn, n as Yn, p as gt, q as T, r as Ss, v as Ut, w as _t, x as qe, y as ks, z as Rt, A as Bt, B as Es, C as Ds, D as En, F as As, E as Ht, $ as Ho, G as Ms, H as Ts, I as W, J as Vr, K as Fs, L as Is, M as cr, N as Os, O as Ls, Q as Hn, R as Ps, T as qs, U as ie, V as _s, W as Rs } from "./index-Df-O5vd7.js";
 var zs = (e) => e != null, Ks = (e) => e.filter(zs);
 function Bs(e) {
   return (...t) => {

package/dist/{WDYDFRGG-DeiLlShW.js → WDYDFRGG-DyKe9_mw.js}

@@ -1,5 +1,5 @@
-import { c, T as l, P as m, a as u, D as v, Q as i } from "./AP7HFJJL-qzOuapxb.js";
-import { g as d, c as f, a as e } from "./index-D2ZQoJ_A.js";
+import { c, T as l, P as m, a as u, D as v, Q as i } from "./AP7HFJJL-BIGKw1Hk.js";
+import { g as d, c as f, a as e } from "./index-Df-O5vd7.js";
 var h = (t) => {
   const [r, o] = c({
     prefix: "TanstackQueryDevtools"