@pipelinesolucoes/menu 1.0.1-beta.26 → 1.0.1-beta.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.
|
@@ -59,7 +59,7 @@ interface SideNavProps {
|
|
|
59
59
|
*/
|
|
60
60
|
contentBackground?: string;
|
|
61
61
|
/**
|
|
62
|
-
* Altura do container de conteúdo
|
|
62
|
+
* Altura do container de conteúdo e da navegação
|
|
63
63
|
* @default '500px'
|
|
64
64
|
*/
|
|
65
65
|
height?: string | number;
|
|
@@ -67,6 +67,15 @@ interface SideNavProps {
|
|
|
67
67
|
* Elemento(s) que serão renderizados no topo do menu lateral
|
|
68
68
|
*/
|
|
69
69
|
renderTopMenu?: ReactNode;
|
|
70
|
+
/**
|
|
71
|
+
* Elemento(s) que serão renderizados na base do menu lateral
|
|
72
|
+
*/
|
|
73
|
+
renderBottomMenu?: ReactNode;
|
|
74
|
+
/**
|
|
75
|
+
* Espaçamento entre menu e conteúdo
|
|
76
|
+
* @default 2
|
|
77
|
+
*/
|
|
78
|
+
contentGap?: number;
|
|
70
79
|
}
|
|
71
80
|
/**
|
|
72
81
|
* Componente SideNav
|
|
@@ -74,9 +83,11 @@ interface SideNavProps {
|
|
|
74
83
|
* Um menu lateral com itens clicáveis que alteram o conteúdo exibido em um container ao lado.
|
|
75
84
|
* Cada item possui um `label` e `content` que será renderizado no container.
|
|
76
85
|
*
|
|
77
|
-
*
|
|
86
|
+
* Agora suporta:
|
|
87
|
+
* - conteúdo no topo do menu (`renderTopMenu`)
|
|
88
|
+
* - conteúdo fixado na base do menu (`renderBottomMenu`)
|
|
78
89
|
*/
|
|
79
|
-
declare function SideNav({ items, menuWidth, menuBackground, borderRadius, itemMenuBorderRadius, itemMenuBackgroundColor, itemMenuBackgroundColorHover, itemMenuBackgroundColorSelected, itemMenuColor, itemMenuColorSelected, contentBackground, renderTopMenu, height, }: SideNavProps): import("react/jsx-runtime").JSX.Element;
|
|
90
|
+
declare function SideNav({ items, menuWidth, menuBackground, borderRadius, itemMenuBorderRadius, itemMenuBackgroundColor, itemMenuBackgroundColorHover, itemMenuBackgroundColorSelected, itemMenuColor, itemMenuColorSelected, contentBackground, renderTopMenu, renderBottomMenu, height, contentGap, }: SideNavProps): import("react/jsx-runtime").JSX.Element | null;
|
|
80
91
|
declare namespace SideNav {
|
|
81
92
|
var displayName: string;
|
|
82
93
|
}
|
|
@@ -3,11 +3,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { useState } from "react";
|
|
4
4
|
import { Box, styled } from "@mui/material";
|
|
5
5
|
import { motion, AnimatePresence } from "framer-motion";
|
|
6
|
-
const Container = styled(
|
|
7
|
-
display:
|
|
8
|
-
gridTemplateColumns:
|
|
6
|
+
const Container = styled("div")(() => ({
|
|
7
|
+
display: "grid",
|
|
8
|
+
gridTemplateColumns: "auto 1fr",
|
|
9
9
|
width: "100%",
|
|
10
|
-
padding:
|
|
10
|
+
padding: 0,
|
|
11
11
|
}));
|
|
12
12
|
/**
|
|
13
13
|
* Componente SideNav
|
|
@@ -15,41 +15,69 @@ const Container = styled('div')(() => ({
|
|
|
15
15
|
* Um menu lateral com itens clicáveis que alteram o conteúdo exibido em um container ao lado.
|
|
16
16
|
* Cada item possui um `label` e `content` que será renderizado no container.
|
|
17
17
|
*
|
|
18
|
-
*
|
|
18
|
+
* Agora suporta:
|
|
19
|
+
* - conteúdo no topo do menu (`renderTopMenu`)
|
|
20
|
+
* - conteúdo fixado na base do menu (`renderBottomMenu`)
|
|
19
21
|
*/
|
|
20
|
-
export default function SideNav({ items, menuWidth = 180, menuBackground =
|
|
21
|
-
|
|
22
|
+
export default function SideNav({ items, menuWidth = 180, menuBackground = "transparent", borderRadius = "0", itemMenuBorderRadius = "16px", itemMenuBackgroundColor = "transparent", itemMenuBackgroundColorHover = "grey.300", itemMenuBackgroundColorSelected = "primary.main", itemMenuColor = "black", itemMenuColorSelected = "black", contentBackground = "grey.50", renderTopMenu, renderBottomMenu, height = "500px", contentGap = 2, }) {
|
|
23
|
+
var _a;
|
|
22
24
|
const [activeIndex, setActiveIndex] = useState(0);
|
|
25
|
+
if (!items || items.length === 0) {
|
|
26
|
+
return null;
|
|
27
|
+
}
|
|
23
28
|
return (_jsxs(Container, { children: [_jsxs(Box, { sx: {
|
|
24
29
|
width: menuWidth,
|
|
30
|
+
minHeight: height,
|
|
31
|
+
maxHeight: height,
|
|
25
32
|
bgcolor: menuBackground,
|
|
26
33
|
borderRadius: borderRadius,
|
|
27
34
|
display: "flex",
|
|
28
35
|
flexDirection: "column",
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
36
|
+
justifyContent: "space-between",
|
|
37
|
+
overflow: "hidden",
|
|
38
|
+
}, children: [_jsxs(Box, { sx: {
|
|
39
|
+
display: "flex",
|
|
40
|
+
flexDirection: "column",
|
|
41
|
+
gap: 1,
|
|
42
|
+
}, children: [renderTopMenu && _jsx(Box, { children: renderTopMenu }), _jsx(Box, { sx: {
|
|
43
|
+
display: "flex",
|
|
44
|
+
flexDirection: "column",
|
|
45
|
+
gap: 1,
|
|
46
|
+
}, children: items.map((item, idx) => (_jsx(Box, { onClick: () => setActiveIndex(idx), sx: {
|
|
47
|
+
cursor: "pointer",
|
|
48
|
+
px: 2,
|
|
49
|
+
py: 1,
|
|
50
|
+
borderRadius: itemMenuBorderRadius,
|
|
51
|
+
bgcolor: activeIndex === idx
|
|
52
|
+
? itemMenuBackgroundColorSelected
|
|
53
|
+
: itemMenuBackgroundColor,
|
|
54
|
+
color: activeIndex === idx
|
|
55
|
+
? itemMenuColorSelected
|
|
56
|
+
: itemMenuColor,
|
|
57
|
+
"&:hover": {
|
|
58
|
+
bgcolor: activeIndex === idx
|
|
59
|
+
? itemMenuBackgroundColorSelected
|
|
60
|
+
: itemMenuBackgroundColorHover,
|
|
61
|
+
},
|
|
62
|
+
width: "100%",
|
|
63
|
+
transition: "all 0.2s ease",
|
|
64
|
+
userSelect: "none",
|
|
65
|
+
}, children: item.label }, `${item.label}-${idx}`))) })] }), renderBottomMenu && (_jsx(Box, { sx: {
|
|
66
|
+
mt: 2,
|
|
67
|
+
pt: 2,
|
|
68
|
+
flexShrink: 0,
|
|
69
|
+
}, children: renderBottomMenu }))] }), _jsx(Box, { sx: {
|
|
42
70
|
width: "auto",
|
|
43
71
|
flex: 1,
|
|
44
|
-
ml:
|
|
72
|
+
ml: contentGap,
|
|
45
73
|
p: 2,
|
|
46
74
|
bgcolor: contentBackground,
|
|
47
75
|
borderRadius: borderRadius,
|
|
48
76
|
minHeight: height,
|
|
49
77
|
maxHeight: height,
|
|
50
78
|
position: "relative",
|
|
51
|
-
overflowY: "auto",
|
|
52
|
-
}, children: _jsx(AnimatePresence, { mode: "wait", children: _jsx(motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2 }, style: { width: "100%" }, children: items[activeIndex].content }, activeIndex) }) })] }));
|
|
79
|
+
overflowY: "auto",
|
|
80
|
+
}, children: _jsx(AnimatePresence, { mode: "wait", children: _jsx(motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2 }, style: { width: "100%" }, children: (_a = items[activeIndex]) === null || _a === void 0 ? void 0 : _a.content }, activeIndex) }) })] }));
|
|
53
81
|
}
|
|
54
82
|
SideNav.displayName = "SideNav";
|
|
55
83
|
//# sourceMappingURL=SideNav.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideNav.js","sourceRoot":"","sources":["../../src/components/SideNav.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAa,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"SideNav.js","sourceRoot":"","sources":["../../src/components/SideNav.tsx"],"names":[],"mappings":"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"}
|