@m4l/components 0.1.68 → 0.1.70

package/components/SideBar/{index.3ba3a821.js → index.3bc6a634.js}

@@ -1,19 +1,19 @@
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { useEnvironment } from "@m4l/core";
 import { createContext, useContext, useState } from "react";
-import { T as TEST_PROP_ID } from "../../vendor.659fcc31.js";
-import { I as Image } from "../Image/index.b216f30c.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.06b5c4a8.js";
+import { T as TEST_PROP_ID } from "../../vendor.8edaef93.js";
+import { I as Image } from "../Image/index.82a6cd46.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.57824447.js";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { styled as styled$1, ListItemText, ListItemButton, Collapse, Skeleton, generateUtilityClasses, Drawer } from "@mui/material";
-import { I as Icon, A as ArrowIcon } from "../Icon/index.f0a7d42d.js";
-import { T as Typography } from "../mui_extended/Typography/index.ab4ee376.js";
+import { styled as styled$1, generateUtilityClasses, ListItemText, ListItemButton, Collapse, Skeleton, Drawer } from "@mui/material";
+import { I as Icon, A as ArrowIcon } from "../Icon/index.caaed284.js";
+import { T as Typography } from "../mui_extended/Typography/index.b3c6e71c.js";
 import clsx from "clsx";
-import { P as Popover } from "../mui_extended/Popover/index.e271e4f0.js";
+import { P as Popover } from "../mui_extended/Popover/index.226f247e.js";
 import { S as ScrollBar } from "../ScrollBar/index.bbe48f4d.js";
 import { styled, alpha } from "@mui/material/styles";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../utils/index.d4755e7e.js";
