@m4l/components 0.2.25 → 0.2.26

package/components/SideBar/{index.cdb70977.js → index.141dac10.js}

@@ -1,20 +1,18 @@
-import { styled, alpha } from "@mui/material/styles";
-import { styled as styled$1, generateUtilityClasses, ListItemText, Tooltip, ListItemButton, Collapse, useTheme, Skeleton, Drawer as Drawer$1 } from "@mui/material";
-import { useEnvironment, useBase, BaseProvider } from "@m4l/core";
-import { createContext, useContext, useState, useEffect } from "react";
+import { styled, generateUtilityClasses, ListItemText, ListItemButton, Collapse, Drawer as Drawer$1, useTheme } from "@mui/material";
+import { createContext, useState, useContext, useEffect } from "react";
 import { unstable_composeClasses } from "@mui/base";
 import { g as getComponentUtilityClass } from "../../utils/index.de903261.js";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
-import { I as Image } from "../Image/index.d034ca68.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.9ea23f87.js";
+import { styled as styled$1, alpha } from "@mui/material/styles";
+import { useEnvironment, useBase, BaseProvider } from "@m4l/core";
 import { useResponsiveDesktop } from "@m4l/graphics";
-import { I as Icon, A as ArrowIcon } from "../Icon/index.b920baf8.js";
+import { I as Icon, A as ArrowIcon } from "../Icon/index.8c744412.js";
 import { T as Typography } from "../mui_extended/Typography/index.379dd374.js";
 import clsx from "clsx";
 import { useLocation } from "react-router-dom";
