@sikka/hawa 0.12.14-next → 0.12.15-next

package/dist/index.css

@@ -751,9 +751,6 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-bottom-4 {
   bottom: 1rem;
 }
-.hawa-bottom-5 {
-  bottom: 1.25rem;
-}
 .hawa-left-0 {
   left: 0px;
 }
@@ -769,9 +766,6 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-left-4 {
   left: 1rem;
 }
-.hawa-left-5 {
-  left: 1.25rem;
-}
 .hawa-left-\[50\%\] {
   left: 50%;
 }
@@ -790,9 +784,6 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-right-4 {
   right: 1rem;
 }
-.hawa-right-5 {
-  right: 1.25rem;
-}
 .hawa-top-0 {
   top: 0px;
 }
@@ -811,9 +802,6 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-top-4 {
   top: 1rem;
 }
-.hawa-top-5 {
-  top: 1.25rem;
-}
 .hawa-top-\[1px\] {
   top: 1px;
 }

package/dist/index.d.mts

@@ -875,7 +875,7 @@ type NavbarType = {
 declare const Navbar: React__default.FC<NavbarType>;
 
 type AppLayoutTypes$1 = {
-    design?: "default" | "bubbles" | "floating";
+    design?: "default";
     /** The pages of the side drawer */
     drawerItems: Item[];
     /** The direction of the layout */

package/dist/index.d.ts

@@ -875,7 +875,7 @@ type NavbarType = {
 declare const Navbar: React__default.FC<NavbarType>;
 
 type AppLayoutTypes$1 = {
-    design?: "default" | "bubbles" | "floating";
+    design?: "default";
     /** The pages of the side drawer */
     drawerItems: Item[];
     /** The direction of the layout */

package/dist/index.js

@@ -6800,7 +6800,7 @@ var AppLayout = function(_param) {
     var isRTL = direction === "rtl";
     var _ref = _sliced_to_array((0, import_react35.useState)(""), 2), openedSidebarItem = _ref[0], setOpenedSidebarItem = _ref[1];
     var _ref1 = _sliced_to_array((0, import_react35.useState)(1200), 2), size = _ref1[0], setSize = _ref1[1];
-    var _ref2 = _sliced_to_array((0, import_react35.useState)(size > 600 ? keepOpen : false), 2), openSideMenu = _ref2[0], setOpenSideMenu = _ref2[1];
+    var _ref2 = _sliced_to_array((0, import_react35.useState)(true), 2), openSideMenu = _ref2[0], setOpenSideMenu = _ref2[1];
     var drawerSizeCondition = size > 600 ? drawerSizeStyle[keepOpen ? "opened" : "closed"][drawerSize] : 0;
     (0, import_react35.useEffect)(function() {
         if (typeof window !== "undefined") {
@@ -6814,6 +6814,15 @@ var AppLayout = function(_param) {
             };
         }
     }, []);
+    (0, import_react35.useEffect)(function() {
+        if (size > 600) {
+            setOpenSideMenu(keepOpen);
+        } else {
+            setOpenSideMenu(false);
+        }
+    }, [
+        size
+    ]);
     (0, import_react35.useEffect)(function() {
         var handleClickOutside = function(event) {
             if (ref.current && !ref.current.contains(event.target) && !keepOpen) {
@@ -6853,19 +6862,7 @@ var AppLayout = function(_param) {
             return 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"
-    }, /* @__PURE__ */ import_react35.default.createElement("svg", {
-        stroke: "currentColor",
-        fill: "currentColor",
-        strokeWidth: 0,
-        viewBox: "0 0 20 20",
-        "aria-hidden": "true",
-        height: "1.6em",
-        width: "1.6em"
-    }, /* @__PURE__ */ import_react35.default.createElement("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-    }))), props.pageTitle ? /* @__PURE__ */ import_react35.default.createElement("div", {
+    }, /* @__PURE__ */ import_react35.default.createElement(MenuIcon, null)), props.pageTitle ? /* @__PURE__ */ import_react35.default.createElement("div", {
         className: "hawa-text-sm"
     }, props.pageTitle) : /* @__PURE__ */ import_react35.default.createElement("div", null)), /* @__PURE__ */ import_react35.default.createElement("div", {
         className: cn("hawa-flex hawa-gap-2 dark:hawa-text-white", isRTL ? "hawa-flex-row-reverse" : "hawa-flex-row")
@@ -6901,7 +6898,7 @@ var AppLayout = function(_param) {
             clipRule: "evenodd"
         })))
     }))), /* @__PURE__ */ import_react35.default.createElement("div", {
-        className: cn("hawa-fixed hawa-z-40 hawa-flex  hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all", design === "floating" ? isRTL ? "hawa-right-5 hawa-top-5" : "hawa-bottom-5 hawa-left-5 hawa-top-5" : isRTL ? "hawa-right-0 hawa-top-0 hawa-h-14" : "hawa-left-0 hawa-top-0 hawa-h-14", "hawa-h-[calc(100dvh)]"),
+        className: cn("hawa-fixed hawa-z-40 hawa-flex  hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all", isRTL ? "hawa-right-0 hawa-top-0 hawa-h-14" : "hawa-left-0 hawa-top-0 hawa-h-14", "hawa-h-[calc(100dvh)]"),
         style: {
             width: size > 600 ? openSideMenu ? "".concat(drawerSizeStyle["opened"][drawerSize], "px") : "".concat(drawerSizeStyle["closed"][drawerSize], "px") : openSideMenu ? "".concat(drawerSizeStyle["opened"][drawerSize], "px") : "0px"
         },
@@ -6935,14 +6932,8 @@ var AppLayout = function(_param) {
         className: cn("hawa-fixed  hawa-h-9  hawa-transition-all", isRTL ? "hawa-right-2.5 hawa-top-2.5" : "hawa-left-2.5 hawa-top-2.5", openSideMenu ? "hawa-invisible hawa-opacity-0" : "hawa-visible hawa-opacity-100"),
         src: props.logoSymbol
     }) : null), /* @__PURE__ */ import_react35.default.createElement("div", {
-        className: cn(// hawa-h-[calc(100dvh)]
-        "hawa-fixed hawa-bottom-14 hawa-bg-primary-foreground hawa-p-0 hawa-py-2 hawa-transition-all hawa-top-14", openSideMenu ? "hawa-overflow-auto" : "hawa-overflow-hidden"),
+        className: cn("hawa-fixed hawa-bottom-14 hawa-bg-primary-foreground hawa-p-0 hawa-py-2 hawa-transition-all hawa-top-14", openSideMenu ? "hawa-overflow-auto" : "hawa-overflow-hidden"),
         style: {
-            // height:
-            //   design === "floating"
-            //     ? "calc(100% - 152px)"
-            //     : "0px",
-            // : "calc(100% - 112px)",
             width: size > 600 ? "".concat(openSideMenu ? openDrawerWidth : drawerSizeCondition, "px") : "".concat(openSideMenu ? openDrawerWidth : 0, "px")
         }
     }, /* @__PURE__ */ import_react35.default.createElement(SidebarGroup, {
@@ -6993,17 +6984,7 @@ var AppLayout = function(_param) {
         clipRule: "evenodd"
     })))) : null)), /* @__PURE__ */ import_react35.default.createElement("div", {
         className: "hawa-fixed hawa-overflow-y-auto hawa-transition-all",
-        style: design === "floating" ? isRTL ? {
-            height: "calc(100% - ".concat(props.topBar ? "56" : "0", "px)"),
-            width: "calc(100% - ".concat(drawerSizeCondition + 20, "px)"),
-            left: "0px",
-            top: props.topBar ? "56px" : "0px"
-        } : {
-            height: "calc(100% - ".concat(props.topBar ? "56" : "0", "px)"),
-            width: "calc(100% - ".concat(drawerSizeCondition + 20, "px)"),
-            left: "".concat(drawerSizeCondition + 20, "px"),
-            top: props.topBar ? "56px" : "0px"
-        } : isRTL ? {
+        style: isRTL ? {
             height: "calc(100% - ".concat(props.topBar ? "56" : "0", "px)"),
             width: "calc(100% - ".concat(drawerSizeCondition, "px)"),
             left: "0px",
@@ -7016,6 +6997,22 @@ var AppLayout = function(_param) {
         }
     }, props.children));
 };
