@rqdhw3n/react-admin-layout 1.0.0 → 1.0.1

package/dist/index.js

@@ -1,7 +1,7 @@
 import { jsx as n, Fragment as A, jsxs as o } from "react/jsx-runtime";
 import { createContext as V, useState as w, useEffect as M, useCallback as L, useMemo as U, useContext as Z, useRef as T } from "react";
 import { useLocation as I, NavLink as ee } from "react-router-dom";
-import { ChevronDown as H, X as te, Home as ne, ChevronRight as ae, Search as re, Bell as ie, Sun as le, Moon as se, Settings as de, User as oe, LogOut as ce, Menu as me, PanelLeftOpen as J, PanelLeftClose as G } from "lucide-react";
+import { ChevronDown as H, X as te, Home as ne, ChevronRight as re, Search as ae, Bell as ie, Sun as se, Moon as le, Settings as de, User as oe, LogOut as ce, Menu as me, PanelLeftOpen as J, PanelLeftClose as G } from "lucide-react";
 function ue(e) {
   if (typeof window > "u") return {};
   try {
@@ -22,48 +22,48 @@ const Q = V(null);
 function he({
   children: e,
   storageKey: t = "rqdhw3n-admin-layout",
-  defaultCollapsed: a = !1,
-  permissions: r = {},
-  initialBreadcrumbs: s = [],
-  initialActivePath: l = "/",
+  defaultCollapsed: r = !1,
+  permissions: a = {},
+  initialBreadcrumbs: l = [],
+  initialActivePath: s = "/",
   initialDarkMode: i
 }) {
   const d = ue(t), [c, b] = w(
-    d.sidebarCollapsed ?? a
+    d.sidebarCollapsed ?? r
   ), [f, v] = w(!1), [h, m] = w(
     d.darkMode ?? i ?? !1
-  ), [p, N] = w(s), [C, x] = w(l);
+  ), [p, N] = w(l), [C, g] = w(s);
   M(() => {
     be(t, { sidebarCollapsed: c, darkMode: h });
   }, [t, c, h]), M(() => {
     const y = document.documentElement;
     h ? y.classList.add("dark") : y.classList.remove("dark");
   }, [h]);
-  const S = L(() => b((y) => !y), []), g = L(() => v((y) => !y), []), P = L(() => m((y) => !y), []), B = U(
+  const S = L(() => b((y) => !y), []), x = L(() => v((y) => !y), []), P = L(() => m((y) => !y), []), B = U(
     () => ({
       sidebarCollapsed: c,
       mobileOpen: f,
       darkMode: h,
       toggleSidebar: S,
       setSidebarCollapsed: b,
-      toggleMobile: g,
+      toggleMobile: x,
       setMobileOpen: v,
       toggleDarkMode: P,
       setDarkMode: m,
-      permissions: r,
+      permissions: a,
       breadcrumbs: p,
       setBreadcrumbs: N,
       activePath: C,
-      setActivePath: x
+      setActivePath: g
     }),
     [
       c,
       f,
       h,
       S,
-      g,
+      x,
       P,
-      r,
+      a,
       p,
       C
     ]
@@ -80,49 +80,49 @@ function O() {
   const {
     sidebarCollapsed: e,
     mobileOpen: t,
-    toggleSidebar: a,
-    setSidebarCollapsed: r,
-    toggleMobile: s,
-    setMobileOpen: l
+    toggleSidebar: r,
+    setSidebarCollapsed: a,
+    toggleMobile: l,
+    setMobileOpen: s
   } = k();
   return {
     collapsed: e,
     mobileOpen: t,
-    toggle: a,
-    setCollapsed: r,
-    toggleMobile: s,
-    setMobileOpen: l,
-    closeMobile: () => l(!1)
+    toggle: r,
+    setCollapsed: a,
+    toggleMobile: l,
+    setMobileOpen: s,
+    closeMobile: () => s(!1)
   };
 }
 function E(e) {
   const t = e.split("/").filter(Boolean);
-  return t.length ? t.map((a, r) => {
-    const s = "/" + t.slice(0, r + 1).join("/");
-    return { label: a.replace(/-/g, " ").replace(/\b\w/g, (i) => i.toUpperCase()), path: r < t.length - 1 ? s : void 0 };
+  return t.length ? t.map((r, a) => {
+    const l = "/" + t.slice(0, a + 1).join("/");
+    return { label: r.replace(/-/g, " ").replace(/\b\w/g, (i) => i.toUpperCase()), path: a < t.length - 1 ? l : void 0 };
   }) : [{ label: "Home", path: "/" }];
 }
 function W(e) {
-  var t, a, r = "";
-  if (typeof e == "string" || typeof e == "number") r += e;
+  var t, r, a = "";
+  if (typeof e == "string" || typeof e == "number") a += e;
   else if (typeof e == "object") if (Array.isArray(e)) {
-    var s = e.length;
-    for (t = 0; t < s; t++) e[t] && (a = W(e[t])) && (r && (r += " "), r += a);
-  } else for (a in e) e[a] && (r && (r += " "), r += a);
-  return r;
+    var l = e.length;
+    for (t = 0; t < l; t++) e[t] && (r = W(e[t])) && (a && (a += " "), a += r);
+  } else for (r in e) e[r] && (a && (a += " "), a += r);
+  return a;
 }
 function fe() {
-  for (var e, t, a = 0, r = "", s = arguments.length; a < s; a++) (e = arguments[a]) && (t = W(e)) && (r && (r += " "), r += t);
-  return r;
+  for (var e, t, r = 0, a = "", l = arguments.length; r < l; r++) (e = arguments[r]) && (t = W(e)) && (a && (a += " "), a += t);
+  return a;
 }
 function u(...e) {
   return fe(e);
 }
 function pe({ children: e }) {
-  const { pathname: t } = I(), { setActivePath: a, setBreadcrumbs: r, breadcrumbs: s } = k();
+  const { pathname: t } = I(), { setActivePath: r, setBreadcrumbs: a, breadcrumbs: l } = k();
   return M(() => {
-    a(t), s.length || r(E(t));
-  }, [t, a, r, s.length]), /* @__PURE__ */ n(A, { children: e });
+    r(t), l.length || a(E(t));
+  }, [t, r, a, l.length]), /* @__PURE__ */ n(A, { children: e });
 }
 function xe({ children: e, className: t }) {
   return /* @__PURE__ */ n(
@@ -149,21 +149,21 @@ function ge(e) {
 }
 function ve(e, t) {
   if (!t) return !0;
-  const { resource: a, action: r } = ge(t), s = e[a];
-  return s != null && s.length ? s.includes(r) || s.includes("*") : !1;
+  const { resource: r, action: a } = ge(t), l = e[r];
+  return l != null && l.length ? l.includes(a) || l.includes("*") : !1;
 }
 function D(e, t) {
-  return e.filter((a) => ve(t, a.permission)).map((a) => ({
-    ...a,
-    children: a.children ? D(a.children, t) : void 0
-  })).filter((a) => {
-    var r;
-    return !((r = a.children) != null && r.length) || a.children.length > 0 || a.path;
+  return e.filter((r) => ve(t, r.permission)).map((r) => ({
+    ...r,
+    children: r.children ? D(r.children, t) : void 0
+  })).filter((r) => {
+    var a;
+    return !((a = r.children) != null && a.length) || r.children.length > 0 || r.path;
   });
 }
-function X({ label: e, children: t, collapsed: a, className: r }) {
-  return /* @__PURE__ */ o("div", { className: u("mb-4", r), children: [
-    e && !a && /* @__PURE__ */ n("p", { className: "mb-2 px-3 text-[11px] font-semibold uppercase tracking-wider text-admin-muted", children: e }),
+function X({ label: e, children: t, collapsed: r, className: a }) {
+  return /* @__PURE__ */ o("div", { className: u("mb-4", a), children: [
+    e && !r && /* @__PURE__ */ n("p", { className: "mb-2 px-3 text-[11px] font-semibold uppercase tracking-wider text-admin-muted", children: e }),
     /* @__PURE__ */ n("ul", { className: "space-y-0.5", children: t })
   ] });
 }
@@ -173,19 +173,19 @@ function z(e, t) {
 function R({
   item: e,
   collapsed: t = !1,
-  depth: a = 0,
-  activePath: r = "/",
-  onNavigate: s,
-  LinkComponent: l,
+  depth: r = 0,
+  activePath: a = "/",
+  onNavigate: l,
+  LinkComponent: s,
   onItemClick: i
 }) {
-  var x, S;
-  const d = !!((x = e.children) != null && x.length), c = e.path ? z(e.path, r) : !1, b = (S = e.children) == null ? void 0 : S.some((g) => g.path && z(g.path, r)), [f, v] = w(c || b), h = e.icon, m = u(
+  var g, S;
+  const d = !!((g = e.children) != null && g.length), c = e.path ? z(e.path, a) : !1, b = (S = e.children) == null ? void 0 : S.some((x) => x.path && z(x.path, a)), [f, v] = w(c || b), h = e.icon, m = u(
     "group flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-admin-primary",
     c || b ? "bg-admin-primary text-white shadow-sm" : "text-admin-muted hover:bg-admin-bg hover:text-admin-text",
     e.disabled && "pointer-events-none opacity-50",
-    a > 0 && "text-[13px] py-2"
+    r > 0 && "text-[13px] py-2"
   ), p = /* @__PURE__ */ o(A, { children: [
     h && /* @__PURE__ */ n(
       h,
@@ -216,12 +216,12 @@ function R({
     ] })
   ] }), N = () => {
     if (d) {
-      v((g) => !g);
+      v((x) => !x);
       return;
     }
-    e.path && (s == null || s(e.path), i == null || i());
-  }, C = e.path && !d && l ? /* @__PURE__ */ n(
-    l,
+    e.path && (l == null || l(e.path), i == null || i());
+  }, C = e.path && !d && s ? /* @__PURE__ */ n(
+    s,
     {
       to: e.path,
       className: m,
@@ -233,30 +233,30 @@ function R({
   ) : /* @__PURE__ */ n("button", { type: "button", className: m, onClick: N, disabled: e.disabled, children: p });
   return /* @__PURE__ */ o("li", { children: [
     C,
-    d && f && !t && /* @__PURE__ */ n("ul", { className: "mt-1 space-y-0.5 border-l border-admin-border ml-5 pl-2", children: e.children.map((g) => /* @__PURE__ */ n(
+    d && f && !t && /* @__PURE__ */ n("ul", { className: "mt-1 space-y-0.5 border-l border-admin-border ml-5 pl-2", children: e.children.map((x) => /* @__PURE__ */ n(
       R,
       {
-        item: g,
+        item: x,
         collapsed: t,
-        depth: a + 1,
-        activePath: r,
-        onNavigate: s,
-        LinkComponent: l,
+        depth: r + 1,
+        activePath: a,
+        onNavigate: l,
+        LinkComponent: s,
         onItemClick: i
       },
-      g.label + (g.path ?? "")
+      x.label + (x.path ?? "")
     )) })
   ] });
 }
 function ye({
   items: e,
   appName: t = "Admin",
-  appLogo: a,
-  onNavigate: r,
-  activePath: s,
-  LinkComponent: l
+  appLogo: r,
+  onNavigate: a,
+  activePath: l,
+  LinkComponent: s
 }) {
-  const { mobileOpen: i, closeMobile: d } = O(), { permissions: c, activePath: b } = k(), f = s ?? b, v = D(e, c);
+  const { mobileOpen: i, closeMobile: d } = O(), { permissions: c, activePath: b } = k(), f = l ?? b, v = D(e, c);
   if (M(() => {
     if (!i) return;
     const m = (p) => {
@@ -267,7 +267,7 @@ function ye({
     };
   }, [i, d]), !i) return null;
   const h = (m) => {
-    r == null || r(m), d();
+    a == null || a(m), d();
   };
   return /* @__PURE__ */ o("div", { className: "fixed inset-0 z-50 lg:hidden", role: "dialog", "aria-modal": "true", children: [
     /* @__PURE__ */ n(
@@ -289,7 +289,7 @@ function ye({
         children: [
           /* @__PURE__ */ o("div", { className: "flex h-16 items-center justify-between border-b border-admin-border px-4", children: [
             /* @__PURE__ */ o("div", { className: "flex items-center gap-3", children: [
-              a ?? /* @__PURE__ */ n("div", { className: "flex h-9 w-9 items-center justify-center rounded-xl bg-admin-primary text-sm font-bold text-white", children: t.charAt(0) }),
+              r ?? /* @__PURE__ */ n("div", { className: "flex h-9 w-9 items-center justify-center rounded-xl bg-admin-primary text-sm font-bold text-white", children: t.charAt(0) }),
               /* @__PURE__ */ n("span", { className: "font-semibold text-admin-text", children: t })
             ] }),
             /* @__PURE__ */ n(
@@ -309,7 +309,7 @@ function ye({
               item: m,
               activePath: f,
               onNavigate: h,
-              LinkComponent: l,
+              LinkComponent: s,
               onItemClick: d
             },
             m.label + (m.path ?? "")
@@ -322,39 +322,39 @@ function ye({
 function we({
   items: e,
   className: t,
-  LinkComponent: a,
-  onNavigate: r
+  LinkComponent: r,
+  onNavigate: a
 }) {
   if (!e.length) return null;
-  const s = (l, i) => {
+  const l = (s, i) => {
     const d = u(
       "text-sm transition-colors",
       i ? "font-medium text-admin-text" : "text-admin-muted hover:text-admin-text"
     );
-    return !l.path || i ? /* @__PURE__ */ n("span", { className: d, children: l.label }) : a ? /* @__PURE__ */ n(a, { to: l.path, className: d, children: l.label }) : /* @__PURE__ */ n("button", { type: "button", className: d, onClick: () => r == null ? void 0 : r(l.path), children: l.label });
+    return !s.path || i ? /* @__PURE__ */ n("span", { className: d, children: s.label }) : r ? /* @__PURE__ */ n(r, { to: s.path, className: d, children: s.label }) : /* @__PURE__ */ n("button", { type: "button", className: d, onClick: () => a == null ? void 0 : a(s.path), children: s.label });
   };
   return /* @__PURE__ */ o("nav", { "aria-label": "Breadcrumb", className: u("flex items-center gap-1.5", t), children: [
     /* @__PURE__ */ n(ne, { className: "h-4 w-4 text-admin-muted shrink-0", "aria-hidden": !0 }),
-    e.map((l, i) => {
+    e.map((s, i) => {
       const d = i === e.length - 1;
       return /* @__PURE__ */ o("span", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ n(ae, { className: "h-3.5 w-3.5 text-admin-muted", "aria-hidden": !0 }),
-        s(l, d)
-      ] }, `${l.label}-${i}`);
+        /* @__PURE__ */ n(re, { className: "h-3.5 w-3.5 text-admin-muted", "aria-hidden": !0 }),
+        l(s, d)
+      ] }, `${s.label}-${i}`);
     })
   ] });
 }
 function Ne({
   placeholder: e = "Search...",
   onSearch: t,
-  className: a
+  className: r
 }) {
-  const [r, s] = w("");
+  const [a, l] = w("");
   return /* @__PURE__ */ o("form", { onSubmit: (i) => {
-    i.preventDefault(), t == null || t(r.trim());
-  }, className: u("relative w-full max-w-md", a), children: [
+    i.preventDefault(), t == null || t(a.trim());
+  }, className: u("relative w-full max-w-md", r), children: [
     /* @__PURE__ */ n(
-      re,
+      ae,
       {
         className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-admin-muted",
         "aria-hidden": !0
@@ -364,8 +364,8 @@ function Ne({
       "input",
       {
         type: "search",
-        value: r,
-        onChange: (i) => s(i.target.value),
+        value: a,
+        onChange: (i) => l(i.target.value),
         placeholder: e,
         className: u(
           "h-10 w-full rounded-xl border border-admin-border bg-admin-bg pl-10 pr-4 text-sm text-admin-text",
@@ -377,32 +377,32 @@ function Ne({
   ] });
 }
 function ke({ notifications: e = [], className: t }) {
-  const [a, r] = w(!1), s = T(null), l = e.filter((i) => !i.read).length;
+  const [r, a] = w(!1), l = T(null), s = e.filter((i) => !i.read).length;
   return M(() => {
     const i = (d) => {
-      s.current && !s.current.contains(d.target) && r(!1);
+      l.current && !l.current.contains(d.target) && a(!1);
     };
     return document.addEventListener("mousedown", i), () => document.removeEventListener("mousedown", i);
-  }, []), /* @__PURE__ */ o("div", { ref: s, className: u("relative", t), children: [
+  }, []), /* @__PURE__ */ o("div", { ref: l, className: u("relative", t), children: [
     /* @__PURE__ */ o(
       "button",
       {
         type: "button",
-        onClick: () => r((i) => !i),
+        onClick: () => a((i) => !i),
         className: u(
           "relative inline-flex h-9 w-9 items-center justify-center rounded-lg border border-admin-border",
           "bg-admin-surface text-admin-muted transition-colors hover:bg-admin-bg hover:text-admin-text",
           "focus-visible:ring-2 focus-visible:ring-admin-primary"
         ),
-        "aria-label": `Notifications${l ? `, ${l} unread` : ""}`,
-        "aria-expanded": a,
+        "aria-label": `Notifications${s ? `, ${s} unread` : ""}`,
+        "aria-expanded": r,
         children: [
           /* @__PURE__ */ n(ie, { className: "h-4 w-4", "aria-hidden": !0 }),
-          l > 0 && /* @__PURE__ */ n("span", { className: "absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-bold text-white", children: l > 9 ? "9+" : l })
+          s > 0 && /* @__PURE__ */ n("span", { className: "absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-bold text-white", children: s > 9 ? "9+" : s })
         ]
       }
     ),
-    a && /* @__PURE__ */ o("div", { className: "absolute right-0 top-full z-50 mt-2 w-80 rounded-xl border border-admin-border bg-admin-surface shadow-admin-lg animate-fade-in", children: [
+    r && /* @__PURE__ */ o("div", { className: "absolute right-0 top-full z-50 mt-2 w-80 rounded-xl border border-admin-border bg-admin-surface shadow-admin-lg animate-fade-in", children: [
       /* @__PURE__ */ n("div", { className: "border-b border-admin-border px-4 py-3", children: /* @__PURE__ */ n("p", { className: "text-sm font-semibold text-admin-text", children: "Notifications" }) }),
       /* @__PURE__ */ n("ul", { className: "max-h-72 overflow-y-auto p-2", children: e.length === 0 ? /* @__PURE__ */ n("li", { className: "px-3 py-6 text-center text-sm text-admin-muted", children: "No notifications" }) : e.map((i) => /* @__PURE__ */ o(
         "li",
@@ -423,20 +423,20 @@ function ke({ notifications: e = [], className: t }) {
   ] });
 }
 function Ce() {
-  const { darkMode: e, toggleDarkMode: t, setDarkMode: a } = k();
+  const { darkMode: e, toggleDarkMode: t, setDarkMode: r } = k();
   return {
     isDark: e,
     toggle: t,
-    setDarkMode: a
+    setDarkMode: r
   };
 }
 function Se({ className: e }) {
-  const { isDark: t, toggle: a } = Ce();
+  const { isDark: t, toggle: r } = Ce();
   return /* @__PURE__ */ n(
     "button",
     {
       type: "button",
-      onClick: a,
+      onClick: r,
       className: u(
         "inline-flex h-9 w-9 items-center justify-center rounded-lg border border-admin-border",
         "bg-admin-surface text-admin-muted transition-colors hover:bg-admin-bg hover:text-admin-text",
@@ -444,30 +444,30 @@ function Se({ className: e }) {
         e
       ),
       "aria-label": t ? "Switch to light mode" : "Switch to dark mode",
-      children: t ? /* @__PURE__ */ n(le, { className: "h-4 w-4", "aria-hidden": !0 }) : /* @__PURE__ */ n(se, { className: "h-4 w-4", "aria-hidden": !0 })
+      children: t ? /* @__PURE__ */ n(se, { className: "h-4 w-4", "aria-hidden": !0 }) : /* @__PURE__ */ n(le, { className: "h-4 w-4", "aria-hidden": !0 })
     }
   );
 }
-function Me({ user: e, onLogout: t, onSettings: a, className: r }) {
-  const [s, l] = w(!1), i = T(null);
+function Me({ user: e, onLogout: t, onSettings: r, className: a }) {
+  const [l, s] = w(!1), i = T(null);
   M(() => {
     const c = (b) => {
-      i.current && !i.current.contains(b.target) && l(!1);
+      i.current && !i.current.contains(b.target) && s(!1);
     };
     return document.addEventListener("mousedown", c), () => document.removeEventListener("mousedown", c);
   }, []);
   const d = e.name.split(" ").map((c) => c[0]).join("").slice(0, 2).toUpperCase();
-  return /* @__PURE__ */ o("div", { ref: i, className: u("relative", r), children: [
+  return /* @__PURE__ */ o("div", { ref: i, className: u("relative", a), children: [
     /* @__PURE__ */ o(
       "button",
       {
         type: "button",
-        onClick: () => l((c) => !c),
+        onClick: () => s((c) => !c),
         className: u(
           "flex items-center gap-2 rounded-xl border border-admin-border bg-admin-surface px-2 py-1.5",
           "transition-colors hover:bg-admin-bg focus-visible:ring-2 focus-visible:ring-admin-primary"
         ),
-        "aria-expanded": s,
+        "aria-expanded": l,
         "aria-haspopup": "menu",
         children: [
           e.avatar ? /* @__PURE__ */ n("img", { src: e.avatar, alt: "", className: "h-8 w-8 rounded-lg object-cover" }) : /* @__PURE__ */ n("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-admin-primary text-xs font-semibold text-white", children: d }),
@@ -479,7 +479,7 @@ function Me({ user: e, onLogout: t, onSettings: a, className: r }) {
         ]
       }
     ),
-    s && /* @__PURE__ */ o(
+    l && /* @__PURE__ */ o(
       "div",
       {
         role: "menu",
@@ -492,7 +492,7 @@ function Me({ user: e, onLogout: t, onSettings: a, className: r }) {
               role: "menuitem",
               className: "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-admin-text hover:bg-admin-bg",
               onClick: () => {
-                a == null || a(), l(!1);
+                r == null || r(), s(!1);
               },
               children: [
                 /* @__PURE__ */ n(de, { className: "h-4 w-4 text-admin-muted" }),
@@ -520,7 +520,7 @@ function Me({ user: e, onLogout: t, onSettings: a, className: r }) {
               role: "menuitem",
               className: "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-red-600 hover:bg-red-50 dark:hover:bg-red-950/30",
               onClick: () => {
-                t == null || t(), l(!1);
+                t == null || t(), s(!1);
               },
               children: [
                 /* @__PURE__ */ n(ce, { className: "h-4 w-4" }),
@@ -536,10 +536,10 @@ function Me({ user: e, onLogout: t, onSettings: a, className: r }) {
 function Pe({
   user: e,
   notifications: t = [],
-  onSearch: a,
-  searchPlaceholder: r = "Search...",
-  showSearch: s = !0,
-  className: l,
+  onSearch: r,
+  searchPlaceholder: a = "Search...",
+  showSearch: l = !0,
+  className: s,
   breadcrumbs: i = [],
   onMenuClick: d,
   sidebarCollapsed: c,
@@ -551,7 +551,7 @@ function Pe({
       className: u(
         "sticky top-0 z-40 flex h-16 shrink-0 items-center gap-4 border-b border-admin-border",
         "admin-glass bg-admin-surface px-4 lg:px-6",
-        l
+        s
       ),
       children: [
         /* @__PURE__ */ n(
@@ -576,7 +576,7 @@ function Pe({
         ),
         /* @__PURE__ */ n("div", { className: "hidden min-w-0 flex-1 md:block", children: /* @__PURE__ */ n(we, { items: i }) }),
         /* @__PURE__ */ o("div", { className: "flex flex-1 items-center justify-end gap-2 sm:gap-3", children: [
-          s && /* @__PURE__ */ n("div", { className: "hidden flex-1 sm:flex sm:max-w-md", children: /* @__PURE__ */ n(Ne, { placeholder: r, onSearch: a }) }),
+          l && /* @__PURE__ */ n("div", { className: "hidden flex-1 sm:flex sm:max-w-md", children: /* @__PURE__ */ n(Ne, { placeholder: a, onSearch: r }) }),
           /* @__PURE__ */ n(Se, {}),
           /* @__PURE__ */ n(ke, { notifications: t }),
           e && /* @__PURE__ */ n(Me, { user: e })
@@ -588,23 +588,24 @@ function Pe({
 function Le({
   items: e,
   collapsed: t,
-  appName: a = "Admin",
-  appLogo: r,
-  className: s,
-  onNavigate: l,
+  appName: r = "Admin",
+  appLogo: a,
+  className: l,
+  onNavigate: s,
   activePath: i,
   LinkComponent: d
 }) {
-  const { collapsed: c, toggle: b, closeMobile: f } = O(), { permissions: v, activePath: h } = k(), m = t ?? c, p = i ?? h, N = D(e, v), C = (x) => {
-    l == null || l(x), f();
+  const { collapsed: c, toggle: b, closeMobile: f } = O(), { permissions: v, activePath: h } = k(), m = t ?? c, p = i ?? h, N = D(e, v), C = (g) => {
+    s == null || s(g), f();
   };
   return /* @__PURE__ */ o(
     "aside",
     {
       className: u(
-        "hidden lg:flex flex-col border-r border-admin-border bg-admin-surface transition-all duration-300 ease-in-out",
+        "hidden lg:flex shrink-0 flex-col border-r border-admin-border bg-admin-surface",
+        "h-screen sticky top-0 transition-[width] duration-300 ease-in-out",
         m ? "w-[var(--admin-sidebar-collapsed)]" : "w-[var(--admin-sidebar-width)]",
-        s
+        l
       ),
       "aria-label": "Sidebar navigation",
       children: [
@@ -617,8 +618,8 @@ function Le({
             ),
             children: [
               /* @__PURE__ */ o("div", { className: u("flex items-center gap-3 min-w-0", m && "justify-center"), children: [
-                r ?? /* @__PURE__ */ n("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-admin-primary text-sm font-bold text-white shadow-admin", children: a.charAt(0) }),
-                !m && /* @__PURE__ */ n("span", { className: "truncate text-base font-semibold text-admin-text", children: a })
+                a ?? /* @__PURE__ */ n("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-admin-primary text-sm font-bold text-white shadow-admin", children: r.charAt(0) }),
+                !m && /* @__PURE__ */ n("span", { className: "truncate text-base font-semibold text-admin-text", children: r })
               ] }),
               !m && /* @__PURE__ */ n(
                 "button",
@@ -643,16 +644,16 @@ function Le({
             children: /* @__PURE__ */ n(J, { className: "h-4 w-4" })
           }
         ) }),
-        /* @__PURE__ */ n("nav", { className: "flex-1 overflow-y-auto p-3", children: /* @__PURE__ */ n(X, { collapsed: m, children: N.map((x) => /* @__PURE__ */ n(
+        /* @__PURE__ */ n("nav", { className: "flex-1 overflow-y-auto p-3", children: /* @__PURE__ */ n(X, { collapsed: m, children: N.map((g) => /* @__PURE__ */ n(
           R,
           {
-            item: x,
+            item: g,
             collapsed: m,
             activePath: p,
             onNavigate: C,
             LinkComponent: d
           },
-          x.label + (x.path ?? "")
+          g.label + (g.path ?? "")
         )) }) })
       ]
     }
@@ -661,10 +662,10 @@ function Le({
 function F({
   children: e,
   sidebarItems: t,
-  appName: a = "Admin",
-  appLogo: r,
-  user: s,
-  notifications: l = [],
+  appName: r = "Admin",
+  appLogo: a,
+  user: l,
+  notifications: s = [],
   footer: i,
   showFooter: d = !0,
   showSearch: c = !0,
@@ -678,9 +679,9 @@ function F({
   enableRouter: C = !1
 }) {
   const {
-    sidebarCollapsed: x,
+    sidebarCollapsed: g,
     toggleSidebar: S,
-    toggleMobile: g,
+    toggleMobile: x,
     breadcrumbs: P,
     setBreadcrumbs: B,
     activePath: y,
@@ -689,94 +690,96 @@ function F({
     Y(j), v || B(E(j)), p == null || p(j), _();
   };
   return /* @__PURE__ */ o("div", { className: "admin-layout-root min-h-screen bg-admin-bg text-admin-text", children: [
-    /* @__PURE__ */ n(
-      Le,
-      {
-        items: t,
-        appName: a,
-        appLogo: r,
-        activePath: $,
-        onNavigate: q,
-        LinkComponent: N
-      }
-    ),
     /* @__PURE__ */ n(
       ye,
       {
         items: t,
-        appName: a,
-        appLogo: r,
+        appName: r,
+        appLogo: a,
         activePath: $,
         onNavigate: q,
         LinkComponent: N
       }
     ),
-    /* @__PURE__ */ o("div", { className: u("flex min-h-screen flex-col transition-all duration-300", x ? "lg:pl-[var(--admin-sidebar-collapsed)]" : "lg:pl-[var(--admin-sidebar-width)]"), children: [
+    /* @__PURE__ */ o("div", { className: "flex min-h-screen w-full", children: [
       /* @__PURE__ */ n(
-        Pe,
+        Le,
         {
-          user: s,
-          notifications: l,
-          onSearch: f,
-          searchPlaceholder: b,
-          showSearch: c,
-          breadcrumbs: K,
-          onMenuClick: g,
-          sidebarCollapsed: x,
-          onToggleSidebar: S
+          items: t,
+          appName: r,
+          appLogo: a,
+          activePath: $,
+          onNavigate: q,
+          LinkComponent: N
         }
       ),
-      /* @__PURE__ */ n("main", { className: u("flex-1 p-4 lg:p-6", h), children: e }),
-      d && /* @__PURE__ */ n(xe, { children: i })
+      /* @__PURE__ */ o("div", { className: "flex min-h-screen min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ n(
+          Pe,
+          {
+            user: l,
+            notifications: s,
+            onSearch: f,
+            searchPlaceholder: b,
+            showSearch: c,
+            breadcrumbs: K,
+            onMenuClick: x,
+            sidebarCollapsed: g,
+            onToggleSidebar: S
+          }
+        ),
+        /* @__PURE__ */ n("main", { className: u("flex-1 p-4 lg:p-6", h), children: e }),
+        d && /* @__PURE__ */ n(xe, { children: i })
+      ] })
     ] })
   ] });
 }
-function De(e) {
+function Ee(e) {
   const {
     storageKey: t = "rqdhw3n-admin-layout",
-    defaultCollapsed: a = !1,
-    initialDarkMode: r = !1,
-    permissions: s = {},
-    breadcrumbs: l = [],
+    defaultCollapsed: r = !1,
+    initialDarkMode: a = !1,
+    permissions: l = {},
+    breadcrumbs: s = [],
     activePath: i = "/",
     enableRouter: d = !1,
     children: c,
     ...b
   } = e, f = U(
-    () => l.length ? l : E(i),
-    [l, i]
+    () => s.length ? s : E(i),
+    [s, i]
   );
   return /* @__PURE__ */ n(
     he,
     {
       storageKey: t,
-      defaultCollapsed: a,
-      permissions: s,
+      defaultCollapsed: r,
+      permissions: l,
       initialBreadcrumbs: f,
       initialActivePath: i,
-      initialDarkMode: r,
+      initialDarkMode: a,
       children: d ? /* @__PURE__ */ n(pe, { children: /* @__PURE__ */ n(F, { ...b, enableRouter: d, children: c }) }) : /* @__PURE__ */ n(F, { ...b, enableRouter: d, children: c })
     }
   );
 }
-function Re({ to: e, className: t, children: a, onClick: r }) {
-  return /* @__PURE__ */ n(ee, { to: e, className: t, onClick: r, children: a });
+function De({ to: e, className: t, children: r, onClick: a }) {
+  return /* @__PURE__ */ n(ee, { to: e, className: t, onClick: a, children: r });
 }
-function $e() {
+function Re() {
   return k();
 }
-function qe() {
-  const { breadcrumbs: e, setBreadcrumbs: t } = k(), a = L(
-    (r) => t(r),
+function $e() {
+  const { breadcrumbs: e, setBreadcrumbs: t } = k(), r = L(
+    (a) => t(a),
     [t]
   );
   return {
     items: e,
-    setBreadcrumbs: a
+    setBreadcrumbs: r
   };
 }
 export {
-  De as AdminLayout,
+  Ee as AdminLayout,
   pe as AdminLayoutRouterSync,
   we as Breadcrumbs,
   xe as Footer,
@@ -785,7 +788,7 @@ export {
   Pe as Navbar,
   Ne as NavbarSearch,
   ke as NotificationMenu,
-  Re as RouterLink,
+  De as RouterLink,
   Le as Sidebar,
   X as SidebarGroup,
   R as SidebarItem,
@@ -795,10 +798,10 @@ export {
   D as filterSidebarByPermissions,
   E as generateBreadcrumbsFromPath,
   ve as hasPermission,
-  qe as useBreadcrumbs,
+  $e as useBreadcrumbs,
   Ce as useDarkMode,
   k as useLayoutContext,
-  $e as useLayoutState,
+  Re as useLayoutState,
   O as useSidebar
 };
 //# sourceMappingURL=index.js.map