-import { P as Popover } from "../mui_extended/Popover/index.b3eca6b1.js";
-import { S as ScrollBar } from "../ScrollBar/index.010f1b9d.js";
+import { I as Image } from "../Image/index.39b3b9d9.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.383f5496.js";
 import { useResponsive } from "@m4l/styles";
 const SideBarRoot = styled("div")(({
   theme
@@ -33,11 +31,9 @@ styled("div", {
 const WrapperSideBar = styled("div", {
   shouldForwardProp: (props) => props !== "width" && props !== "visible"
 })(({
-  width,
   visible,
   theme
 }) => ({
-  width,
   transition: theme.transitions.create("width", {
     duration: theme.transitions.duration.shorter
   }),
@@ -47,23 +43,6 @@ const WrapperSideBar = styled("div", {
     opacity: 0
   }
 }));
-const WrapperContentDesktop = styled$1("div")(() => ({
-  display: "flex",
-  flexDirection: "column",
-  height: "100%",
-  "& .m4l_image": {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "center",
-    alignItems: "center"
-  }
-}));
-const CollapseButtonRoot = styled$1("div")(() => ({
-  display: "flex"
-}));
-styled$1("div")(() => ({
-  display: "flex"
-}));
 const componentName = "M4LSideBar";
 generateUtilityClasses(
   componentName,
@@ -72,7 +51,9 @@ generateUtilityClasses(
     "containerSideBarLogo",
     "contentDesktop",
     "contentMobile",
+    "footer",
     "collapseButton",
+    "collapseButtonSecondary",
     "containerLogo",
     "contentGroups",
     "wrapperGroup",
@@ -87,24 +68,27 @@ generateUtilityClasses(
     "skeleton",
     "lineLeft",
     "wrapperSideBar",
+    "areaExpandMenu",
     "navItemMainTriangleTop",
     "navItemMainTriangleBottom",
     "navItemRootContentIconTypo",
     "navSubItemContentBullet",
     "containerLogoButtonLogo",
-    "containerLogoButtonIcon",
     "collapseButtontriangleTop",
     "collapseButtontriangleBottom",
     "subItemCollapseActive",
+    "containerContentGroupsFooter",
     "contentGroupsLine",
     "drawer",
     "popover",
+    "wrapperLogoFooter",
     "collapsed",
     "visible",
     "subItemActive",
     "itemMainActive",
     "variantDefault",
-    "variantComercial"
+    "variantComercial",
+    "overlapping"
   ]
 );
 const getSideBarClassesByState = (ownerState) => {
@@ -113,7 +97,9 @@ const getSideBarClassesByState = (ownerState) => {
     containerSideBarLogo: ["containerSideBarLogo"],
     contentDesktop: ["contentDesktop"],
     contentMobile: ["contentMobile"],
+    footer: ["footer"],
     collapseButton: ["collapseButton"],
+    collapseButtonSecondary: ["collapseButtonSecondary"],
     containerLogo: ["containerLogo"],
     contentGroups: ["contentGroups"],
     wrapperGroup: ["wrapperGroup"],
@@ -129,19 +115,22 @@ const getSideBarClassesByState = (ownerState) => {
     subItemActive: ["subItemActive"],
     lineLeft: ["lineLeft"],
     wrapperSideBar: ["wrapperSideBar"],
+    areaExpandMenu: ["areaExpandMenu"],
     itemMainActive: ["itemMainActive"],
     navItemMainTriangleTop: ["navItemMainTriangleTop"],
     navItemMainTriangleBottom: ["navItemMainTriangleBottom"],
     navItemRootContentIconTypo: ["navItemRootContentIconTypo"],
     navSubItemContentBullet: ["navSubItemContentBullet"],
     containerLogoButtonLogo: ["containerLogoButtonLogo"],
-    containerLogoButtonIcon: ["containerLogoButtonIcon"],
     collapseButtontriangleTop: ["collapseButtontriangleTop"],
     collapseButtontriangleBottom: ["collapseButtontriangleBottom"],
     subItemCollapseActive: ["subItemCollapseActive"],
+    containerContentGroupsFooter: ["containerContentGroupsFooter"],
     contentGroupsLine: ["contentGroupsLine"],
     drawer: ["drawer", ownerState.variantStyle === "variantDefault" && "variantDefault", ownerState.variantStyle === "variantComercial" && "variantComercial"],
-    popover: ["popover", ownerState.variantStyle === "variantDefault" && "variantDefault", ownerState.variantStyle === "variantComercial" && "variantComercial"]
+    popover: ["popover", ownerState.variantStyle === "variantDefault" && "variantDefault", ownerState.variantStyle === "variantComercial" && "variantComercial"],
+    overlapping: ["overlapping"],
+    wrapperLogoFooter: ["wrapperLogoFooter"]
   };
   const composedClasses = unstable_composeClasses(slots, getComponentUtilityClass(componentName), {});
   return {
@@ -155,14 +144,16 @@ const initialState = {
   },
   onToggleVisible: () => {
   },
+  onToggleOverlay: () => {
+  },
+  overlay: false,
   menuData: [],
   companyLogoNormalUrl: "",
   companyLogoSmallUrl: "",
   onClick: () => {
   },
   isItemActive: () => false,
-  collapsedWidht: "",
-  unCollapsedWidht: "",
+  expandedWidth: "",
   classes: getSideBarClassesByState({
     collapsed: false,
     visible: true
@@ -175,6 +166,10 @@ const SideBarProvider = (props) => {
     value,
     children
   } = props;
+  const [overlay, setOverlay] = useState(false);
+  const onToggleOverlay = (value2) => {
+    setOverlay(value2);
+  };
   const {
     collapsed,
     visible,
@@ -185,11 +180,11 @@ const SideBarProvider = (props) => {
     companyLogoNormalUrl,
     companyLogoSmallUrl,
     isItemActive,
-    collapsedWidht,
-    unCollapsedWidht,
+    expandedWidth,
     classes,
     companyName
   } = value;
+  console.log("status collapsed", collapsed);
   return /* @__PURE__ */ jsx(SideBarContext.Provider, {
     value: {
       collapsed,
@@ -201,10 +196,11 @@ const SideBarProvider = (props) => {
       companyLogoNormalUrl,
       companyLogoSmallUrl,
       isItemActive,
-      collapsedWidht,
-      unCollapsedWidht,
+      expandedWidth,
       classes,
-      companyName
+      companyName,
+      onToggleOverlay,
+      overlay
     },
     children
   });
@@ -215,51 +211,7 @@ const SIDEBAR_PREFIX = "M4LSideBar";
 const getNameDataTestId = (KEY) => {
   return `${SIDEBAR_PREFIX}-${KEY}`;
 };
-function CollapseButton(props) {
-  const {
-    onToggleCollapse,
-    collapsed
-  } = props;
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const {
-    classes,
-    companyLogoNormalUrl
-  } = useSideBar$1();
-  const handleButtonClick = () => {
-    onToggleCollapse();
-  };
-  return /* @__PURE__ */ jsxs(CollapseButtonRoot, {
-    className: classes.collapseButton,
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameDataTestId("collapseButton")
-    } : {},
-    children: [!collapsed && /* @__PURE__ */ jsx("div", {
-      className: classes.containerLogoButtonLogo,
-      children: /* @__PURE__ */ jsx(Image, {
-        width: "100%",
-        height: "100%",
-        src: companyLogoNormalUrl || "",
-        alt: "logo"
-      }, "Logo")
-    }), /* @__PURE__ */ jsx("div", {
-      className: classes.containerLogoButtonIcon,
-      style: {
-        transform: `rotate(${collapsed ? 0 : 180}deg)`
-      },
-      children: /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          onClick: handleButtonClick,
-          src: `${host_static_assets}/${environment_assets}/frontend/components/sidebar/assets/icons/arrow_right.svg`
-        }
-      )
-    })]
-  });
-}
-const WrapperGroup = styled$1("ul")(({
+const WrapperGroup = styled("ul")(({
   theme
 }) => ({
   display: "flex",
@@ -269,15 +221,12 @@ const WrapperGroup = styled$1("ul")(({
   listStyle: "none",
   padding: "0px"
 }));
-const ContentGroupsRoot = styled$1("ul")(() => ({
+const ContentGroupsRoot = styled("ul")(() => ({
   display: "flex",
   width: "100%",
   height: "100%"
 }));
-const WrapperGroupTitle = styled$1("li", {
-  shouldForwardProp: (props) => props !== "collapsed"
-})(({
-  collapsed,
+const WrapperGroupTitle = styled("li")(({
   theme
 }) => ({
   ...theme.typography.overline,
@@ -287,14 +236,9 @@ const WrapperGroupTitle = styled$1("li", {
   color: theme.palette.text.primary,
   transition: theme.transitions.create("opacity", {
     duration: theme.transitions.duration.shorter
-  }),
-  ...collapsed && {
-    opacity: 0,
-    width: 0,
-    overflow: "hidden"
-  }
+  })
 }));
-const NavItemMainRoot = styled("div", {
+const NavItemMainRoot = styled$1("div", {
   shouldForwardProp: (prop) => prop !== "activeRoot"
 })(({
   activeRoot,
@@ -306,7 +250,7 @@ const NavItemMainRoot = styled("div", {
     backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
   }
 }));
-styled(ListItemText, {
+styled$1(ListItemText, {
   shouldForwardProp: (prop) => prop !== "isCollapse"
 })(({
   isCollapse,
@@ -321,28 +265,6 @@ styled(ListItemText, {
     opacity: 0
   }
 }));
-const NavItemMainContentRoot = styled$1("div", {
-  shouldForwardProp: (props) => props !== "collapsed"
-})(({
-  collapsed
-}) => ({
-  ...collapsed && {
-    padding: "0",
-    display: "block"
-  },
-  "& .M4LTypography-root": {
-    ...collapsed && {
-      width: 0,
-      opacity: 0
-    }
-  },
-  "& .m4l_icon": {
-    ...collapsed && {
-      width: "100%",
-      height: "100%"
-    }
-  }
-}));
 const NavItemMainContent = (props) => {
   const {
     item,
@@ -361,7 +283,6 @@ const NavItemMainContent = (props) => {
     environment_assets
   } = useEnvironment();
   const {
-    collapsed,
     classes
   } = useSideBar$1();
   const isDesktop = useResponsiveDesktop();
@@ -370,34 +291,82 @@ const NavItemMainContent = (props) => {
     handlerOpen && handlerOpen(event);
     !isDesktop && changeVisible && changeVisible();
   };
-  return /* @__PURE__ */ jsx(Tooltip, {
-    title,
-    placement: "right",
-    children: /* @__PURE__ */ jsxs(NavItemMainContentRoot, {
-      className: classes.navItemRootContent,
-      collapsed,
-      id: "WrapperNavItemRootContent",
-      onClick: handlerClick,
-      children: [/* @__PURE__ */ jsxs("div", {
-        className: classes.navItemRootContentIconTypo,
-        children: [icon ? /* @__PURE__ */ jsx(Icon, {
-          src: `${host_static_assets}/${environment_assets}/frontend/domain/microfrontends/${icon}`
-        }) : null, /* @__PURE__ */ jsx(Typography, {
-          variant: "paragraph",
-          color: "text.secondary",
-          children: !collapsed ? title : " "
-        })]
-      }), !collapsed && children ? /* @__PURE__ */ jsx(ArrowIcon, {
-        openState: open
-      }) : null]
-    })
+  return /* @__PURE__ */ jsxs("div", {
+    className: classes.navItemRootContent,
+    id: "WrapperNavItemRootContent",
+    onClick: handlerClick,
+    children: [/* @__PURE__ */ jsxs("div", {
+      className: classes.navItemRootContentIconTypo,
+      children: [icon ? /* @__PURE__ */ jsx(Icon, {
+        src: `${host_static_assets}/${environment_assets}/frontend/domain/microfrontends/${icon}`
+      }) : null, /* @__PURE__ */ jsx(Typography, {
+        variant: "paragraph",
+        color: "text.secondary",
+        children: title
+      })]
+    }), children ? /* @__PURE__ */ jsx(ArrowIcon, {
+      openState: open
+    }) : null]
   });
 };
-const NavListSubItemRoot = styled$1("div")(() => ({
+function NavItemMain(props) {
+  const {
+    item,
+    setOpen,
+    open
+  } = props;
+  const {
+    children
+  } = item;
+  const {
+    onClick,
+    isItemActive,
+    onToggleVisible,
+    classes
+  } = useSideBar$1();
+  const active = isItemActive(item);
+  if (children) {
+    return /* @__PURE__ */ jsx(Fragment, {
+      children: /* @__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(NavItemMainContent, {
+          item,
+          open
+        })
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(NavItemMainRoot, {
+    activeRoot: active,
+    className: classes.navItemMainRoot,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("navItemMainRoot")
+    } : {},
+    children: /* @__PURE__ */ jsx(NavItemMainContent, {
+      item,
+      onClick,
+      changeVisible: onToggleVisible,
+      open
+    })
+  });
+}
+const ContainerListSubItem = styled("div")(({
+  theme
+}) => ({
+  width: "100%",
+  height: "auto",
+  paddingLeft: theme.spacing(2.75)
+}));
+const NavListSubItemRoot = styled("div")(() => ({
   display: "flex",
   flexDirection: "column"
 }));
-const NavSubItemContentRoot = styled$1(ListItemButton)(({
+const NavSubItemContentRoot = styled(ListItemButton)(({
   theme
 }) => ({
   display: "flex",
@@ -409,7 +378,7 @@ const NavSubItemContentRoot = styled$1(ListItemButton)(({
     marginRight: theme.spacing(1)
   }
 }));
-styled$1("span", {
+styled("span", {
   shouldForwardProp: (props) => props !== "active"
 })(({
   theme,
@@ -572,107 +541,11 @@ function NavListSubItem(props) {
     })
   });
 }
-function NavItemMain(props) {
-  const {
-    item,
-    setOpen,
-    open
-  } = props;
-  const {
-    children
-  } = item;
-  const {
-    collapsed,
-    onClick,
-    isItemActive,
-    onToggleVisible,
-    classes
-  } = useSideBar$1();
-  const [popoverStatus, setPopoverStatus] = useState(null);
-  const theme = useTheme();
-  const active = isItemActive(item);
-  const handleOpen = (event) => {
-    setPopoverStatus(event.currentTarget);
-  };
-  const handleClose = () => {
-    setPopoverStatus(null);
-  };
-  if (children) {
-    return /* @__PURE__ */ jsxs(Fragment, {
-      children: [collapsed && /* @__PURE__ */ jsxs(NavItemMainRoot, {
-        activeRoot: active,
-        className: classes.navItemMainRoot,
-        ...process.env.NODE_ENV !== "production" ? {
-          [TEST_PROP_ID]: getNameDataTestId("navItemMainRoot")
-        } : {},
-        children: [/* @__PURE__ */ jsx(NavItemMainContent, {
-          item,
-          handlerOpen: handleOpen,
-          open
-        }), /* @__PURE__ */ jsx(Popover, {
-          className: classes.popover,
-          open: Boolean(popoverStatus),
-          anchorEl: popoverStatus,
-          onClose: handleClose,
-          arrowType: "left-center",
-          sx: {
-            ...theme.components?.M4LSideBarPopover?.styleOverrides,
-            ml: "14px"
-          },
-          anchorOrigin: {
-            vertical: "center",
-            horizontal: "right"
-          },
-          transformOrigin: {
-            vertical: "center",
-            horizontal: "left"
-          },
-          children: (item.children || []).map((itemList) => /* @__PURE__ */ jsx(NavListSubItem, {
-            item: itemList,
-            closePopover: handleClose
-          }, itemList.title))
-        })]
-      }), !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(NavItemMainContent, {
-          item,
-          open
-        })
-      })]
-    });
-  }
-  return /* @__PURE__ */ jsx(NavItemMainRoot, {
-    activeRoot: active,
-    className: classes.navItemMainRoot,
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameDataTestId("navItemMainRoot")
-    } : {},
-    children: /* @__PURE__ */ jsx(NavItemMainContent, {
-      item,
-      onClick,
-      changeVisible: onToggleVisible,
-      open
-    })
-  });
-}
-const ContainerListSubItem = styled$1("div")(({
-  theme
-}) => ({
-  width: "100%",
-  height: "auto",
-  paddingLeft: theme.spacing(2.75)
-}));
 function ItemListMain(props) {
   const {
     list
   } = props;
   const {
-    collapsed: isSideBarCollapsed,
     isItemActive,
     classes
   } = useSideBar$1();
@@ -727,7 +600,7 @@ function ItemListMain(props) {
           item: list,
           open,
           setOpen
-        }), !isSideBarCollapsed && /* @__PURE__ */ jsx(Collapse, {
+        }), /* @__PURE__ */ jsx(Collapse, {
           in: open,
           timeout: "auto",
           unmountOnExit: true,
@@ -756,101 +629,8 @@ function ItemListMain(props) {
     })
   });
 }
-const WrapperSKTNavSectionVertical = styled$1("div", {
-  shouldForwardProp: (props) => props !== "collapse"
-})(() => ({
-  margin: "0",
-  padding: "0",
-  position: "relative",
-  height: "100%"
-}));
-const NavSectionVerticalItem = styled$1("div")(() => ({
-  display: "grid",
-  gridTemplateColumns: "16px 1fr",
-  gap: "8px",
-  alignItems: "center",
-  width: "100%",
-  padding: "8px",
-  height: "36px"
-}));
-const NavSectionVerticalTitle = styled$1("div")(() => ({
-  display: "flex",
-  justifyContent: "flex-start",
-  height: "60px",
-  padding: "20px",
-  alignItems: "center"
-}));
-const NavSectionVerticalItemDivider = styled$1("div")(({
-  theme
-}) => ({
-  display: "flex",
-  height: "2px",
-  marginRight: "14px",
-  backgroundColor: theme.palette.state?.default
-}));
-const SkeletonNavSectionVertical = () => {
-  const {
-    collapsed,
-    classes
-  } = useSideBar$1();
-  return /* @__PURE__ */ jsxs(WrapperSKTNavSectionVertical, {
-    collapse: collapsed,
-    className: classes.skeleton,
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameDataTestId("skeleton")
-    } : {},
-    children: [/* @__PURE__ */ jsx(NavSectionVerticalItemDivider, {}), /* @__PURE__ */ jsx(NavSectionVerticalTitle, {
-      children: !collapsed && /* @__PURE__ */ jsx(Skeleton, {
-        variant: "text",
-        height: "20px",
-        width: "80px"
-      })
-    }), /* @__PURE__ */ jsxs(NavSectionVerticalItem, {
-      children: [/* @__PURE__ */ jsx(Skeleton, {
-        variant: "circular",
-        width: "16px",
-        height: "16px"
-      }), !collapsed && /* @__PURE__ */ jsx(Skeleton, {
-        variant: "text",
-        height: "20px",
-        width: "40%"
-      })]
-    }), /* @__PURE__ */ jsxs(NavSectionVerticalItem, {
-      children: [/* @__PURE__ */ jsx(Skeleton, {
-        variant: "circular",
-        width: "16px",
-        height: "16px"
-      }), !collapsed && /* @__PURE__ */ jsx(Skeleton, {
-        variant: "text",
-        height: "20px",
-        width: "70%"
-      })]
-    }), /* @__PURE__ */ jsxs(NavSectionVerticalItem, {
-      children: [/* @__PURE__ */ jsx(Skeleton, {
-        variant: "circular",
-        width: "16px",
-        height: "16px"
-      }), !collapsed && /* @__PURE__ */ jsx(Skeleton, {
-        variant: "text",
-        height: "20px",
-        width: "30%"
-      })]
-    }), /* @__PURE__ */ jsxs(NavSectionVerticalItem, {
-      children: [/* @__PURE__ */ jsx(Skeleton, {
-        variant: "circular",
-        width: "16px",
-        height: "16px"
-      }), !collapsed && /* @__PURE__ */ jsx(Skeleton, {
-        variant: "text",
-        height: "20px",
-        width: "50%"
-      })]
-    })]
-  });
-};
 const ContentGroups = () => {
   const {
-    collapsed,
     menuData,
     classes
   } = useSideBar$1();
@@ -863,88 +643,148 @@ const ContentGroups = () => {
       } : {},
       children: [/* @__PURE__ */ jsx("div", {
         className: classes.contentGroupsLine
-      }), /* @__PURE__ */ jsx(ScrollBar, {
-        children: /* @__PURE__ */ jsx(Fragment, {
-          children: menuData.map((group) => /* @__PURE__ */ jsxs(WrapperGroup, {
-            className: classes.wrapperGroup,
-            ...process.env.NODE_ENV !== "production" ? {
-              [TEST_PROP_ID]: getNameDataTestId("wrapperGroup")
-            } : {},
-            children: [/* @__PURE__ */ jsx(WrapperGroupTitle, {
-              collapsed,
-              className: classes.wrapperGroupTitle,
-              children: /* @__PURE__ */ jsx(Typography, {
-                variant: "paragraphDens",
-                skeletonWidth: "100px",
-                children: group.title
-              })
-            }), /* @__PURE__ */ jsx(ScrollBar, {
-              children: /* @__PURE__ */ jsx("div", {
-                style: {
-                  display: "flex",
-                  flexDirection: "column",
-                  width: "100%",
-                  height: "auto"
-                },
-                children: group.children?.map((list, id) => /* @__PURE__ */ jsx(ItemListMain, {
-                  list,
-                  itemMainActive,
-                  setItemMainActive,
-                  id
-                }, id))
-              })
-            })]
-          }, group.title))
-        })
-      })]
+      }), menuData.map((group) => /* @__PURE__ */ jsxs(WrapperGroup, {
+        className: classes.wrapperGroup,
+        ...process.env.NODE_ENV !== "production" ? {
+          [TEST_PROP_ID]: getNameDataTestId("wrapperGroup")
+        } : {},
+        children: [/* @__PURE__ */ jsx(WrapperGroupTitle, {
+          className: classes.wrapperGroupTitle,
+          children: /* @__PURE__ */ jsx(Typography, {
+            variant: "paragraphDens",
+            skeletonWidth: "100px",
+            children: group.title
+          })
+        }), /* @__PURE__ */ jsx("div", {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            width: "100%",
+            height: "auto"
+          },
+          children: group.children?.map((list, id) => /* @__PURE__ */ jsx(ItemListMain, {
+            list,
+            itemMainActive,
+            setItemMainActive,
+            id
+          }, id))
+        })]
+      }, group.title))]
     });
   }
-  return /* @__PURE__ */ jsx(SkeletonNavSectionVertical, {});
+  return null;
 };
-const ContentDesktop = () => {
+const CollapseButtonRoot = styled("div")(() => ({
+  display: "flex"
+}));
+styled("div")(() => ({
+  display: "flex"
+}));
+function FooterSidebar(_props) {
+  const {
+    classes,
+    companyLogoNormalUrl
+  } = useSideBar$1();
+  return /* @__PURE__ */ jsx(CollapseButtonRoot, {
+    className: classes.footer,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("footer")
+    } : {},
+    children: /* @__PURE__ */ jsx("div", {
+      className: classes.wrapperLogoFooter,
+      children: /* @__PURE__ */ jsx("div", {
+        className: classes.containerLogoButtonLogo,
+        children: /* @__PURE__ */ jsx(Image, {
+          width: "192px",
+          height: "28px",
+          src: companyLogoNormalUrl || "",
+          alt: "logo"
+        }, "Logo")
+      })
+    })
+  });
+}
+const MENU_COLLAPSED_SIZE = "14px";
+const MENU_COLLAPSED_CONTAINER_SIZE = "15px";
+const ContentComponent = () => {
   const {
     collapsed,
     onToggleCollapse,
-    companyLogoSmallUrl,
     classes,
-    companyName
+    onToggleOverlay,
+    overlay
   } = useSideBar$1();
-  return /* @__PURE__ */ jsxs(WrapperContentDesktop, {
-    className: classes.contentDesktop,
+  const handlerOnMouseEnter = () => {
+    if (collapsed) {
+      onToggleOverlay(true);
+    }
+  };
+  const handlerOnMouseLeave = () => {
+    if (collapsed) {
+      onToggleOverlay(false);
+    }
+  };
+  const handlerOnMouseEnterIconButton = () => {
+    if (collapsed && overlay) {
+      onToggleOverlay(true);
+    }
+  };
+  const handlerOnMouseLeaveIconButton = () => {
+    if (collapsed && overlay) {
+      onToggleOverlay(false);
+    }
+  };
+  const handleButtonClick = () => {
+    onToggleCollapse();
+  };
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  return /* @__PURE__ */ jsxs("div", {
+    className: clsx(classes.contentDesktop, overlay && classes.overlapping),
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_ID]: getNameDataTestId("contentDesktop")
     } : {},
-    children: [companyLogoSmallUrl ? /* @__PURE__ */ jsx("div", {
-      className: classes.containerSideBarLogo,
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId("containerSideBarLogo")
-      } : {},
-      children: /* @__PURE__ */ jsxs("div", {
-        className: classes.containerLogo,
-        ...process.env.NODE_ENV !== "production" ? {
-          [TEST_PROP_ID]: getNameDataTestId("containerLogo")
-        } : {},
-        children: [/* @__PURE__ */ jsx(Image, {
-          width: "60px",
-          height: "60px",
-          src: companyLogoSmallUrl,
-          alt: "logo"
-        }, "Logo"), companyName ? /* @__PURE__ */ jsx(Typography, {
-          variant: "subtitleDens",
-          skeletonWidth: "100px",
-          style: {
-            width: collapsed ? "0px" : "auto"
-          },
-          children: companyName
-        }) : null]
-      })
-    }) : null, /* @__PURE__ */ jsx(ContentGroups, {}), /* @__PURE__ */ jsx(CollapseButton, {
-      onToggleCollapse,
-      collapsed
+    children: [/* @__PURE__ */ jsx(IconButton, {
+      variant: "line",
+      rotationAngle: !collapsed ? 180 : 0,
+      onClick: () => handleButtonClick(),
+      onMouseEnter: () => handlerOnMouseEnterIconButton(),
+      onMouseLeave: () => handlerOnMouseLeaveIconButton(),
+      className: classes.collapseButton,
+      src: `${host_static_assets}/${environment_assets}/frontend/components/sidebar/assets/icons/arrow_right.svg`
+    }), /* @__PURE__ */ jsxs("div", {
+      className: classes.containerContentGroupsFooter,
+      style: {
+        minWidth: MENU_COLLAPSED_CONTAINER_SIZE
+      },
+      onMouseEnter: () => handlerOnMouseEnter(),
+      onMouseLeave: () => handlerOnMouseLeave(),
+      children: [/* @__PURE__ */ jsx(ContentGroups, {}), /* @__PURE__ */ jsx(FooterSidebar, {
+        onToggleCollapse,
+        collapsed
+      })]
     })]
   });
 };
-const WrapperContentMobile = styled$1("div")(({
+const ContentDesktop = () => {
+  const {
+    classes,
+    collapsed,
+    expandedWidth,
+    overlay
+  } = useSideBar$1();
+  const areaExpandMenuSize = collapsed ? !overlay ? MENU_COLLAPSED_SIZE : expandedWidth : expandedWidth;
+  return /* @__PURE__ */ jsx("div", {
+    className: classes.areaExpandMenu,
+    style: {
+      width: areaExpandMenuSize
+    },
+    children: /* @__PURE__ */ jsx(ContentComponent, {})
+  });
+};
+const WrapperContentMobile = styled("div")(({
   theme
 }) => ({
   "& .m4l_image": {
@@ -955,7 +795,7 @@ const WrapperContentMobile = styled$1("div")(({
     flexShrink: 0
   }
 }));
-styled$1("div")(({
+styled("div")(({
   theme
 }) => ({
   width: "100%",
@@ -976,7 +816,7 @@ const ContentMobile = () => {
     visible,
     onToggleVisible,
     companyLogoSmallUrl,
-    collapsedWidht,
+    expandedWidth,
     collapsed,
     classes,
     companyName
@@ -987,7 +827,7 @@ const ContentMobile = () => {
     onClose: onToggleVisible,
     PaperProps: {
       sx: {
-        width: collapsedWidht
+        width: expandedWidth
       }
     },
     className: classes.drawer,
@@ -1042,12 +882,12 @@ const SideBar = (props) => {
     companyLogoNormalUrl,
     companyLogoSmallUrl,
     isItemActive,
-    collapsedWidht = "280px",
-    unCollapsedWidht = "52px",
+    expandedWidth = "280px",
     companyName,
     variantStyle = "variantDefault"
   } = props;
   const isMobile = useResponsive("down", "md");
+  console.log("collapsed status", collapsed);
   const ownerState = {
     collapsed,
     visible,
@@ -1070,15 +910,16 @@ const SideBar = (props) => {
         companyLogoNormalUrl,
         companyLogoSmallUrl,
         isItemActive,
-        collapsedWidht,
-        unCollapsedWidht,
+        expandedWidth,
         classes,
         companyName
       },
       children: /* @__PURE__ */ jsx(WrapperSideBar, {
         className: classes.wrapperSideBar,
-        width: !collapsed ? collapsedWidht : unCollapsedWidht,
         visible,
+        style: {
+          width: collapsed ? MENU_COLLAPSED_SIZE : expandedWidth
+        },
         children: !isMobile ? /* @__PURE__ */ jsx(ContentDesktop, {}) : /* @__PURE__ */ jsx(ContentMobile, {})
       })
     })