@ttoss/layouts 0.4.13 → 0.4.15

package/dist/esm/index.js

@@ -2280,6 +2280,18 @@ import * as React4 from "react";
 
 // src/components/LayoutProvider.tsx
 import * as React3 from "react";
+
+// src/useIsDesktop.ts
+import { useBreakpointIndex } from "@ttoss/ui";
+var useIsDesktop = () => {
+  const breakpointIndex = useBreakpointIndex();
+  const isDesktop = breakpointIndex >= 1;
+  return {
+    isDesktop
+  };
+};
+
+// src/components/LayoutProvider.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 var LayoutContext = React3.createContext({
   isSidebarOpen: true,
@@ -2289,6 +2301,14 @@ var LayoutProvider = ({
   children
 }) => {
   const [isSidebarOpen, setIsSidebarOpen] = React3.useState(true);
+  const {
+    isDesktop
+  } = useIsDesktop();
+  React3.useEffect(() => {
+    if (!isDesktop) {
+      setIsSidebarOpen(false);
+    }
+  }, [isDesktop]);
   const toggleSidebar = () => {
     setIsSidebarOpen(prev => {
       return !prev;
@@ -2311,37 +2331,67 @@ var useLayout = () => {
 };
 
 // src/components/Sidebar.tsx
+import { Drawer } from "@ttoss/components/Drawer";
 import { Box as Box2 } from "@ttoss/ui";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
 var SIDEBAR_WIDTH = "2xs";
 var Sidebar = props => {
   const {
-    isSidebarOpen
+    isSidebarOpen,
+    toggleSidebar
   } = useLayout();
-  return /* @__PURE__ */jsx4(Box2, {
-    role: "complementary",
-    "aria-label": "Sidebar",
-    "aria-hidden": !isSidebarOpen,
-    sx: {
-      height: "full",
-      minWidth: isSidebarOpen ? SIDEBAR_WIDTH : "0",
-      width: isSidebarOpen ? SIDEBAR_WIDTH : "0",
-      opacity: isSidebarOpen ? 1 : 0,
-      transition: "min-width 0.5s ease, width 0.5s ease, opacity 0.5s ease",
-      borderRight: isSidebarOpen ? "sm" : "none",
-      borderColor: "display.border.muted.default",
-      backgroundColor: "navigation.background.muted.default",
-      paddingX: isSidebarOpen ? "3" : "0",
-      paddingY: "10",
-      ...props.sx
-    },
-    children: isSidebarOpen ? props.children : null
+  const {
+    isDesktop
+  } = useIsDesktop();
+  return /* @__PURE__ */jsx4(Fragment, {
+    children: isDesktop ? /* @__PURE__ */jsx4(Box2, {
+      role: "complementary",
+      "aria-label": "Sidebar",
+      "aria-hidden": !isSidebarOpen,
+      sx: {
+        position: "relative",
+        zIndex: "dropdown",
+        height: "full",
+        minHeight: isSidebarOpen ? "full" : "0",
+        width: isSidebarOpen ? SIDEBAR_WIDTH : "0",
+        minWidth: isSidebarOpen ? SIDEBAR_WIDTH : "0",
+        opacity: isSidebarOpen ? 1 : 0,
+        transition: "width 0.5s ease, opacity 0.5s ease",
+        borderRight: isSidebarOpen ? "sm" : "none",
+        borderColor: "display.border.muted.default",
+        backgroundColor: "navigation.background.muted.default",
+        paddingX: isSidebarOpen ? "3" : "0",
+        paddingY: isSidebarOpen ? "10" : "0",
+        ...props.sx
+      },
+      children: isSidebarOpen ? props.children : null
+    }) : /* @__PURE__ */jsx4(Box2, {
+      role: "complementary",
+      "aria-label": "Sidebar",
+      "aria-hidden": !isSidebarOpen,
+      sx: {
+        border: "none",
+        width: "full",
+        ...props.sx
+      },
+      onClick: () => {
+        if (isSidebarOpen) {
+          toggleSidebar();
+        }
+      },
+      children: /* @__PURE__ */jsx4(Drawer, {
+        open: isSidebarOpen,
+        direction: "left",
+        size: "min",
+        children: isSidebarOpen ? props.children : null
+      })
+    })
   });
 };
 Sidebar.displayName = "Sidebar";
 
 // src/components/Header.tsx
-import { Fragment, jsx as jsx5, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs } from "react/jsx-runtime";
 var paddingSx = {
   paddingX: "4",
   paddingY: "3"
@@ -2377,7 +2427,7 @@ var Header = ({
   }, [isSidebarOpen, showSidebarButton, toggleSidebar]);
   const memoizedSidebarSlot = React4.useMemo(() => {
     if (!sidebarSlot) {
-      return /* @__PURE__ */jsx5(Fragment, {
+      return /* @__PURE__ */jsx5(Fragment2, {
         children: sidebarButton
       });
     }
@@ -2404,6 +2454,7 @@ var Header = ({
       alignItems: "center",
       borderBottom: "sm",
       borderColor: "display.border.muted.default",
+      backgroundColor: "navigation.background.primary.default",
       ...(sidebarSlot ? {} : paddingSx),
       ...boxProps.sx
     },
@@ -2499,7 +2550,7 @@ var SidebarCollapseLayout = ({
     children: /* @__PURE__ */jsxs2(Stack, {
       ...props,
       sx: {
-        height: ["auto", "100vh"],
+        height: ["100vh"],
         width: "full",
         overflow: "hidden",
         ...props.sx
@@ -2508,7 +2559,8 @@ var SidebarCollapseLayout = ({
         sx: {
           width: "full",
           flex: 1,
-          overflow: "hidden"
+          overflow: "hidden",
+          flexDirection: ["column", "row", "row"]
         },
         children: [sidebar, main]
       })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/layouts",
-  "version": "0.4.13",
+  "version": "0.4.15",
   "description": "Layout components for React",
   "license": "MIT",
   "author": "ttoss",
@@ -25,7 +25,8 @@
   "sideEffects": false,
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/ui": "^5.5.3"
+    "@ttoss/components": "^2.2.7",
+    "@ttoss/ui": "^5.5.5"
   },
   "devDependencies": {
     "@types/jest": "^29.5.14",
@@ -33,10 +34,11 @@
     "jest": "^29.7.0",
     "react": "^19.0.0",
     "tsup": "^8.3.5",
+    "@ttoss/components": "^2.2.7",
     "@ttoss/config": "^1.35.2",
     "@ttoss/react-icons": "^0.4.9",
     "@ttoss/test-utils": "^2.1.22",
-    "@ttoss/ui": "^5.5.3"
+    "@ttoss/ui": "^5.5.5"
   },
   "keywords": [
     "React"