+import { g as getComponentUtilityClass } from "../../utils/index.a2312a73.js";
 const SideBarRoot = styled("div")(({
   theme
 }) => ({
@@ -43,9 +43,6 @@ const WrapperSideBar = styled("div", {
   ...!visible && {
     width: 0,
     opacity: 0
-  },
-  [theme.breakpoints.down("sm")]: {
-    position: "absolute"
   }
 }));
 const WrapperContentDesktop = styled$1("div")(() => ({
@@ -65,6 +62,90 @@ const CollapseButtonRoot = styled$1("div")(() => ({
 const ContainerLogoButton = styled$1("div")(() => ({
   display: "flex"
 }));
+const componentName = "M4LSideBar";
+generateUtilityClasses(
+  componentName,
+  [
+    "root",
+    "containerSideBarLogo",
+    "contentDesktop",
+    "contentMobile",
+    "collapseButton",
+    "containerLogo",
+    "contentGroups",
+    "wrapperGroup",
+    "wrapperGroupTitle",
+    "itemListMainRoot",
+    "containerListSubItem",
+    "navItemMainRoot",
+    "navItemRootContent",
+    "arrowIconRoot",
+    "navListSubItemRoot",
+    "navSubItemContentRoot",
+    "skeleton",
+    "lineLeft",
+    "wrapperSideBar",
+    "containerLogoButton",
+    "navItemMainTriangleTop",
+    "navItemMainTriangleBottom",
+    "navItemRootContentIconTypo",
+    "navSubItemContentBullet",
+    "containerLogoButtonLogo",
+    "containerLogoButtonIcon",
+    "collapseButtontriangleTop",
+    "collapseButtontriangleBottom",
+    "subItemCollapseActive",
+    "contentGroupsLine",
+    "drawer",
+    "popover",
+    "collapsed",
+    "visible",
+    "subItemActive",
+    "itemMainActive"
+  ]
+);
+const getSideBarClassesByState = (ownerState) => {
+  const slots = {
+    root: ["root", ownerState.collapsed && "collapsed", ownerState.visible && "visible"],
+    containerSideBarLogo: ["containerSideBarLogo"],
+    contentDesktop: ["contentDesktop"],
+    contentMobile: ["contentMobile"],
+    collapseButton: ["collapseButton"],
+    containerLogo: ["containerLogo"],
+    contentGroups: ["contentGroups"],
+    wrapperGroup: ["wrapperGroup"],
+    wrapperGroupTitle: ["wrapperGroupTitle"],
+    itemListMainRoot: ["itemListMainRoot"],
+    containerListSubItem: ["containerListSubItem"],
+    navItemMainRoot: ["navItemMainRoot"],
+    navItemRootContent: ["navItemRootContent"],
+    arrowIconRoot: ["arrowIconRoot"],
+    navListSubItemRoot: ["navListSubItemRoot"],
+    navSubItemContentRoot: ["navSubItemContentRoot"],
+    skeleton: ["skeleton"],
+    subItemActive: ["subItemActive"],
+    lineLeft: ["lineLeft"],
+    wrapperSideBar: ["wrapperSideBar"],
+    containerLogoButton: ["containerLogoButton"],
+    itemMainActive: ["itemMainActive"],
+    navItemMainTriangleTop: ["navItemMainTriangleTop"],
+    navItemMainTriangleBottom: ["navItemMainTriangleBottom"],
+    navItemRootContentIconTypo: ["navItemRootContentIconTypo"],
+    navSubItemContentBullet: ["navSubItemContentBullet"],
+    containerLogoButtonLogo: ["containerLogoButtonLogo"],
+    containerLogoButtonIcon: ["containerLogoButtonIcon"],
+    collapseButtontriangleTop: ["collapseButtontriangleTop"],
+    collapseButtontriangleBottom: ["collapseButtontriangleBottom"],
+    subItemCollapseActive: ["subItemCollapseActive"],
+    contentGroupsLine: ["contentGroupsLine"],
+    drawer: ["drawer"],
+    popover: ["popover"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getComponentUtilityClass(componentName), {});
+  return {
+    ...composedClasses
+  };
+};
 const initialState = {
   collapsed: false,
   visible: true,
@@ -80,7 +161,10 @@ const initialState = {
   isItemActive: () => false,
   collapsedWidht: "",
   unCollapsedWidht: "",
-  classes: {},
+  classes: getSideBarClassesByState({
+    collapsed: false,
+    visible: true
+  }),
   companyName: ""
 };
 const SideBarContext = createContext(initialState);
@@ -156,19 +240,15 @@ function CollapseButton(props) {
           src: companyLogoNormalUrl,
           alt: "logo"
         }, "Logo")
-      }), /* @__PURE__ */ jsxs("div", {
+      }), /* @__PURE__ */ jsx("div", {
         className: classes.containerLogoButtonIcon,
         style: {
           transform: `rotate(${collapsed ? 0 : 180}deg)`
         },
-        children: [/* @__PURE__ */ jsx("div", {
-          className: classes.collapseButtontriangleTop
-        }), /* @__PURE__ */ jsx(IconButton, {
+        children: /* @__PURE__ */ jsx(IconButton, {
           src: `${host_static_assets}/${environment_assets}/frontend/components/sidebar/assets/icons/arrow_right.svg`,
           onClick: onToggleCollapse
-        }), /* @__PURE__ */ jsx("div", {
-          className: classes.collapseButtontriangleBottom
-        })]
+        })
       })]
     })
   });
@@ -276,11 +356,8 @@ const NavItemMainContent = (props) => {
   } = useEnvironment();
   const {
     collapsed,
-    isItemActive,
     classes
   } = useSideBar();
-  const active = isItemActive(item);
-  console.log("NavItemRootContent active", active);
   const isDesktop = useResponsiveDesktop();
   const handlerClick = (event) => {
     onClick && onClick(item);
@@ -354,7 +431,9 @@ const NavSubItemContent = (props) => {
     item,
     onClick,
     closePopover = () => {
-    }
+    },
+    setOpenSub,
+    openSub
   } = props;
   const {
     title
@@ -366,17 +445,21 @@ const NavSubItemContent = (props) => {
   } = useSideBar();
   const active = isItemActive(item);
   const isDesktop = useResponsiveDesktop();
+  const hasChildren = item.children && Array.isArray(item.children) && item.children.length > 0;
   const handlerClick = () => {
     onClick(item);
-    closePopover();
-    if (!isDesktop) {
+    if (!hasChildren || hasChildren === void 0) {
+      closePopover();
+    }
+    setOpenSub((val) => !val);
+    if (!isDesktop && (!hasChildren || hasChildren === void 0)) {
       onToggleVisible();
     }
   };
   return /* @__PURE__ */ jsxs(NavSubItemContentRoot, {
     onClick: handlerClick,
     disableRipple: true,
-    className: clsx(classes.navSubItemContentRoot, active && classes.subItemActive),
+    className: clsx(classes.navSubItemContentRoot, active && classes.subItemActive, hasChildren && openSub ? classes.subItemCollapseActive : ""),
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_ID]: getNameDataTestId("navSubItemContentRoot")
     } : {},
@@ -385,13 +468,17 @@ const NavSubItemContent = (props) => {
     }), /* @__PURE__ */ jsx(Typography, {
       variant: "body",
       children: title
-    })]
+    }), hasChildren ? /* @__PURE__ */ jsx(ArrowIcon, {
+      openState: openSub
+    }) : null]
   });
 };
 function NavSubItem(props) {
   const {
     item,
-    closePopover
+    closePopover,
+    setOpenSub,
+    openSub
   } = props;
   const {
     onClick
@@ -399,22 +486,21 @@ function NavSubItem(props) {
   return /* @__PURE__ */ jsx(NavSubItemContent, {
     item,
     onClick: () => onClick(item),
-    closePopover
+    closePopover,
+    setOpenSub,
+    openSub
   });
 }
 function NavListSubItem(props) {
   const {
     item: list,
     closePopover = () => {
-    },
-    setSubItemActive
+    }
   } = props;
   const {
-    isItemActive,
     classes
   } = useSideBar();
-  const active = isItemActive(list);
-  const [openSub, setOpenSub] = useState(active);
+  const [openSub, setOpenSub] = useState(false);
   const hasChildren = list.children && Array.isArray(list.children) && list.children.length > 0;
   return /* @__PURE__ */ jsx(NavListSubItemRoot, {
     className: classes.navListSubItemRoot,
@@ -424,8 +510,8 @@ function NavListSubItem(props) {
     children: hasChildren ? /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsx(NavSubItem, {
         item: list,
-        open: openSub,
-        setOpen: setOpenSub,
+        openSub,
+        setOpenSub,
         closePopover
       }), /* @__PURE__ */ jsx(Collapse, {
         in: openSub,
@@ -433,13 +519,13 @@ function NavListSubItem(props) {
         unmountOnExit: true,
         children: (list.children || []).map((item) => /* @__PURE__ */ jsx(NavListSubItem, {
           item,
-          setSubItemActive
+          closePopover
         }, item.title))
       })]
     }) : /* @__PURE__ */ jsx(NavSubItem, {
       item: list,
-      open: openSub,
-      setOpen: setOpenSub,
+      openSub,
+      setOpenSub,
       closePopover
     })
   });
@@ -476,20 +562,17 @@ function NavItemMain(props) {
         ...process.env.NODE_ENV !== "production" ? {
           [TEST_PROP_ID]: getNameDataTestId("navItemMainRoot")
         } : {},
-        children: [/* @__PURE__ */ jsx("div", {
-          className: classes.navItemMainTriangleTop
-        }), /* @__PURE__ */ jsx(NavItemMainContent, {
+        children: [/* @__PURE__ */ jsx(NavItemMainContent, {
           item,
           handlerOpen: handleOpen,
           open
-        }), /* @__PURE__ */ jsx("div", {
-          className: classes.navItemMainTriangleBottom
         }), /* @__PURE__ */ jsx(Popover, {
           className: classes.popover,
           open: Boolean(popoverStatus),
           anchorEl: popoverStatus,
           onClose: handleClose,
           arrowType: "left-center",
+          disablePortal: true,
           sx: {
             ml: "14px"
           },
@@ -506,40 +589,32 @@ function NavItemMain(props) {
             closePopover: handleClose
           }, itemList.title))
         })]
-      }), !collapsed && /* @__PURE__ */ jsxs(NavItemMainRoot, {
+      }), !collapsed && /* @__PURE__ */ jsx(NavItemMainRoot, {
         className: classes.navItemMainRoot,
         ...process.env.NODE_ENV !== "production" ? {
           [TEST_PROP_ID]: getNameDataTestId("navItemMainRoot")
         } : {},
         onClick: () => setOpen((lastOpen) => !lastOpen),
         activeRoot: active,
-        children: [/* @__PURE__ */ jsx("div", {
-          className: classes.navItemMainTriangleTop
-        }), /* @__PURE__ */ jsx(NavItemMainContent, {
+        children: /* @__PURE__ */ jsx(NavItemMainContent, {
           item,
           open
-        }), /* @__PURE__ */ jsx("div", {
-          className: classes.navItemMainTriangleBottom
-        })]
+        })
       })]
     });
   }
