@sikka/hawa 0.36.0-next → 0.36.2-next

package/dist/index.mjs

@@ -1727,7 +1727,7 @@ var DialogContent = React14.forwardRef(({ className, children, persist, hideClos
     },
     ref,
     className: cn(
-      "hawa-fixed hawa-left-[50%] hawa-top-[50%] hawa-z-50 hawa-grid hawa-w-full hawa-max-w-lg hawa-translate-x-[-50%] hawa-translate-y-[-50%] hawa-gap-4 hawa-border hawa-bg-background hawa-p-6 hawa-shadow-lg hawa-transition-all hawa-duration-200 data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[state=closed]:hawa-slide-out-to-left-1/2 data-[state=closed]:hawa-slide-out-to-top-[48%] data-[state=open]:hawa-slide-in-from-left-1/2 data-[state=open]:hawa-slide-in-from-top-[48%] hawa-rounded md:hawa-w-full",
+      "hawa-fixed hawa-left-[50%] hawa-top-[50%] hawa-z-50 hawa-grid hawa-w-[90%] hawa-max-w-lg hawa-translate-x-[-50%] hawa-translate-y-[-50%] hawa-gap-4 hawa-border hawa-bg-background hawa-p-6 hawa-shadow-lg hawa-transition-all hawa-duration-200 data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[state=closed]:hawa-slide-out-to-left-1/2 data-[state=closed]:hawa-slide-out-to-top-[48%] data-[state=open]:hawa-slide-in-from-left-1/2 data-[state=open]:hawa-slide-in-from-top-[48%] hawa-rounded md:hawa-w-full",
       className
     ),
     ...props
@@ -2685,7 +2685,7 @@ TableHeader.displayName = "TableHeader";
 TableCaption.displayName = "TableCaption";
 
 // elements/dataTable/DataTable.tsx
-var LOCAL_STORAGE_KEY = "datatable-column-visibility";
+var LOCAL_STORAGE_KEY = "@sikka/hawa/data-table-columns";
 var DataTable = ({
   columns,
   data,
@@ -9014,6 +9014,8 @@ var Navbar = ({
 
 // layout/appLayout/AppLayout.tsx
 import React76, { useEffect as useEffect29, useState as useState36 } from "react";
+import * as Dialog2 from "@radix-ui/react-dialog";
+var LOCAL_STORAGE_KEY2 = "@sikka/hawa/keep-drawer-open";
 var AppLayout = ({
   profileMenuWidth = "default",
   DrawerFooterActions,
@@ -9024,14 +9026,18 @@ var AppLayout = ({
   drawerSize = "md",
   currentPage,
   clickedItem,
-  setKeepOpen,
-  keepOpen,
   DrawerLinkComponent,
   MenuLinkComponent,
   onAvatarClick,
   ...props
 }) => {
   var _a, _b;
+  useEffect29(() => {
+    let isDrawerOpen = localStorage.getItem(LOCAL_STORAGE_KEY2);
+    if (isDrawerOpen === null) {
+      localStorage.setItem(LOCAL_STORAGE_KEY2, JSON.stringify(false));
+    }
+  }, []);
   let closeDrawerWidth = 56;
   let openDrawerWidth = 200;
   let drawerSizeStyle = {
@@ -9047,8 +9053,15 @@ var AppLayout = ({
   const [size, setSize] = useState36(
     typeof window !== "undefined" && window.innerWidth || 1200
   );
-  const [openSideMenu, setOpenSideMenu] = useState36(true);
-  const [keepDrawerOpen, setKeepDrawerOpen] = useState36(keepOpen);
+  const [openSideMenu, setOpenSideMenu] = useState36(() => {
+    const savedState = localStorage.getItem(LOCAL_STORAGE_KEY2);
+    return savedState ? JSON.parse(savedState) : false;
+  });
+  const [container, setContainer] = React76.useState(null);
+  const [keepDrawerOpen, setKeepDrawerOpen] = useState36(() => {
+    const savedState = localStorage.getItem(LOCAL_STORAGE_KEY2);
+    return savedState ? JSON.parse(savedState) : false;
+  });
   const handleClickOutside = () => {
     if (typeof window !== "undefined") {
       if (window.innerWidth < 600) {
@@ -9064,6 +9077,8 @@ var AppLayout = ({
         setSize(window.innerWidth);
         if (window.innerWidth > 600) {
           setKeepDrawerOpen(false);
+        } else {
+          localStorage.setItem(LOCAL_STORAGE_KEY2, JSON.stringify(false));
         }
       };
       resize();
@@ -9074,12 +9089,16 @@ var AppLayout = ({
     }
   }, []);
   useEffect29(() => {
-    setKeepDrawerOpen(keepOpen);
-  }, [setKeepOpen]);
+    setKeepDrawerOpen(() => {
+      const savedState = localStorage.getItem(LOCAL_STORAGE_KEY2);
+      return savedState ? JSON.parse(savedState) : true;
+    });
+  }, [setKeepDrawerOpen]);
   useEffect29(() => {
     if (size > 600) {
       setOpenSideMenu(keepDrawerOpen);
     } else {
+      setKeepDrawerOpen(false);
       setOpenSideMenu(false);
     }
   }, [size, keepDrawerOpen]);
@@ -9089,7 +9108,7 @@ var AppLayout = ({
     {
       dir: direction,
       className: cn(
-        "hawa-fixed hawa-end-0 hawa-start-0 hawa-top-0 hawa-z-0 hawa-flex hawa-h-14 hawa-w-full hawa-items-center hawa-justify-between hawa-bg-primary-foreground hawa-p-2",
+        "hawa-fixed hawa-end-0 hawa-start-0 hawa-top-0 hawa-z-10 hawa-flex hawa-h-14 hawa-w-full hawa-items-center hawa-justify-between hawa-bg-primary-foreground hawa-p-2",
         bordered && "hawa-border-b-[1px]"
       )
     },
@@ -9117,7 +9136,7 @@ var AppLayout = ({
           "div",
           {
             onClick: () => setOpenSideMenu(true),
-            className: "hawa-z-40 hawa-mx-1 hawa-cursor-pointer  hawa-rounded hawa-p-2  hawa-transition-all hover:hawa-bg-gray-100"
+            className: "hawa-z-40 hawa-mx-1 hawa-cursor-pointer hawa-rounded hawa-p-2  hawa-transition-all "
           },
           /* @__PURE__ */ React76.createElement(MenuIcon, null)
         ),
@@ -9162,13 +9181,13 @@ var AppLayout = ({
         )
       }
     ))
-  ), /* @__PURE__ */ React76.createElement(
+  ), /* @__PURE__ */ React76.createElement("div", { ref: setContainer }, /* @__PURE__ */ React76.createElement(
     "div",
     {
       className: cn(
-        "hawa-fixed hawa-z-0 hawa-flex hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all hawa-top-0 hawa-h-[calc(100dvh)] hawa-bg-primary-foreground",
+        "hawa-fixed hawa-z-40 hawa-flex hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all hawa-top-0 hawa-h-[calc(100dvh)] hawa-bg-primary-foreground",
         isRTL ? "hawa-right-0" : "hawa-left-0",
-        bordered ? direction === "rtl" ? "hawa-border-s-[1px]" : "hawa-border-e-[1px]" : ""
+        bordered ? size > 600 ? direction === "rtl" ? "hawa-border-s-[1px]" : "hawa-border-e-[1px]" : "" : ""
       ),
       style: {
         width: size > 600 ? openSideMenu ? `${drawerSizeStyle["opened"][drawerSize]}px` : `${drawerSizeStyle["closed"][drawerSize]}px` : openSideMenu ? `${drawerSizeStyle["opened"][drawerSize]}px` : "0px"
@@ -9279,9 +9298,10 @@ var AppLayout = ({
             size: "smallIcon",
             onClick: () => {
               const newKeepOpenState = !keepDrawerOpen;
-              if (props.onDrawerExpand) {
-                props.onDrawerExpand(newKeepOpenState);
-              }
+              localStorage.setItem(
+                LOCAL_STORAGE_KEY2,
+                JSON.stringify(newKeepOpenState)
+              );
               setKeepDrawerOpen(newKeepOpenState);
             }
           },
@@ -9307,10 +9327,17 @@ var AppLayout = ({
         )
       ) : null
     )
+  )), /* @__PURE__ */ React76.createElement(
+    Dialog2.Root,
+    {
+      open: size < 600 && openSideMenu,
+      onOpenChange: setOpenSideMenu
+    },
+    /* @__PURE__ */ React76.createElement(Dialog2.Portal, { container }, /* @__PURE__ */ React76.createElement(Dialog2.Overlay, { className: "hawa-fixed hawa-inset-0  hawa-bg-foreground/80 hawa-backdrop-blur-sm data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out hawa-z-10  data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0" }))
   ), /* @__PURE__ */ React76.createElement(
     "div",
     {
-      className: "hawa-fixed -hawa-z-10 hawa-overflow-y-auto hawa-transition-all",
+      className: "hawa-fixed hawa-overflow-y-auto  hawa-transition-all hawa-z-0",
       style: isRTL ? {
         left: "0px",
         top: props.topBar ? "56px" : "0px",

package/dist/layout/index.d.mts

@@ -141,12 +141,6 @@ type AppLayoutTypes$1 = {
      * - 'parent': Inherits width from parent element.
      */
     profileMenuWidth?: "default" | "sm" | "lg" | "parent";
-    /** Event handler for drawer expansion. */
-    onDrawerExpand?: (e: any) => void;
-    /** Specifies whether to keep the drawer open. */
-    keepOpen: boolean;
-    /** The method used to control whether the drawer is expanded or not. */
-    setKeepOpen: (value: boolean) => void;
     /** Specifies additional actions for the drawer footer. */
     DrawerFooterActions?: any;
     /** Specifies the item that was clicked. */

package/dist/layout/index.d.ts

@@ -141,12 +141,6 @@ type AppLayoutTypes$1 = {
      * - 'parent': Inherits width from parent element.
      */
     profileMenuWidth?: "default" | "sm" | "lg" | "parent";
-    /** Event handler for drawer expansion. */
-    onDrawerExpand?: (e: any) => void;
-    /** Specifies whether to keep the drawer open. */
-    keepOpen: boolean;
-    /** The method used to control whether the drawer is expanded or not. */
-    setKeepOpen: (value: boolean) => void;
     /** Specifies additional actions for the drawer footer. */
     DrawerFooterActions?: any;
     /** Specifies the item that was clicked. */

package/dist/layout/index.js

@@ -686,6 +686,9 @@ function useClickOutside(handler, events, nodes) {
   return ref;
 }
 
+// layout/appLayout/AppLayout.tsx
+var Dialog = __toESM(require("@radix-ui/react-dialog"));
+
 // elements/button/Button.tsx
 var React12 = __toESM(require("react"));
 var import_class_variance_authority = require("class-variance-authority");
@@ -1517,6 +1520,7 @@ var MenuIcon = () => /* @__PURE__ */ import_react13.default.createElement(
 );
 
 // layout/appLayout/AppLayout.tsx
+var LOCAL_STORAGE_KEY = "@sikka/hawa/keep-drawer-open";
 var AppLayout = ({
   profileMenuWidth = "default",
   DrawerFooterActions,
@@ -1527,14 +1531,18 @@ var AppLayout = ({
   drawerSize = "md",
   currentPage,
   clickedItem,
-  setKeepOpen,
-  keepOpen,
   DrawerLinkComponent,
   MenuLinkComponent,
   onAvatarClick,
   ...props
 }) => {
   var _a, _b;
+  (0, import_react14.useEffect)(() => {
+    let isDrawerOpen = localStorage.getItem(LOCAL_STORAGE_KEY);
+    if (isDrawerOpen === null) {
+      localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(false));
+    }
+  }, []);
   let closeDrawerWidth = 56;
   let openDrawerWidth = 200;
   let drawerSizeStyle = {
@@ -1550,8 +1558,15 @@ var AppLayout = ({
   const [size, setSize] = (0, import_react14.useState)(
     typeof window !== "undefined" && window.innerWidth || 1200
   );
-  const [openSideMenu, setOpenSideMenu] = (0, import_react14.useState)(true);
-  const [keepDrawerOpen, setKeepDrawerOpen] = (0, import_react14.useState)(keepOpen);
+  const [openSideMenu, setOpenSideMenu] = (0, import_react14.useState)(() => {
+    const savedState = localStorage.getItem(LOCAL_STORAGE_KEY);
+    return savedState ? JSON.parse(savedState) : false;
+  });
+  const [container, setContainer] = import_react14.default.useState(null);
+  const [keepDrawerOpen, setKeepDrawerOpen] = (0, import_react14.useState)(() => {
+    const savedState = localStorage.getItem(LOCAL_STORAGE_KEY);
+    return savedState ? JSON.parse(savedState) : false;
+  });
   const handleClickOutside = () => {
     if (typeof window !== "undefined") {
       if (window.innerWidth < 600) {
@@ -1567,6 +1582,8 @@ var AppLayout = ({
         setSize(window.innerWidth);
         if (window.innerWidth > 600) {
           setKeepDrawerOpen(false);
+        } else {
+          localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(false));
         }
       };
       resize();
@@ -1577,12 +1594,16 @@ var AppLayout = ({
     }
   }, []);
   (0, import_react14.useEffect)(() => {
-    setKeepDrawerOpen(keepOpen);
-  }, [setKeepOpen]);
+    setKeepDrawerOpen(() => {
+      const savedState = localStorage.getItem(LOCAL_STORAGE_KEY);
+      return savedState ? JSON.parse(savedState) : true;
+    });
+  }, [setKeepDrawerOpen]);
   (0, import_react14.useEffect)(() => {
     if (size > 600) {
       setOpenSideMenu(keepDrawerOpen);
     } else {
+      setKeepDrawerOpen(false);
       setOpenSideMenu(false);
     }
   }, [size, keepDrawerOpen]);
@@ -1592,7 +1613,7 @@ var AppLayout = ({
     {
       dir: direction,
       className: cn(
-        "hawa-fixed hawa-end-0 hawa-start-0 hawa-top-0 hawa-z-0 hawa-flex hawa-h-14 hawa-w-full hawa-items-center hawa-justify-between hawa-bg-primary-foreground hawa-p-2",
+        "hawa-fixed hawa-end-0 hawa-start-0 hawa-top-0 hawa-z-10 hawa-flex hawa-h-14 hawa-w-full hawa-items-center hawa-justify-between hawa-bg-primary-foreground hawa-p-2",
         bordered && "hawa-border-b-[1px]"
       )
     },
@@ -1620,7 +1641,7 @@ var AppLayout = ({
           "div",
           {
             onClick: () => setOpenSideMenu(true),
-            className: "hawa-z-40 hawa-mx-1 hawa-cursor-pointer  hawa-rounded hawa-p-2  hawa-transition-all hover:hawa-bg-gray-100"
+            className: "hawa-z-40 hawa-mx-1 hawa-cursor-pointer hawa-rounded hawa-p-2  hawa-transition-all "
           },
           /* @__PURE__ */ import_react14.default.createElement(MenuIcon, null)
         ),
@@ -1665,13 +1686,13 @@ var AppLayout = ({
         )
       }
     ))
-  ), /* @__PURE__ */ import_react14.default.createElement(
+  ), /* @__PURE__ */ import_react14.default.createElement("div", { ref: setContainer }, /* @__PURE__ */ import_react14.default.createElement(
     "div",
     {
       className: cn(
-        "hawa-fixed hawa-z-0 hawa-flex hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all hawa-top-0 hawa-h-[calc(100dvh)] hawa-bg-primary-foreground",
+        "hawa-fixed hawa-z-40 hawa-flex hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all hawa-top-0 hawa-h-[calc(100dvh)] hawa-bg-primary-foreground",
         isRTL ? "hawa-right-0" : "hawa-left-0",
-        bordered ? direction === "rtl" ? "hawa-border-s-[1px]" : "hawa-border-e-[1px]" : ""
+        bordered ? size > 600 ? direction === "rtl" ? "hawa-border-s-[1px]" : "hawa-border-e-[1px]" : "" : ""
       ),
       style: {
         width: size > 600 ? openSideMenu ? `${drawerSizeStyle["opened"][drawerSize]}px` : `${drawerSizeStyle["closed"][drawerSize]}px` : openSideMenu ? `${drawerSizeStyle["opened"][drawerSize]}px` : "0px"
@@ -1782,9 +1803,10 @@ var AppLayout = ({
             size: "smallIcon",
             onClick: () => {
               const newKeepOpenState = !keepDrawerOpen;
-              if (props.onDrawerExpand) {
-                props.onDrawerExpand(newKeepOpenState);
-              }
+              localStorage.setItem(
+                LOCAL_STORAGE_KEY,
+                JSON.stringify(newKeepOpenState)
+              );
               setKeepDrawerOpen(newKeepOpenState);
             }
           },
@@ -1810,10 +1832,17 @@ var AppLayout = ({
         )
       ) : null
     )
+  )), /* @__PURE__ */ import_react14.default.createElement(
+    Dialog.Root,
+    {
+      open: size < 600 && openSideMenu,
+      onOpenChange: setOpenSideMenu
+    },
+    /* @__PURE__ */ import_react14.default.createElement(Dialog.Portal, { container }, /* @__PURE__ */ import_react14.default.createElement(Dialog.Overlay, { className: "hawa-fixed hawa-inset-0  hawa-bg-foreground/80 hawa-backdrop-blur-sm data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out hawa-z-10  data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0" }))
   ), /* @__PURE__ */ import_react14.default.createElement(
     "div",
     {
-      className: "hawa-fixed -hawa-z-10 hawa-overflow-y-auto hawa-transition-all",
+      className: "hawa-fixed hawa-overflow-y-auto  hawa-transition-all hawa-z-0",
       style: isRTL ? {
         left: "0px",
         top: props.topBar ? "56px" : "0px",

package/dist/layout/index.mjs

@@ -395,6 +395,8 @@ var Navbar = ({
 
 // layout/appLayout/AppLayout.tsx
 import React5, { useEffect, useState as useState2 } from "react";
+import * as Dialog from "@radix-ui/react-dialog";
+var LOCAL_STORAGE_KEY = "@sikka/hawa/keep-drawer-open";
 var AppLayout = ({
   profileMenuWidth = "default",
   DrawerFooterActions,
@@ -405,14 +407,18 @@ var AppLayout = ({
   drawerSize = "md",
   currentPage,
   clickedItem,
-  setKeepOpen,
-  keepOpen,
   DrawerLinkComponent,
   MenuLinkComponent,
   onAvatarClick,
   ...props
 }) => {
   var _a, _b;
+  useEffect(() => {
+    let isDrawerOpen = localStorage.getItem(LOCAL_STORAGE_KEY);
+    if (isDrawerOpen === null) {
+      localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(false));
+    }
+  }, []);
   let closeDrawerWidth = 56;
   let openDrawerWidth = 200;
   let drawerSizeStyle = {
@@ -428,8 +434,15 @@ var AppLayout = ({
   const [size, setSize] = useState2(
     typeof window !== "undefined" && window.innerWidth || 1200
   );
-  const [openSideMenu, setOpenSideMenu] = useState2(true);
-  const [keepDrawerOpen, setKeepDrawerOpen] = useState2(keepOpen);
+  const [openSideMenu, setOpenSideMenu] = useState2(() => {
+    const savedState = localStorage.getItem(LOCAL_STORAGE_KEY);
+    return savedState ? JSON.parse(savedState) : false;
+  });
+  const [container, setContainer] = React5.useState(null);
+  const [keepDrawerOpen, setKeepDrawerOpen] = useState2(() => {
+    const savedState = localStorage.getItem(LOCAL_STORAGE_KEY);
+    return savedState ? JSON.parse(savedState) : false;
+  });
   const handleClickOutside = () => {
     if (typeof window !== "undefined") {
       if (window.innerWidth < 600) {
@@ -445,6 +458,8 @@ var AppLayout = ({
         setSize(window.innerWidth);
         if (window.innerWidth > 600) {
           setKeepDrawerOpen(false);
+        } else {
+          localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(false));
         }
       };
       resize();
@@ -455,12 +470,16 @@ var AppLayout = ({
     }
   }, []);
   useEffect(() => {
-    setKeepDrawerOpen(keepOpen);
-  }, [setKeepOpen]);
+    setKeepDrawerOpen(() => {
+      const savedState = localStorage.getItem(LOCAL_STORAGE_KEY);
+      return savedState ? JSON.parse(savedState) : true;
+    });
+  }, [setKeepDrawerOpen]);
   useEffect(() => {
     if (size > 600) {
       setOpenSideMenu(keepDrawerOpen);
     } else {
+      setKeepDrawerOpen(false);
       setOpenSideMenu(false);
     }
   }, [size, keepDrawerOpen]);
@@ -470,7 +489,7 @@ var AppLayout = ({
     {
       dir: direction,
       className: cn(
-        "hawa-fixed hawa-end-0 hawa-start-0 hawa-top-0 hawa-z-0 hawa-flex hawa-h-14 hawa-w-full hawa-items-center hawa-justify-between hawa-bg-primary-foreground hawa-p-2",
+        "hawa-fixed hawa-end-0 hawa-start-0 hawa-top-0 hawa-z-10 hawa-flex hawa-h-14 hawa-w-full hawa-items-center hawa-justify-between hawa-bg-primary-foreground hawa-p-2",
         bordered && "hawa-border-b-[1px]"
       )
     },
@@ -498,7 +517,7 @@ var AppLayout = ({
           "div",
           {
             onClick: () => setOpenSideMenu(true),
-            className: "hawa-z-40 hawa-mx-1 hawa-cursor-pointer  hawa-rounded hawa-p-2  hawa-transition-all hover:hawa-bg-gray-100"
+            className: "hawa-z-40 hawa-mx-1 hawa-cursor-pointer hawa-rounded hawa-p-2  hawa-transition-all "
           },
           /* @__PURE__ */ React5.createElement(MenuIcon, null)
         ),
@@ -543,13 +562,13 @@ var AppLayout = ({
         )
       }
     ))
-  ), /* @__PURE__ */ React5.createElement(
+  ), /* @__PURE__ */ React5.createElement("div", { ref: setContainer }, /* @__PURE__ */ React5.createElement(
     "div",
     {
       className: cn(
-        "hawa-fixed hawa-z-0 hawa-flex hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all hawa-top-0 hawa-h-[calc(100dvh)] hawa-bg-primary-foreground",
+        "hawa-fixed hawa-z-40 hawa-flex hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all hawa-top-0 hawa-h-[calc(100dvh)] hawa-bg-primary-foreground",
         isRTL ? "hawa-right-0" : "hawa-left-0",
-        bordered ? direction === "rtl" ? "hawa-border-s-[1px]" : "hawa-border-e-[1px]" : ""
+        bordered ? size > 600 ? direction === "rtl" ? "hawa-border-s-[1px]" : "hawa-border-e-[1px]" : "" : ""
       ),
       style: {
         width: size > 600 ? openSideMenu ? `${drawerSizeStyle["opened"][drawerSize]}px` : `${drawerSizeStyle["closed"][drawerSize]}px` : openSideMenu ? `${drawerSizeStyle["opened"][drawerSize]}px` : "0px"
@@ -660,9 +679,10 @@ var AppLayout = ({
             size: "smallIcon",
             onClick: () => {
               const newKeepOpenState = !keepDrawerOpen;
-              if (props.onDrawerExpand) {
-                props.onDrawerExpand(newKeepOpenState);
-              }
+              localStorage.setItem(
+                LOCAL_STORAGE_KEY,
+                JSON.stringify(newKeepOpenState)
+              );
               setKeepDrawerOpen(newKeepOpenState);
             }
           },
@@ -688,10 +708,17 @@ var AppLayout = ({
         )
       ) : null
     )
+  )), /* @__PURE__ */ React5.createElement(
+    Dialog.Root,
+    {
+      open: size < 600 && openSideMenu,
+      onOpenChange: setOpenSideMenu
+    },
+    /* @__PURE__ */ React5.createElement(Dialog.Portal, { container }, /* @__PURE__ */ React5.createElement(Dialog.Overlay, { className: "hawa-fixed hawa-inset-0  hawa-bg-foreground/80 hawa-backdrop-blur-sm data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out hawa-z-10  data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0" }))
   ), /* @__PURE__ */ React5.createElement(
     "div",
     {
-      className: "hawa-fixed -hawa-z-10 hawa-overflow-y-auto hawa-transition-all",
+      className: "hawa-fixed hawa-overflow-y-auto  hawa-transition-all hawa-z-0",
       style: isRTL ? {
         left: "0px",
         top: props.topBar ? "56px" : "0px",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.36.0-next",
+  "version": "0.36.2-next",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",