@m4l/components 9.2.59 → 9.2.60-13062025.beta.1

package/components/SideBar/context/sideBarContext/index.js

@@ -1,5 +1,8 @@
-import { jsx } from "react/jsx-runtime";
-import { createContext } from "react";
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useState, createContext } from "react";
+import { g as getComponentClasses } from "../../../../utils/getComponentSlotRoot.js";
+import { A as ALL_SIDEBAR_SLOTS, S as SIDEBAR_KEY_COMPONENT } from "../../constants.js";
+const classes = getComponentClasses(SIDEBAR_KEY_COMPONENT, ALL_SIDEBAR_SLOTS);
 const initialState = {
   anchored: false,
   visible: true,
@@ -14,11 +17,17 @@ const initialState = {
   },
   expandedWidth: "",
   companyName: "",
-  companySlogan: ""
+  companySlogan: "",
+  classes,
+  promotion: /* @__PURE__ */ jsx(Fragment, {}),
+  isHover: false,
+  setIsHover: (_isHover) => {
+  }
 };
 const SideBarContext = createContext(initialState);
 const SideBarProvider = (props) => {
   const { value, children } = props;
+  const [isHover, setIsHover] = useState(false);
   const {
     anchored,
     visible,
@@ -32,7 +41,8 @@ const SideBarProvider = (props) => {
     moduleSelectedId,
     companyName,
     companySlogan,
-    urlIconPrefix
+    urlIconPrefix,
+    promotion
   } = value;
   return (
     // Proporcionar el contexto con las propiedades desestructuradas
@@ -52,7 +62,11 @@ const SideBarProvider = (props) => {
           expandedWidth,
           companyName,
           companySlogan,
-          urlIconPrefix
+          urlIconPrefix,
+          classes,
+          promotion,
+          isHover,
+          setIsHover
         },
         children
       }

package/components/SideBar/context/sideBarContext/types.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { IMenuDataWithState, SideBarProps } from '../../types';
+import { ALL_SIDEBAR_SLOTS } from '../../constants';
 /**
  * Valor proporcionado por el proveedor del contexto Sidebar.
  */
@@ -9,13 +10,33 @@ export interface SideBarProviderValue extends SideBarProps {
      */
     anchored: boolean;
     menuData: Array<IMenuDataWithState>;
+    /**
+     * Las clases asociadas al proveedor del contexto Sidebar.
+     */
+    classes: Record<keyof typeof ALL_SIDEBAR_SLOTS, string>;
+    /**
+     * Promoción del sidebar, se renderiza en el footer del sidebar
+     */
+    promotion: SideBarProps['promotion'];
+    /**
+     * Indica si el sidebar está siendo hoverado
+     */
+    isHover: boolean;
+    /**
+     * Función para establecer el estado de hover
+     */
+    setIsHover: (value: boolean) => void;
 }
 /**
  * Propiedades para el proveedor del contexto Sidebar.
  */
 export interface SideBarProviderProps {
     /** value contendrá el valor que se proporcionará en el contexto*/
-    value: Omit<SideBarProviderValue, 'collapsed'>;
+    value: Omit<SideBarProviderValue, 'collapsed' | 'classes' | 'isHover' | 'setIsHover'>;
     /** children contendrá los elementos secundarios que estarán dentro del ámbito del proveedor del contexto.*/
     children: ReactNode;
+    /**
+     * Promoción del sidebar, se renderiza en el footer del sidebar
+     */
+    promotion?: SideBarProps['promotion'];
 }

package/components/SideBar/helpers/getMenuDataWithState/index.js

@@ -1,22 +1,36 @@
 const getMenuDataWithState = ({ menuData, moduleSelectedId, initialLevel = 0 }) => {
   const newMenuDataItems = menuData.map((item) => {
     if (!item.children && item.moduleId === moduleSelectedId) {
-      return { ...item, active: true, itemInTreeActive: true };
+      return { ...item, active: true, itemInTreeActive: false };
     }
     if (item.children) {
       let childrenItem = getMenuDataWithState({ menuData: item.children, moduleSelectedId, initialLevel: initialLevel + 1 });
       const indexTrue = childrenItem.findIndex((child) => child.active === true);
       if (initialLevel === 0) {
-        return { ...item, children: childrenItem };
+        return { ...item, children: childrenItem, active: false, itemInTreeActive: false };
       }
       if (indexTrue !== -1) {
-        childrenItem = childrenItem.map((child, index) => ({
-          ...child,
-          itemInTreeActive: index <= indexTrue ? true : false
-        }));
+        childrenItem = childrenItem.map((child, index) => {
+          if (child.active) {
+            return { ...child, itemInTreeActive: false };
+          }
+          if (index <= indexTrue) {
+            return {
+              ...child,
+              itemInTreeActive: true,
+              active: false
+            };
+          }
+          return { ...child, itemInTreeActive: false, active: false };
+        });
       }
-      const status = indexTrue >= 0 ? true : false;
-      return { ...item, children: childrenItem, itemInTreeActive: status, active: status };
+      const status = indexTrue >= 0;
+      return {
+        ...item,
+        children: childrenItem,
+        itemInTreeActive: status,
+        active: status && !!item.children
+      };
     }
     return { ...item, active: false, itemInTreeActive: false };
   });

package/components/SideBar/hooks/useCollapse/index.d.ts

@@ -0,0 +1 @@
+export { useCollapse } from './useCollapse';

package/components/SideBar/hooks/useCollapse/useCollapse.d.ts

@@ -0,0 +1,11 @@
+import { IMenuDataWithState } from '../../types';
+/**
+ * Hook para manejar el estado de colapso de un item del menu
+ * @param {IMenuDataWithState} item - Item del menu
+ * @returns {Object} - Objeto con el estado de colapso, el manejador de click y si el item tiene hijos
+ */
+export declare const useCollapse: (item: IMenuDataWithState, defaultOpen?: boolean) => {
+    isOpen: boolean;
+    handlerClick: () => void;
+    hasChildren: boolean | undefined;
+};

package/components/SideBar/hooks/useCollapse/useCollapse.js

@@ -0,0 +1,23 @@
+import { useState, useEffect } from "react";
+import { u as useSideBar } from "../useSideBar/index.js";
+import { useIsMobile } from "@m4l/graphics";
+const useCollapse = (item, defaultOpen = false) => {
+  const { onMenuItemClick, onToggleVisible } = useSideBar();
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const isMobile = useIsMobile();
+  const hasChildren = item.children && Array.isArray(item.children) && item.children.length > 0;
+  const handlerClick = () => {
+    onMenuItemClick(item);
+    setIsOpen(!isOpen);
+    if (isMobile && (!hasChildren || hasChildren === void 0)) {
+      onToggleVisible(true);
+    }
+  };
+  useEffect(() => {
+    setIsOpen(defaultOpen);
+  }, [defaultOpen]);
+  return { isOpen, handlerClick, hasChildren };
+};
+export {
+  useCollapse as u
+};

package/components/SideBar/slots/SideBarEnum.d.ts

@@ -7,7 +7,7 @@ export declare enum SideBarMobileSlots {
     containerSideBarMobile = "containerSideBarMobile"
 }
 export declare enum ContentGroupsSlots {
-    containerContentGroupsRoot = "containerContentGroupsRoot",
+    containerTreeGroupItems = "containerTreeGroupItems",
     containerContentGroups = "containerContentGroups",
     containerContentTitle = "containerContentTitle",
     containerContentNavItems = "containerContentNavItems",
@@ -24,8 +24,8 @@ export declare enum SideBarFooterSlots {
 export declare enum ContentComponentSlots {
     contentComponentRoot = "contentComponentRoot",
     contentComponentHide = "contentComponentHide",
-    containerComponent = "containerComponent"
-}
-export declare enum ContainerMenuItemsMainSlots {
-    containerMenuItems = "containerMenuItems"
+    containerTreeItemsAndPromotion = "containerTreeItemsAndPromotion",
+    containerNodeMenuItem = "containerNodeMenuItem",
+    containerNodeMenuItemMain = "containerNodeMenuItemMain",
+    menuItemMain = "menuItemMain"
 }

package/components/SideBar/slots/SideBarEnum.js

@@ -9,7 +9,7 @@ var SideBarMobileSlots = /* @__PURE__ */ ((SideBarMobileSlots2) => {
   return SideBarMobileSlots2;
 })(SideBarMobileSlots || {});
 var ContentGroupsSlots = /* @__PURE__ */ ((ContentGroupsSlots2) => {
-  ContentGroupsSlots2["containerContentGroupsRoot"] = "containerContentGroupsRoot";
+  ContentGroupsSlots2["containerTreeGroupItems"] = "containerTreeGroupItems";
   ContentGroupsSlots2["containerContentGroups"] = "containerContentGroups";
   ContentGroupsSlots2["containerContentTitle"] = "containerContentTitle";
   ContentGroupsSlots2["containerContentNavItems"] = "containerContentNavItems";
@@ -29,19 +29,17 @@ var SideBarFooterSlots = /* @__PURE__ */ ((SideBarFooterSlots2) => {
 var ContentComponentSlots = /* @__PURE__ */ ((ContentComponentSlots2) => {
   ContentComponentSlots2["contentComponentRoot"] = "contentComponentRoot";
   ContentComponentSlots2["contentComponentHide"] = "contentComponentHide";
-  ContentComponentSlots2["containerComponent"] = "containerComponent";
+  ContentComponentSlots2["containerTreeItemsAndPromotion"] = "containerTreeItemsAndPromotion";
+  ContentComponentSlots2["containerNodeMenuItem"] = "containerNodeMenuItem";
+  ContentComponentSlots2["containerNodeMenuItemMain"] = "containerNodeMenuItemMain";
+  ContentComponentSlots2["menuItemMain"] = "menuItemMain";
   return ContentComponentSlots2;
 })(ContentComponentSlots || {});
-var ContainerMenuItemsMainSlots = /* @__PURE__ */ ((ContainerMenuItemsMainSlots2) => {
-  ContainerMenuItemsMainSlots2["containerMenuItems"] = "containerMenuItems";
-  return ContainerMenuItemsMainSlots2;
-})(ContainerMenuItemsMainSlots || {});
 export {
   ContentComponentSlots as C,
   HeaderSidebarSlots as H,
-  SideBarDesktopSlots as S,
-  SideBarMobileSlots as a,
-  SideBarFooterSlots as b,
-  ContentGroupsSlots as c,
-  ContainerMenuItemsMainSlots as d
+  SideBarFooterSlots as S,
+  ContentGroupsSlots as a,
+  SideBarMobileSlots as b,
+  SideBarDesktopSlots as c
 };

package/components/SideBar/slots/SideBarSlots.d.ts

@@ -7,7 +7,7 @@ export declare const ContainerDesktopContentStyled: import('@emotion/styled').St
 export declare const ContainerBtnAnchoredStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const ContainerContentGroupsRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+export declare const ContainerTreeGroupItemsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, keyof import('react').HTMLAttributes<HTMLElement> | keyof import('react').ClassAttributes<HTMLElement>>, {}>;
 export declare const ContainerContentGroupsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
@@ -43,9 +43,15 @@ export declare const ContentComponentRootStyled: import('@emotion/styled').Style
 export declare const ContentComponentHideStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const ContainerComponentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+export declare const ContainerTreeItemsAndPromotionStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const ContainerMenuItemsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+export declare const ContainerNodeMenuItemStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
     ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const ContainerNodeMenuItemMainStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const MenuItemMainStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/MenuItem').MenuItemProps, keyof import('../../mui_extended/MenuItem').MenuItemProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').SideBarOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;

package/components/SideBar/slots/SideBarSlots.js

@@ -1,7 +1,8 @@
 import { styled } from "@mui/material/styles";
-import { S as SideBarDesktopSlots, a as SideBarMobileSlots, C as ContentComponentSlots, b as SideBarFooterSlots, H as HeaderSidebarSlots, c as ContentGroupsSlots, d as ContainerMenuItemsMainSlots } from "./SideBarEnum.js";
+import { c as SideBarDesktopSlots, b as SideBarMobileSlots, C as ContentComponentSlots, S as SideBarFooterSlots, a as ContentGroupsSlots, H as HeaderSidebarSlots } from "./SideBarEnum.js";
 import { S as SIDEBAR_KEY_COMPONENT } from "../constants.js";
 import { s as sideBarStyles } from "../styles.js";
+import { M as MenuItem } from "../../mui_extended/MenuItem/MenuItem.js";
 const ContainerDesktopRootStyled = styled("section", {
   name: SIDEBAR_KEY_COMPONENT,
   slot: SideBarDesktopSlots.containerDesktopRoot
@@ -14,10 +15,10 @@ const ContainerBtnAnchoredStyled = styled("div", {
   name: SIDEBAR_KEY_COMPONENT,
   slot: SideBarDesktopSlots.containerBtnAnchored
 })(sideBarStyles?.containerBtnAnchored);
-const ContainerContentGroupsRootStyled = styled("section", {
+const ContainerTreeGroupItemsStyled = styled("section", {
   name: SIDEBAR_KEY_COMPONENT,
-  slot: ContentGroupsSlots.containerContentGroupsRoot
-})(sideBarStyles?.containerContentGroupsRoot);
+  slot: ContentGroupsSlots.containerTreeGroupItems
+})(sideBarStyles?.containerTreeGroupItems);
 const ContainerContentGroupsStyled = styled("section", {
   name: SIDEBAR_KEY_COMPONENT,
   slot: ContentGroupsSlots.containerContentGroups
@@ -26,7 +27,7 @@ const ContainerContentTitleStyled = styled("div", {
   name: SIDEBAR_KEY_COMPONENT,
   slot: ContentGroupsSlots.containerContentTitle
 })(sideBarStyles?.containerContentTitle);
-const ContainerContentNavItemsStyled = styled("nav", {
+styled("nav", {
   name: SIDEBAR_KEY_COMPONENT,
   slot: ContentGroupsSlots.containerContentNavItems
 })(sideBarStyles?.containerContentNavItems);
@@ -38,11 +39,11 @@ const ContainerArrowIconRootStyled = styled("div", {
   name: SIDEBAR_KEY_COMPONENT,
   slot: ContentGroupsSlots.containerArrowIconRoot
 })(sideBarStyles?.containerArrowIconRoot);
-const ContainerHeaderSidebarRootStyled = styled("section", {
+styled("section", {
   name: SIDEBAR_KEY_COMPONENT,
   slot: HeaderSidebarSlots.containerHeaderSidebarRoot
 })(sideBarStyles?.containerHeaderSidebarRoot);
-const ContainerTitleSubtitleStyled = styled("div", {
+styled("div", {
   name: SIDEBAR_KEY_COMPONENT,
   slot: HeaderSidebarSlots.containerTitleSubtitle
 })(sideBarStyles?.containerTitleSubtitle);
@@ -62,29 +63,36 @@ const ContentComponentHideStyled = styled("div", {
   name: SIDEBAR_KEY_COMPONENT,
   slot: ContentComponentSlots.contentComponentHide
 })(sideBarStyles?.contentComponentHide);
-const ContainerComponentStyled = styled("div", {
+const ContainerTreeItemsAndPromotionStyled = styled("div", {
+  name: SIDEBAR_KEY_COMPONENT,
+  slot: ContentComponentSlots.containerTreeItemsAndPromotion
+})(sideBarStyles?.containerTreeItemsAndPromotion);
+const ContainerNodeMenuItemStyled = styled("div", {
+  name: SIDEBAR_KEY_COMPONENT,
+  slot: ContentComponentSlots.containerNodeMenuItem
+})(sideBarStyles?.containerNodeMenuItem);
+const ContainerNodeMenuItemMainStyled = styled("div", {
   name: SIDEBAR_KEY_COMPONENT,
-  slot: ContentComponentSlots.containerComponent
-})(sideBarStyles?.containerComponent);
-const ContainerMenuItemsStyled = styled("div", {
+  slot: ContentComponentSlots.containerNodeMenuItemMain
+})(sideBarStyles?.containerNodeMenuItemMain);
+const MenuItemMainStyled = styled(MenuItem, {
   name: SIDEBAR_KEY_COMPONENT,
-  slot: ContainerMenuItemsMainSlots.containerMenuItems
-})(sideBarStyles?.containerMenuItems);
+  slot: ContentComponentSlots.menuItemMain
+})(sideBarStyles?.menuItemMain);
 export {
   ContentComponentRootStyled as C,
-  ContentComponentHideStyled as a,
-  ContainerComponentStyled as b,
-  ContainerBtnAnchoredStyled as c,
-  ContainerContentGroupsRootStyled as d,
-  ContainerContentGroupsStyled as e,
-  ContainerContentTitleStyled as f,
-  ContainerContentNavItemsStyled as g,
-  ContainerMenuItemsStyled as h,
-  ContainerArrowIconRootStyled as i,
-  ContainerFooterStyled as j,
-  ContainerHeaderSidebarRootStyled as k,
-  ContainerTitleSubtitleStyled as l,
-  ContainerDesktopContentStyled as m,
-  ContainerDesktopRootStyled as n,
-  ContainerSideBarMobileStyled as o
+  MenuItemMainStyled as M,
+  ContainerBtnAnchoredStyled as a,
+  ContentComponentHideStyled as b,
+  ContainerTreeItemsAndPromotionStyled as c,
+  ContainerFooterStyled as d,
+  ContainerDesktopContentStyled as e,
+  ContainerDesktopRootStyled as f,
+  ContainerSideBarMobileStyled as g,
+  ContainerTreeGroupItemsStyled as h,
+  ContainerContentGroupsStyled as i,
+  ContainerContentTitleStyled as j,
+  ContainerArrowIconRootStyled as k,
+  ContainerNodeMenuItemStyled as l,
+  ContainerNodeMenuItemMainStyled as m
 };

package/components/SideBar/styles.js

@@ -1,12 +1,10 @@
 import { s as sideBarDesktopStyles } from "./subcomponents/SideBarDesktop/styles.js";
-import { c as contentGroupStyles } from "./subcomponents/ContentGroups/styles.js";
+import { c as contentGroupStyles } from "./subcomponents/TreeGroupItems/styles.js";
 import { h as headerSidebarStyles } from "./subcomponents/HeaderSidebar/styles.js";
-import { f as footerSideBarStyles } from "./subcomponents/FooterSidebar/styles.js";
+import { f as footerSideBarStyles } from "./subcomponents/Promotion/styles.js";
 import { c as contentComponentStyles } from "./subcomponents/ContentComponent/style.js";
-import { c as containerMenuItemsMainStyles } from "./subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/styles.js";
 import { s as sideBarMobileStyles } from "./subcomponents/SideBarMobile/styles.js";
 const sideBarStyles = {
-  ...containerMenuItemsMainStyles,
   ...sideBarDesktopStyles,
   ...sideBarMobileStyles,
   ...contentGroupStyles,

package/components/SideBar/subcomponents/ContentComponent/index.js

@@ -2,20 +2,22 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useIsMobile } from "@m4l/graphics";
 import { useEnvironment } from "@m4l/core";
 import { u as useSideBar } from "../../hooks/useSideBar/index.js";
-import { C as ContentComponentRootStyled, a as ContentComponentHideStyled, b as ContainerComponentStyled, c as ContainerBtnAnchoredStyled } from "../../slots/SideBarSlots.js";
-import { C as ContentGroups } from "../ContentGroups/index.js";
-import { F as FooterSidebar } from "../FooterSidebar/index.js";
-import { H as HeaderSidebar } from "../HeaderSidebar/index.js";
+import { C as ContentComponentRootStyled, a as ContainerBtnAnchoredStyled, b as ContentComponentHideStyled, c as ContainerTreeItemsAndPromotionStyled } from "../../slots/SideBarSlots.js";
+import { T as TreeGroupItems } from "../TreeGroupItems/index.js";
+import { P as Promotion } from "../Promotion/index.js";
 import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
 import { a as PATH_ARROW_RIGHT_ICON, C as CONTAINER_BTN_ANCHORED } from "../../constants.js";
+import { useRef } from "react";
 import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
 import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js";
 const ContentComponent = () => {
-  const { anchored, onToggleAnchored, companyName, companySlogan, companyLogoSmallUrl, expandedWidth, size } = useSideBar();
+  const { anchored, onToggleAnchored, expandedWidth, size, classes, isHover, setIsHover } = useSideBar();
   const ownerState = {
     expandedWidth,
     anchored
   };
+  const btnAnchoredRef = useRef(null);
+  const contentRef = useRef(null);
   const { host_static_assets, environment_assets } = useEnvironment();
   const isDesktop = !useIsMobile();
   const { currentSize } = useComponentSize(size);
@@ -24,34 +26,52 @@ const ContentComponent = () => {
     onToggleAnchored(!anchored);
   };
   return /* @__PURE__ */ jsxs(ContentComponentRootStyled, { ownerState, children: [
-    /* @__PURE__ */ jsx(ContentComponentHideStyled, { ownerState: { ...ownerState, isDesktop }, role: "complementary", "aria-label": "hidden content", children: /* @__PURE__ */ jsxs(ContainerComponentStyled, { ownerState, children: [
-      /* @__PURE__ */ jsx(
-        HeaderSidebar,
-        {
-          title: companyName ?? "",
-          subtitle: companySlogan ?? "",
-          srcIcon: companyLogoSmallUrl ?? ""
-        }
-      ),
-      /* @__PURE__ */ jsx(ContentGroups, { size: currentSize }),
-      /* @__PURE__ */ jsx(FooterSidebar, { onToggleAnchored, anchored })
-    ] }) }),
     isDesktop && /* @__PURE__ */ jsx(
       ContainerBtnAnchoredStyled,
       {
+        ref: btnAnchoredRef,
         className: classRootBtnAnchored,
         ownerState,
+        onMouseLeave: (event) => {
+          if (!anchored && contentRef.current && !contentRef.current.contains(event.relatedTarget)) {
+            setIsHover(false);
+          }
+        },
         children: /* @__PURE__ */ jsx(
           IconButton,
           {
             role: "anchored-button",
-            variant: "outline",
+            variant: anchored ? "contained" : "outline",
             rotationAngle: !anchored ? 0 : 180,
             onClick: handlerAnchoredButton,
-            src: `${host_static_assets}/${environment_assets}/${PATH_ARROW_RIGHT_ICON}`
+            src: `${host_static_assets}/${environment_assets}/${PATH_ARROW_RIGHT_ICON}`,
+            color: anchored ? "primary" : "default"
           }
         )
       }
+    ),
+    /* @__PURE__ */ jsx(
+      ContentComponentHideStyled,
+      {
+        ref: contentRef,
+        ownerState: { ...ownerState, isDesktop, isHover },
+        className: classes.contentComponentHide,
+        role: "complementary",
+        "aria-label": "hidden content",
+        onMouseEnter: () => {
+          !anchored && setIsHover(true);
+        },
+        onMouseLeave: (event) => {
+          if (!anchored && btnAnchoredRef.current && btnAnchoredRef.current.contains(event.relatedTarget)) {
+            return;
+          }
+          setIsHover(false);
+        },
+        children: /* @__PURE__ */ jsxs(ContainerTreeItemsAndPromotionStyled, { ownerState, children: [
+          /* @__PURE__ */ jsx(TreeGroupItems, { size: currentSize }),
+          /* @__PURE__ */ jsx(Promotion, { onToggleAnchored, anchored })
+        ] })
+      }
     )
   ] });
 };