-  return /* @__PURE__ */ jsxs(NavItemMainRoot, {
+  return /* @__PURE__ */ jsx(NavItemMainRoot, {
     activeRoot: active,
     className: classes.navItemMainRoot,
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_ID]: getNameDataTestId("navItemMainRoot")
     } : {},
-    children: [/* @__PURE__ */ jsx("div", {
-      className: classes.navItemMainTriangleTop
-    }), /* @__PURE__ */ jsx(NavItemMainContent, {
+    children: /* @__PURE__ */ jsx(NavItemMainContent, {
       item,
       onClick,
       changeVisible: onToggleVisible,
       open
-    }), /* @__PURE__ */ jsx("div", {
-      className: classes.navItemMainTriangleBottom
-    })]
+    })
   });
 }
 const ContainerListSubItem = styled$1("div")(({
@@ -562,12 +637,11 @@ function ItemListMain(props) {
     classes
   } = useSideBar();
   const active = isItemActive(list);
-  const [subItemActive, setSubItemActive] = useState(false);
   const [open, setOpen] = useState(active);
   const hasChildren = list.children && Array.isArray(list.children) && list.children.length > 0;
-  console.log("test item active equal", itemMainActive === id);
   if (hasChildren) {
     return /* @__PURE__ */ jsxs("div", {
+      role: "presentation",
       className: clsx(classes.itemListMainRoot, itemMainActive === id && classes.itemMainActive),
       ...process.env.NODE_ENV !== "production" ? {
         [TEST_PROP_ID]: getNameDataTestId("itemListMainRoot")
@@ -576,8 +650,7 @@ function ItemListMain(props) {
       children: [/* @__PURE__ */ jsx(NavItemMain, {
         item: list,
         open,
-        setOpen,
-        subItemActive
+        setOpen
       }), !isSideBarCollapsed && /* @__PURE__ */ jsx(Collapse, {
         in: open,
         timeout: "auto",
@@ -588,8 +661,7 @@ function ItemListMain(props) {
             [TEST_PROP_ID]: getNameDataTestId("containerListSubItem")
           } : {},
           children: /* @__PURE__ */ jsx(NavListSubItem, {
-            item,
-            setSubItemActive
+            item
           }, item.title)
         }, item.title))
       })]
@@ -610,38 +682,35 @@ function ItemListMain(props) {
 }
 const WrapperSKTNavSectionVertical = styled$1("div", {
   shouldForwardProp: (props) => props !== "collapse"
-})(({
-  theme,
-  collapse
-}) => ({
+})(() => ({
   margin: "0",
   padding: "0",
   position: "relative",
-  paddingLeft: theme.spacing(2),
-  paddingRight: theme.spacing(2),
-  marginTop: collapse ? "50px" : "0px",
-  height: "100%",
-  paddingTop: "100px"
+  height: "100%"
 }));
-const NavSectionVerticalItem = styled$1("div")(({
-  theme
-}) => ({
+const NavSectionVerticalItem = styled$1("div")(() => ({
   display: "grid",
-  gridTemplateColumns: "20px 1fr",
-  gridGap: theme.spacing(2),
+  gridTemplateColumns: "16px 1fr",
+  gap: "8px",
   alignItems: "center",
   width: "100%",
-  padding: theme.spacing(1, 1.5, 1, 0.5),
-  marginBottom: theme.spacing(0.5),
-  height: theme.spacing(6)
+  padding: "8px",
+  height: "36px"
+}));
+const NavSectionVerticalTitle = styled$1("div")(() => ({
+  display: "flex",
+  justifyContent: "flex-start",
+  height: "60px",
+  padding: "20px",
+  alignItems: "center"
 }));
-const NavSectionVerticalTitle = styled$1("div")(({
+const NavSectionVerticalItemDivider = styled$1("div")(({
   theme
 }) => ({
   display: "flex",
-  justifyContent: "flex-start",
-  height: "50px",
-  padding: theme.spacing(3, 0, 1, 2)
+  height: "2px",
+  marginRight: "14px",
+  backgroundColor: theme.palette.state?.default
 }));
 const SkeletonNavSectionVertical = () => {
   const {
@@ -654,51 +723,51 @@ const SkeletonNavSectionVertical = () => {
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_ID]: getNameDataTestId("skeleton")
     } : {},
-    children: [!collapsed && /* @__PURE__ */ jsx(NavSectionVerticalTitle, {
-      children: /* @__PURE__ */ jsx(Skeleton, {
+    children: [/* @__PURE__ */ jsx(NavSectionVerticalItemDivider, {}), /* @__PURE__ */ jsx(NavSectionVerticalTitle, {
+      children: !collapsed && /* @__PURE__ */ jsx(Skeleton, {
         variant: "text",
-        height: "14px",
+        height: "20px",
         width: "80px"
       })
     }), /* @__PURE__ */ jsxs(NavSectionVerticalItem, {
       children: [/* @__PURE__ */ jsx(Skeleton, {
         variant: "circular",
-        width: "22px",
-        height: "22px"
+        width: "16px",
+        height: "16px"
       }), !collapsed && /* @__PURE__ */ jsx(Skeleton, {
         variant: "text",
-        height: "14px",
-        width: "100%"
+        height: "20px",
+        width: "40%"
       })]
     }), /* @__PURE__ */ jsxs(NavSectionVerticalItem, {
       children: [/* @__PURE__ */ jsx(Skeleton, {
         variant: "circular",
-        width: "22px",
-        height: "22px"
+        width: "16px",
+        height: "16px"
       }), !collapsed && /* @__PURE__ */ jsx(Skeleton, {
         variant: "text",
-        height: "14px",
-        width: "100%"
+        height: "20px",
+        width: "70%"
       })]
     }), /* @__PURE__ */ jsxs(NavSectionVerticalItem, {
       children: [/* @__PURE__ */ jsx(Skeleton, {
         variant: "circular",
-        width: "22px",
-        height: "22px"
+        width: "16px",
+        height: "16px"
       }), !collapsed && /* @__PURE__ */ jsx(Skeleton, {
         variant: "text",
-        height: "14px",
-        width: "100%"
+        height: "20px",
+        width: "30%"
       })]
     }), /* @__PURE__ */ jsxs(NavSectionVerticalItem, {
       children: [/* @__PURE__ */ jsx(Skeleton, {
         variant: "circular",
-        width: "22px",
-        height: "22px"
+        width: "16px",
+        height: "16px"
       }), !collapsed && /* @__PURE__ */ jsx(Skeleton, {
         variant: "text",
-        height: "14px",
-        width: "100%"
+        height: "20px",
+        width: "50%"
       })]
     })]
   });
@@ -710,14 +779,15 @@ const ContentGroups = () => {
     classes
   } = useSideBar();
   const [itemMainActive, setItemMainActive] = useState(-1);
-  console.log("valor del item main active", itemMainActive);
   if (menuData && menuData.length > 0) {
-    return /* @__PURE__ */ jsx(ContentGroupsRoot, {
+    return /* @__PURE__ */ jsxs(ContentGroupsRoot, {
       className: classes.contentGroups,
       ...process.env.NODE_ENV !== "production" ? {
         [TEST_PROP_ID]: getNameDataTestId("contentGroups")
       } : {},
-      children: /* @__PURE__ */ jsx(ScrollBar, {
+      children: [/* @__PURE__ */ jsx("div", {
+        className: classes.contentGroupsLine
+      }), /* @__PURE__ */ jsx(ScrollBar, {
         children: /* @__PURE__ */ jsx(Fragment, {
           children: menuData.map((group) => /* @__PURE__ */ jsxs(WrapperGroup, {
             className: classes.wrapperGroup,
@@ -750,7 +820,7 @@ const ContentGroups = () => {
             })]
           }, group.title))
         })
-      })
+      })]
     });
   }
   return /* @__PURE__ */ jsx(SkeletonNavSectionVertical, {});
@@ -779,13 +849,16 @@ const ContentDesktop = () => {
           [TEST_PROP_ID]: getNameDataTestId("containerLogo")
         } : {},
         children: [/* @__PURE__ */ jsx(Image, {
-          width: "64px",
-          height: "64px",
+          width: "40px",
+          height: "40px",
           src: companyLogoSmallUrl,
           alt: "logo"
-        }, "Logo"), !collapsed && /* @__PURE__ */ jsx(Typography, {
+        }, "Logo"), /* @__PURE__ */ jsx(Typography, {
           variant: "subtitleDens",
           skeletonWidth: "100px",
+          style: {
+            width: collapsed ? "0px" : "auto"
+          },
           children: companyName
         })]
       })
@@ -795,86 +868,6 @@ const ContentDesktop = () => {
     })]
   });
 };
-const componentName = "M4LSideBar";
-generateUtilityClasses(
-  componentName,
-  [
-    "root",
-    "containerSideBarLogo",
-    "contentDesktop",
-    "contentMobile",
-    "collapseButton",
-    "containerLogo",
-    "contentGroups",
-    "wrapperGroup",
-    "wrapperGroupTitle",
-    "itemListMainRoot",
-    "containerListSubItem",
-    "navItemMainRoot",
-    "navItemRootContent",
-    "arrowIconRoot",
-    "navListSubItemRoot",
-    "navSubItemContentRoot",
-    "skeleton",
-    "lineLeft",
-    "wrapperSideBar",
-    "containerLogoButton",
-    "navItemMainTriangleTop",
-    "navItemMainTriangleBottom",
-    "navItemRootContentIconTypo",
-    "navSubItemContentBullet",
-    "containerLogoButtonLogo",
-    "containerLogoButtonIcon",
-    "collapseButtontriangleTop",
-    "collapseButtontriangleBottom",
-    "drawer",
-    "popover",
-    "collapsed",
-    "visible",
-    "subItemActive",
-    "itemMainActive"
-  ]
-);
-const getSideBarClassesByState = (ownerState) => {
-  const slots = {
-    root: ["root", ownerState.collapsed && "collapsed", ownerState.visible && "visible"],
-    containerSideBarLogo: ["containerSideBarLogo"],
-    contentDesktop: ["contentDesktop"],
-    contentMobile: ["contentMobile"],
-    collapseButton: ["collapseButton"],
-    containerLogo: ["containerLogo"],
-    contentGroups: ["contentGroups"],
-    wrapperGroup: ["wrapperGroup"],
-    wrapperGroupTitle: ["wrapperGroupTitle"],
-    itemListMainRoot: ["itemListMainRoot"],
-    containerListSubItem: ["containerListSubItem"],
-    navItemMainRoot: ["navItemMainRoot"],
-    navItemRootContent: ["navItemRootContent"],
-    arrowIconRoot: ["arrowIconRoot"],
-    navListSubItemRoot: ["navListSubItemRoot"],
-    navSubItemContentRoot: ["navSubItemContentRoot"],
-    skeleton: ["skeleton"],
-    subItemActive: ["subItemActive"],
-    lineLeft: ["lineLeft"],
-    wrapperSideBar: ["wrapperSideBar"],
-    containerLogoButton: ["containerLogoButton"],
-    itemMainActive: ["itemMainActive"],
-    navItemMainTriangleTop: ["navItemMainTriangleTop"],
-    navItemMainTriangleBottom: ["navItemMainTriangleBottom"],
-    navItemRootContentIconTypo: ["navItemRootContentIconTypo"],
-    navSubItemContentBullet: ["navSubItemContentBullet"],
-    containerLogoButtonLogo: ["containerLogoButtonLogo"],
-    containerLogoButtonIcon: ["containerLogoButtonIcon"],
-    collapseButtontriangleTop: ["collapseButtontriangleTop"],
-    collapseButtontriangleBottom: ["collapseButtontriangleBottom"],
-    drawer: ["drawer"],
-    popover: ["popover"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getComponentUtilityClass(componentName), {});
-  return {
-    ...composedClasses
-  };
-};
 const WrapperContentMobile = styled$1("div")(({
   theme
 }) => ({
@@ -912,6 +905,7 @@ const ContentMobile = () => {
       }
     },
     className: classes.drawer,
+    disablePortal: true,
     children: [/* @__PURE__ */ jsx("div", {
       className: classes.lineLeft,
       ...process.env.NODE_ENV !== "production" ? {
@@ -933,8 +927,8 @@ const ContentMobile = () => {
             [TEST_PROP_ID]: getNameDataTestId("containerLogo")
           } : {},
           children: [/* @__PURE__ */ jsx(Image, {
-            width: "64px",
-            height: "64px",
+            width: "40px",
+            height: "40px",
             src: companyLogoSmallUrl,
             alt: "logo"
           }, "Logo"), !collapsed && /* @__PURE__ */ jsx(Typography, {
@@ -959,7 +953,7 @@ const SideBar = (props) => {
     companyLogoSmallUrl,
     isItemActive,
     collapsedWidht = "280px",
-    unCollapsedWidht = "72px",
+    unCollapsedWidht = "52px",
     companyName
   } = props;
   const isDesktop = useResponsiveDesktop();
@@ -989,16 +983,11 @@ const SideBar = (props) => {
         classes,
         companyName
       },
-      children: /* @__PURE__ */ jsxs(WrapperSideBar, {
+      children: /* @__PURE__ */ jsx(WrapperSideBar, {
         className: classes.wrapperSideBar,
         width: !collapsed ? collapsedWidht : unCollapsedWidht,
         visible,
-        children: [/* @__PURE__ */ jsx("div", {
-          className: classes.lineLeft,
-          ...process.env.NODE_ENV !== "production" ? {
-            [TEST_PROP_ID]: getNameDataTestId("lineLeft")
-          } : {}
-        }), isDesktop ? /* @__PURE__ */ jsx(ContentDesktop, {}) : /* @__PURE__ */ jsx(ContentMobile, {})]
+        children: isDesktop ? /* @__PURE__ */ jsx(ContentDesktop, {}) : /* @__PURE__ */ jsx(ContentMobile, {})
       })
     })
   });