+var MenuIcon = function() {
+    return /* @__PURE__ */ import_react35.default.createElement("svg", {
+        "aria-label": "Menu Button",
+        stroke: "currentColor",
+        fill: "currentColor",
+        strokeWidth: 0,
+        viewBox: "0 0 20 20",
+        "aria-hidden": "true",
+        height: "1.6em",
+        width: "1.6em"
+    }, /* @__PURE__ */ import_react35.default.createElement("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+    }));
+};
 // components/layout/AppTopbar.tsx
 var import_react36 = __toESM(require("react"));
 var AppTopbar = function(_param) {

package/dist/index.mjs

@@ -6599,10 +6599,8 @@ var AppLayout = ({
   const isRTL = direction === "rtl";
   const [openedSidebarItem, setOpenedSidebarItem] = useState22("");
   const [size, setSize] = useState22(1200);
-  const [openSideMenu, setOpenSideMenu] = useState22(
-    size > 600 ? keepOpen : false
-  );
-  let drawerSizeCondition = size > 600 ? drawerSizeStyle[keepOpen ? "opened" : "closed"][drawerSize] : 0;
+  const [openSideMenu, setOpenSideMenu] = useState22(true);
+  const drawerSizeCondition = size > 600 ? drawerSizeStyle[keepOpen ? "opened" : "closed"][drawerSize] : 0;
   useEffect14(() => {
     if (typeof window !== "undefined") {
       const resize = () => {
@@ -6615,6 +6613,13 @@ var AppLayout = ({
       };
     }
   }, []);
+  useEffect14(() => {
+    if (size > 600) {
+      setOpenSideMenu(keepOpen);
+    } else {
+      setOpenSideMenu(false);
+    }
+  }, [size]);
   useEffect14(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target) && !keepOpen) {
@@ -6668,26 +6673,7 @@ var AppLayout = ({
             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"
           },
-          /* @__PURE__ */ React60.createElement(
-            "svg",
-            {
-              stroke: "currentColor",
-              fill: "currentColor",
-              strokeWidth: 0,
-              viewBox: "0 0 20 20",
-              "aria-hidden": "true",
-              height: "1.6em",
-              width: "1.6em"
-            },
-            /* @__PURE__ */ React60.createElement(
-              "path",
-              {
-                fillRule: "evenodd",
-                clipRule: "evenodd",
-                d: "M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-              }
-            )
-          )
+          /* @__PURE__ */ React60.createElement(MenuIcon, null)
         ),
         props.pageTitle ? /* @__PURE__ */ React60.createElement("div", { className: "hawa-text-sm" }, props.pageTitle) : /* @__PURE__ */ React60.createElement("div", null)
       )
@@ -6746,7 +6732,7 @@ var AppLayout = ({
     {
       className: cn(
         "hawa-fixed hawa-z-40 hawa-flex  hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all",
-        design === "floating" ? isRTL ? "hawa-right-5 hawa-top-5" : "hawa-bottom-5 hawa-left-5 hawa-top-5" : isRTL ? "hawa-right-0 hawa-top-0 hawa-h-14" : "hawa-left-0 hawa-top-0 hawa-h-14",
+        isRTL ? "hawa-right-0 hawa-top-0 hawa-h-14" : "hawa-left-0 hawa-top-0 hawa-h-14",
         "hawa-h-[calc(100dvh)]"
       ),
       style: {
@@ -6808,16 +6794,10 @@ var AppLayout = ({
       "div",
       {
         className: cn(
-          // hawa-h-[calc(100dvh)]
           "hawa-fixed hawa-bottom-14 hawa-bg-primary-foreground hawa-p-0 hawa-py-2 hawa-transition-all hawa-top-14",
           openSideMenu ? "hawa-overflow-auto" : "hawa-overflow-hidden"
         ),
         style: {
-          // height:
-          //   design === "floating"
-          //     ? "calc(100% - 152px)"
-          //     : "0px",
-          // : "calc(100% - 112px)",
           width: size > 600 ? `${openSideMenu ? openDrawerWidth : drawerSizeCondition}px` : `${openSideMenu ? openDrawerWidth : 0}px`
         }
       },
@@ -6902,17 +6882,7 @@ var AppLayout = ({
     "div",
     {
       className: "hawa-fixed hawa-overflow-y-auto hawa-transition-all",
-      style: design === "floating" ? isRTL ? {
-        height: `calc(100% - ${props.topBar ? "56" : "0"}px)`,
-        width: `calc(100% - ${drawerSizeCondition + 20}px)`,
-        left: "0px",
-        top: props.topBar ? "56px" : "0px"
-      } : {
-        height: `calc(100% - ${props.topBar ? "56" : "0"}px)`,
-        width: `calc(100% - ${drawerSizeCondition + 20}px)`,
-        left: `${drawerSizeCondition + 20}px`,
-        top: props.topBar ? "56px" : "0px"
-      } : isRTL ? {
+      style: isRTL ? {
         height: `calc(100% - ${props.topBar ? "56" : "0"}px)`,
         width: `calc(100% - ${drawerSizeCondition}px)`,
         left: "0px",
@@ -6927,6 +6897,27 @@ var AppLayout = ({
     props.children
   ));
 };
+var MenuIcon = () => /* @__PURE__ */ React60.createElement(
+  "svg",
+  {
+    "aria-label": "Menu Button",
+    stroke: "currentColor",
+    fill: "currentColor",
+    strokeWidth: 0,
+    viewBox: "0 0 20 20",
+    "aria-hidden": "true",
+    height: "1.6em",
+    width: "1.6em"
+  },
+  /* @__PURE__ */ React60.createElement(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+    }
+  )
+);
 
 // components/layout/AppTopbar.tsx
 import React61 from "react";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.12.14-next",
+  "version": "0.12.15-next",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {