@m4l/components 9.2.25 → 9.2.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/SideBar/constants.js +3 -3
- package/components/SideBar/slots/SideBarEnum.d.ts +3 -1
- package/components/SideBar/slots/SideBarEnum.js +2 -0
- package/components/SideBar/slots/SideBarSlots.d.ts +6 -0
- package/components/SideBar/slots/SideBarSlots.js +23 -13
- package/components/SideBar/subcomponents/ContentComponent/index.js +41 -10
- package/components/SideBar/subcomponents/ContentComponent/style.js +30 -1
- package/components/SideBar/subcomponents/ContentGroups/index.js +1 -1
- package/components/SideBar/subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/index.js +2 -2
- package/components/SideBar/subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/subcomponents/ArrowIcon/index.js +2 -2
- package/components/SideBar/subcomponents/FooterSidebar/index.js +1 -1
- package/components/SideBar/subcomponents/HeaderSidebar/index.js +1 -1
- package/components/SideBar/subcomponents/SideBarDesktop/index.js +14 -52
- package/components/SideBar/subcomponents/SideBarDesktop/styles.js +36 -33
- package/components/SideBar/subcomponents/SideBarMobile/index.js +1 -1
- package/package.json +1 -1
|
@@ -10,9 +10,9 @@ export {
|
|
|
10
10
|
CONTAINER_BTN_ANCHORED as C,
|
|
11
11
|
ITEM_ACTIVE as I,
|
|
12
12
|
LIST_MENU_ITEM as L,
|
|
13
|
-
|
|
13
|
+
PATH_ARROW_RIGHT_ICON as P,
|
|
14
14
|
SIDEBAR_KEY_COMPONENT as S,
|
|
15
15
|
ITEM_IN_TREE_ACTIVE as a,
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
PATH_ICONS as b,
|
|
17
|
+
PATH_ARROW_DOWN_ICON as c
|
|
18
18
|
};
|
|
@@ -22,7 +22,9 @@ export declare enum SideBarFooterSlots {
|
|
|
22
22
|
containerFooter = "containerFooter"
|
|
23
23
|
}
|
|
24
24
|
export declare enum ContentComponentSlots {
|
|
25
|
-
contentComponentRoot = "contentComponentRoot"
|
|
25
|
+
contentComponentRoot = "contentComponentRoot",
|
|
26
|
+
contentComponentHide = "contentComponentHide",
|
|
27
|
+
containerComponent = "containerComponent"
|
|
26
28
|
}
|
|
27
29
|
export declare enum ContainerMenuItemsMainSlots {
|
|
28
30
|
containerMenuItems = "containerMenuItems"
|
|
@@ -28,6 +28,8 @@ var SideBarFooterSlots = /* @__PURE__ */ ((SideBarFooterSlots2) => {
|
|
|
28
28
|
})(SideBarFooterSlots || {});
|
|
29
29
|
var ContentComponentSlots = /* @__PURE__ */ ((ContentComponentSlots2) => {
|
|
30
30
|
ContentComponentSlots2["contentComponentRoot"] = "contentComponentRoot";
|
|
31
|
+
ContentComponentSlots2["contentComponentHide"] = "contentComponentHide";
|
|
32
|
+
ContentComponentSlots2["containerComponent"] = "containerComponent";
|
|
31
33
|
return ContentComponentSlots2;
|
|
32
34
|
})(ContentComponentSlots || {});
|
|
33
35
|
var ContainerMenuItemsMainSlots = /* @__PURE__ */ ((ContainerMenuItemsMainSlots2) => {
|
|
@@ -40,6 +40,12 @@ export declare const ContainerSideBarMobileStyled: import('@emotion/styled').Sty
|
|
|
40
40
|
export declare const ContentComponentRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
|
|
41
41
|
ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
|
|
42
42
|
}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
|
|
43
|
+
export declare const ContentComponentHideStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
|
|
44
|
+
ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
|
|
45
|
+
}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
|
|
46
|
+
export declare const ContainerComponentStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
|
|
47
|
+
ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
|
|
48
|
+
}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
|
|
43
49
|
export declare const ContainerMenuItemsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Partial<import('../types').SideBarOwnerState> & Record<string, unknown> & {
|
|
44
50
|
ownerState: Partial<import('../types').SideBarOwnerState> & Record<string, unknown>;
|
|
45
51
|
}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
|
|
@@ -58,23 +58,33 @@ const ContentComponentRootStyled = styled("div", {
|
|
|
58
58
|
name: SIDEBAR_KEY_COMPONENT,
|
|
59
59
|
slot: ContentComponentSlots.contentComponentRoot
|
|
60
60
|
})(sideBarStyles?.contentComponentRoot);
|
|
61
|
+
const ContentComponentHideStyled = styled("div", {
|
|
62
|
+
name: SIDEBAR_KEY_COMPONENT,
|
|
63
|
+
slot: ContentComponentSlots.contentComponentHide
|
|
64
|
+
})(sideBarStyles?.contentComponentHide);
|
|
65
|
+
const ContainerComponentStyled = styled("div", {
|
|
66
|
+
name: SIDEBAR_KEY_COMPONENT,
|
|
67
|
+
slot: ContentComponentSlots.containerComponent
|
|
68
|
+
})(sideBarStyles?.containerComponent);
|
|
61
69
|
const ContainerMenuItemsStyled = styled("div", {
|
|
62
70
|
name: SIDEBAR_KEY_COMPONENT,
|
|
63
71
|
slot: ContainerMenuItemsMainSlots.containerMenuItems
|
|
64
72
|
})(sideBarStyles?.containerMenuItems);
|
|
65
73
|
export {
|
|
66
74
|
ContentComponentRootStyled as C,
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
75
|
+
ContentComponentHideStyled as a,
|
|
76
|
+
ContainerComponentStyled as b,
|
|
77
|
+
ContainerBtnAnchoredStyled as c,
|
|
78
|
+
ContainerContentGroupsRootStyled as d,
|
|
79
|
+
ContainerContentGroupsStyled as e,
|
|
80
|
+
ContainerContentTitleStyled as f,
|
|
81
|
+
ContainerContentNavItemsStyled as g,
|
|
82
|
+
ContainerMenuItemsStyled as h,
|
|
83
|
+
ContainerArrowIconRootStyled as i,
|
|
84
|
+
ContainerFooterStyled as j,
|
|
85
|
+
ContainerHeaderSidebarRootStyled as k,
|
|
86
|
+
ContainerTitleSubtitleStyled as l,
|
|
87
|
+
ContainerDesktopContentStyled as m,
|
|
88
|
+
ContainerDesktopRootStyled as n,
|
|
89
|
+
ContainerSideBarMobileStyled as o
|
|
80
90
|
};
|
|
@@ -1,27 +1,58 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useIsMobile } from "@m4l/graphics";
|
|
3
|
+
import { useEnvironment } from "@m4l/core";
|
|
2
4
|
import { u as useSideBar } from "../../hooks/useSideBar/index.js";
|
|
3
|
-
import { C as ContentComponentRootStyled } from "../../slots/SideBarSlots.js";
|
|
5
|
+
import { C as ContentComponentRootStyled, a as ContentComponentHideStyled, b as ContainerComponentStyled, c as ContainerBtnAnchoredStyled } from "../../slots/SideBarSlots.js";
|
|
4
6
|
import { C as ContentGroups } from "../ContentGroups/index.js";
|
|
5
7
|
import { F as FooterSidebar } from "../FooterSidebar/index.js";
|
|
6
8
|
import { H as HeaderSidebar } from "../HeaderSidebar/index.js";
|
|
9
|
+
import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
|
|
10
|
+
import { P as PATH_ARROW_RIGHT_ICON, C as CONTAINER_BTN_ANCHORED } from "../../constants.js";
|
|
7
11
|
import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
|
|
12
|
+
import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js";
|
|
8
13
|
const ContentComponent = () => {
|
|
9
14
|
const { anchored, onToggleAnchored, companyName, companySlogan, companyLogoSmallUrl, expandedWidth, size } = useSideBar();
|
|
10
15
|
const ownerState = {
|
|
11
|
-
expandedWidth
|
|
16
|
+
expandedWidth,
|
|
17
|
+
anchored
|
|
12
18
|
};
|
|
19
|
+
const { host_static_assets, environment_assets } = useEnvironment();
|
|
20
|
+
const isDesktop = !useIsMobile();
|
|
13
21
|
const { currentSize } = useComponentSize(size);
|
|
22
|
+
const classRootBtnAnchored = getComponentSlotRoot(CONTAINER_BTN_ANCHORED);
|
|
23
|
+
const handlerAnchoredButton = () => {
|
|
24
|
+
onToggleAnchored(!anchored);
|
|
25
|
+
};
|
|
14
26
|
return /* @__PURE__ */ jsxs(ContentComponentRootStyled, { ownerState, children: [
|
|
15
|
-
/* @__PURE__ */ jsx(
|
|
16
|
-
|
|
27
|
+
/* @__PURE__ */ jsx(ContentComponentHideStyled, { ownerState: { ...ownerState, isDesktop }, role: "complementary", "aria-label": "hidden content", children: /* @__PURE__ */ jsxs(ContainerComponentStyled, { ownerState, children: [
|
|
28
|
+
/* @__PURE__ */ jsx(
|
|
29
|
+
HeaderSidebar,
|
|
30
|
+
{
|
|
31
|
+
title: companyName ?? "",
|
|
32
|
+
subtitle: companySlogan ?? "",
|
|
33
|
+
srcIcon: companyLogoSmallUrl ?? ""
|
|
34
|
+
}
|
|
35
|
+
),
|
|
36
|
+
/* @__PURE__ */ jsx(ContentGroups, { size: currentSize }),
|
|
37
|
+
/* @__PURE__ */ jsx(FooterSidebar, { onToggleAnchored, anchored })
|
|
38
|
+
] }) }),
|
|
39
|
+
isDesktop && /* @__PURE__ */ jsx(
|
|
40
|
+
ContainerBtnAnchoredStyled,
|
|
17
41
|
{
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
42
|
+
className: classRootBtnAnchored,
|
|
43
|
+
ownerState,
|
|
44
|
+
children: /* @__PURE__ */ jsx(
|
|
45
|
+
IconButton,
|
|
46
|
+
{
|
|
47
|
+
role: "anchored-button",
|
|
48
|
+
variant: "outline",
|
|
49
|
+
rotationAngle: !anchored ? 0 : 180,
|
|
50
|
+
onClick: handlerAnchoredButton,
|
|
51
|
+
src: `${host_static_assets}/${environment_assets}/${PATH_ARROW_RIGHT_ICON}`
|
|
52
|
+
}
|
|
53
|
+
)
|
|
21
54
|
}
|
|
22
|
-
)
|
|
23
|
-
/* @__PURE__ */ jsx(ContentGroups, { size: currentSize }),
|
|
24
|
-
/* @__PURE__ */ jsx(FooterSidebar, { onToggleAnchored, anchored })
|
|
55
|
+
)
|
|
25
56
|
] });
|
|
26
57
|
};
|
|
27
58
|
export {
|
|
@@ -2,10 +2,39 @@ const contentComponentStyles = {
|
|
|
2
2
|
/**
|
|
3
3
|
* Estilos del contenedor principal del sidebar
|
|
4
4
|
*/
|
|
5
|
-
contentComponentRoot: ({
|
|
5
|
+
contentComponentRoot: ({ theme }) => ({
|
|
6
|
+
position: "relative",
|
|
6
7
|
display: "grid",
|
|
7
8
|
height: "100%",
|
|
8
9
|
gridTemplateRows: "auto 1fr auto",
|
|
10
|
+
width: "auto",
|
|
11
|
+
backgroundColor: theme.vars.palette.background.default
|
|
12
|
+
}),
|
|
13
|
+
/**
|
|
14
|
+
* Estilos del contenedor que oculta el contenido cuando se encuentra des anclado.
|
|
15
|
+
*/
|
|
16
|
+
contentComponentHide: ({ theme, ownerState }) => ({
|
|
17
|
+
width: "100%",
|
|
18
|
+
height: "100%",
|
|
19
|
+
overflow: "hidden",
|
|
20
|
+
transition: "all 0.5s",
|
|
21
|
+
...!ownerState.anchored && {
|
|
22
|
+
width: ownerState?.anchored && ownerState.isDesktop ? ownerState.expandedWidth : !ownerState.isDesktop ? "100%" : theme.vars.size.baseSpacings.sp4,
|
|
23
|
+
"&:hover": {
|
|
24
|
+
transition: "all 0.5s",
|
|
25
|
+
width: ownerState.expandedWidth,
|
|
26
|
+
contentVisibility: "visible",
|
|
27
|
+
'& [class*="containerFooter"]': {
|
|
28
|
+
borderWidth: theme.vars.size.baseSpacings["sp0-5"]
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}),
|
|
33
|
+
/**
|
|
34
|
+
* Contenedor que abraza el contenido del menu en primer lugar.
|
|
35
|
+
*/
|
|
36
|
+
containerComponent: ({ ownerState }) => ({
|
|
37
|
+
height: "100%",
|
|
9
38
|
width: ownerState.expandedWidth
|
|
10
39
|
})
|
|
11
40
|
};
|
|
@@ -3,7 +3,7 @@ import { useModuleDictionary } from "@m4l/core";
|
|
|
3
3
|
import { u as useSideBar } from "../../hooks/useSideBar/index.js";
|
|
4
4
|
import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
|
|
5
5
|
import { g as getNameDataTestId } from "../../tests/utils.js";
|
|
6
|
-
import {
|
|
6
|
+
import { d as ContainerContentGroupsRootStyled, e as ContainerContentGroupsStyled, f as ContainerContentTitleStyled, g as ContainerContentNavItemsStyled } from "../../slots/SideBarSlots.js";
|
|
7
7
|
import { C as ContainerMenuItemsMain } from "./subcomponents/ContainerMenuItemsMain/index.js";
|
|
8
8
|
import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
|
|
9
9
|
import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
|
package/components/SideBar/subcomponents/ContentGroups/subcomponents/ContainerMenuItemsMain/index.js
CHANGED
|
@@ -7,9 +7,9 @@ import { u as useSideBar } from "../../../../hooks/useSideBar/index.js";
|
|
|
7
7
|
import { T as TEST_PROP_ID } from "../../../../../../test/constants_no_mock.js";
|
|
8
8
|
import { g as getNameDataTestId } from "../../../../tests/utils.js";
|
|
9
9
|
import { A as ArrowIcon } from "./subcomponents/ArrowIcon/index.js";
|
|
10
|
-
import {
|
|
10
|
+
import { h as ContainerMenuItemsStyled } from "../../../../slots/SideBarSlots.js";
|
|
11
11
|
import { a as getComponentSlotRoot } from "../../../../../../utils/getComponentSlotRoot.js";
|
|
12
|
-
import { I as ITEM_ACTIVE, a as ITEM_IN_TREE_ACTIVE,
|
|
12
|
+
import { I as ITEM_ACTIVE, a as ITEM_IN_TREE_ACTIVE, b as PATH_ICONS, L as LIST_MENU_ITEM } from "../../../../constants.js";
|
|
13
13
|
import { useEnvironment } from "@m4l/core";
|
|
14
14
|
import { u as useComponentSize } from "../../../../../../hooks/useComponentSize/useComponentSize.js";
|
|
15
15
|
import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
|
|
@@ -2,8 +2,8 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { useEnvironment } from "@m4l/core";
|
|
3
3
|
import { T as TEST_PROP_ID } from "../../../../../../../../test/constants_no_mock.js";
|
|
4
4
|
import { g as getNameDataTestId } from "../../../../../../tests/utils.js";
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
5
|
+
import { c as PATH_ARROW_DOWN_ICON } from "../../../../../../constants.js";
|
|
6
|
+
import { i as ContainerArrowIconRootStyled } from "../../../../../../slots/SideBarSlots.js";
|
|
7
7
|
import { I as IconButton } from "../../../../../../../mui_extended/IconButton/IconButton.js";
|
|
8
8
|
function ArrowIcon(props) {
|
|
9
9
|
const { openState, active } = props;
|
|
@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { u as useSideBar } from "../../hooks/useSideBar/index.js";
|
|
3
3
|
import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
|
|
4
4
|
import { g as getNameDataTestId } from "../../tests/utils.js";
|
|
5
|
-
import {
|
|
5
|
+
import { j as ContainerFooterStyled } from "../../slots/SideBarSlots.js";
|
|
6
6
|
import { I as Image } from "../../../Image/Image.js";
|
|
7
7
|
function FooterSidebar({ anchored }) {
|
|
8
8
|
const { companyLogoNormalUrl } = useSideBar();
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { k as ContainerHeaderSidebarRootStyled, l as ContainerTitleSubtitleStyled } from "../../slots/SideBarSlots.js";
|
|
3
3
|
import { T as Typography } from "../../../mui_extended/Typography/Typography.js";
|
|
4
4
|
import { I as Image } from "../../../Image/Image.js";
|
|
5
5
|
const HeaderSidebar = ({ srcIcon, title, subtitle }) => {
|
|
@@ -1,16 +1,13 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useFirstRender } from "@m4l/graphics";
|
|
3
3
|
import { u as useSideBar } from "../../hooks/useSideBar/index.js";
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
4
|
+
import { m as ContainerDesktopContentStyled, n as ContainerDesktopRootStyled } from "../../slots/SideBarSlots.js";
|
|
5
|
+
import { S as SIDEBAR_KEY_COMPONENT } from "../../constants.js";
|
|
6
6
|
import { C as ContentComponent } from "../ContentComponent/index.js";
|
|
7
7
|
import { useState, useEffect } from "react";
|
|
8
|
-
import { useFirstRender } from "@m4l/graphics";
|
|
9
8
|
import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoot.js";
|
|
10
|
-
import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js";
|
|
11
9
|
const SideBarDesktop = () => {
|
|
12
|
-
const { anchored,
|
|
13
|
-
const { host_static_assets, environment_assets } = useEnvironment();
|
|
10
|
+
const { anchored, expandedWidth } = useSideBar();
|
|
14
11
|
const [eventAnchored, setEventAnchored] = useState(anchored);
|
|
15
12
|
const isFirstRender = useFirstRender([anchored]);
|
|
16
13
|
useEffect(() => {
|
|
@@ -23,56 +20,21 @@ const SideBarDesktop = () => {
|
|
|
23
20
|
anchored: eventAnchored,
|
|
24
21
|
expandedWidth
|
|
25
22
|
};
|
|
26
|
-
const handlerOnMouseEnter = () => {
|
|
27
|
-
if (!anchored) {
|
|
28
|
-
setEventAnchored(true);
|
|
29
|
-
}
|
|
30
|
-
};
|
|
31
|
-
const handlerOnMouseLeave = () => {
|
|
32
|
-
if (!anchored) {
|
|
33
|
-
setEventAnchored(false);
|
|
34
|
-
}
|
|
35
|
-
};
|
|
36
|
-
const handlerAnchoredButton = () => {
|
|
37
|
-
onToggleAnchored(!anchored);
|
|
38
|
-
};
|
|
39
23
|
const classRoot = getComponentSlotRoot(SIDEBAR_KEY_COMPONENT);
|
|
40
|
-
|
|
41
|
-
return /* @__PURE__ */ jsxs(
|
|
24
|
+
return /* @__PURE__ */ jsx(
|
|
42
25
|
ContainerDesktopContentStyled,
|
|
43
26
|
{
|
|
44
27
|
role: "menu",
|
|
45
28
|
className: classRoot,
|
|
46
29
|
ownerState,
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
children: /* @__PURE__ */ jsx(ContentComponent, {})
|
|
56
|
-
}
|
|
57
|
-
),
|
|
58
|
-
/* @__PURE__ */ jsx(
|
|
59
|
-
ContainerBtnAnchoredStyled,
|
|
60
|
-
{
|
|
61
|
-
className: classRootBtnAnchored,
|
|
62
|
-
ownerState,
|
|
63
|
-
children: /* @__PURE__ */ jsx(
|
|
64
|
-
IconButton,
|
|
65
|
-
{
|
|
66
|
-
role: "anchored-button",
|
|
67
|
-
variant: "outline",
|
|
68
|
-
rotationAngle: !eventAnchored ? 0 : 180,
|
|
69
|
-
onClick: handlerAnchoredButton,
|
|
70
|
-
src: `${host_static_assets}/${environment_assets}/${PATH_ARROW_RIGHT_ICON}`
|
|
71
|
-
}
|
|
72
|
-
)
|
|
73
|
-
}
|
|
74
|
-
)
|
|
75
|
-
]
|
|
30
|
+
children: /* @__PURE__ */ jsx(
|
|
31
|
+
ContainerDesktopRootStyled,
|
|
32
|
+
{
|
|
33
|
+
ownerState,
|
|
34
|
+
role: "menubar",
|
|
35
|
+
children: /* @__PURE__ */ jsx(ContentComponent, {})
|
|
36
|
+
}
|
|
37
|
+
)
|
|
76
38
|
}
|
|
77
39
|
);
|
|
78
40
|
};
|
|
@@ -1,23 +1,30 @@
|
|
|
1
1
|
const sideBarDesktopStyles = {
|
|
2
|
+
/**
|
|
3
|
+
* Contenedor del sidebar en modo desktop, contiene el contenido del sidebar
|
|
4
|
+
* y el boton de anclaje. Permite poner el boton de anclaje en posicion absoluta
|
|
5
|
+
* sin que se oculte por el overflow hidden que tiene el contenido del sidebar
|
|
6
|
+
*/
|
|
7
|
+
containerDesktopContent: ({ theme, ownerState }) => {
|
|
8
|
+
const width = ownerState?.anchored ? ownerState.expandedWidth : theme.vars.size.baseSpacings.sp4;
|
|
9
|
+
return {
|
|
10
|
+
height: "100%",
|
|
11
|
+
position: "relative",
|
|
12
|
+
minWidth: width,
|
|
13
|
+
maxWidth: width,
|
|
14
|
+
transition: "all 0.5s"
|
|
15
|
+
};
|
|
16
|
+
},
|
|
2
17
|
/**
|
|
3
18
|
* Styles applied to the root element of the `SideBar` component in desktop mode.
|
|
4
19
|
*/
|
|
5
|
-
containerDesktopRoot: ({
|
|
20
|
+
containerDesktopRoot: ({ ownerState, theme }) => ({
|
|
6
21
|
height: "100%",
|
|
7
22
|
width: "fit-content",
|
|
8
|
-
|
|
9
|
-
overflow: "hidden",
|
|
23
|
+
overflow: "visible",
|
|
10
24
|
borderRight: `1px solid ${theme.vars.palette.border.default}`,
|
|
11
|
-
|
|
12
|
-
|
|
25
|
+
position: !ownerState.anchored ? "absolute" : "relative",
|
|
26
|
+
inset: 0,
|
|
13
27
|
//add hover effect
|
|
14
|
-
"&:hover": {
|
|
15
|
-
maxWidth: ownerState.expandedWidth,
|
|
16
|
-
contentVisibility: "visible",
|
|
17
|
-
'& [class*="containerFooter"]': {
|
|
18
|
-
borderWidth: theme.vars.size.baseSpacings["sp0-5"]
|
|
19
|
-
}
|
|
20
|
-
},
|
|
21
28
|
zIndex: 999
|
|
22
29
|
}),
|
|
23
30
|
/**
|
|
@@ -28,32 +35,28 @@ const sideBarDesktopStyles = {
|
|
|
28
35
|
right: "-20px",
|
|
29
36
|
top: "20px",
|
|
30
37
|
zIndex: 1e3,
|
|
31
|
-
padding: `${theme.vars.size.baseSpacings.
|
|
38
|
+
padding: `${theme.vars.size.baseSpacings.sp10} 10px`,
|
|
32
39
|
"& .MuiButtonBase-root": {
|
|
33
40
|
background: theme.vars.palette.background.default
|
|
34
41
|
},
|
|
35
|
-
"
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
'& [class*="M4LIcon-root"] > div': {
|
|
40
|
-
backgroundColor: theme.vars.palette.background.default
|
|
41
|
-
}
|
|
42
|
-
},
|
|
43
|
-
"& .MuiButtonBase-root:active": {
|
|
44
|
-
background: theme.vars.palette.primary.active
|
|
42
|
+
"&&& .M4LIconButton-root:hover": {
|
|
43
|
+
backgroundColor: theme.vars.palette.primary.enabled,
|
|
44
|
+
"& .M4LIcon-icon": {
|
|
45
|
+
backgroundColor: `${theme.vars.palette.primary.contrastText}!important`
|
|
45
46
|
}
|
|
46
47
|
}
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
48
|
+
// '&:hover': {
|
|
49
|
+
// '& .MuiButtonBase-root': {
|
|
50
|
+
// border: `1px solid ${theme.palette.border.default}`,
|
|
51
|
+
// background: theme.vars.palette.primary.enabled,
|
|
52
|
+
// '& [class*="M4LIcon-root"] > div':{
|
|
53
|
+
// backgroundColor: theme.vars.palette.background.default,
|
|
54
|
+
// },
|
|
55
|
+
// },
|
|
56
|
+
// '& .MuiButtonBase-root:active': {
|
|
57
|
+
// background: theme.vars.palette.primary.active,
|
|
58
|
+
// },
|
|
59
|
+
// },
|
|
57
60
|
})
|
|
58
61
|
};
|
|
59
62
|
export {
|
|
@@ -4,7 +4,7 @@ import { u as useSideBar } from "../../hooks/useSideBar/index.js";
|
|
|
4
4
|
import { T as TEST_PROP_ID } from "../../../../test/constants_no_mock.js";
|
|
5
5
|
import { g as getNameDataTestId } from "../../tests/utils.js";
|
|
6
6
|
import { D as Drawer } from "./subcomponents/Drawer.js";
|
|
7
|
-
import {
|
|
7
|
+
import { o as ContainerSideBarMobileStyled } from "../../slots/SideBarSlots.js";
|
|
8
8
|
import { C as ContentComponent } from "../ContentComponent/index.js";
|
|
9
9
|
const SideBarMobile = () => {
|
|
10
10
|
const {
|