@pipelinesolucoes/menu 1.0.3-beta.2 → 1.0.3-beta.3

package/README.md

@@ -29,6 +29,9 @@ A biblioteca inclui os seguintes componentes:
   Componente de menu vertical que renderiza uma lista de itens de menu empilhados em coluna utilizando `flexbox`.
 
 - **SideNav**
+  Componente de navegação lateral com área de conteúdo associada.
+  Permite alternar entre diferentes seções de conteúdo através de um menu vertical. 
+  Cada item do menu pode possuir um conteúdo associado que será exibido na área principal ao ser selecionado.
 
 - **DrawerResponsive**
   DrawerResponsive é um layout de navegação responsivo que:

package/dist/components/SideNav.d.ts

@@ -3,6 +3,7 @@ import { TypographyVariant } from "@mui/material";
 import { NavItem } from "../types/NavItem";
 interface SideNavProps {
     items: NavItem[];
+    indexItemSelecionado?: number;
     menuWidth?: number;
     itemMenuBackgroundColorSemContent?: string;
     itemMenuColorSemContent?: string;
@@ -14,31 +15,209 @@ interface SideNavProps {
     itemMenuColor?: string;
     itemMenuColorSelected?: string;
     itemMenuVariant?: TypographyVariant;
-    borderRadius?: string;
-    itemMenuBorderRadius?: string;
+    borderRadius?: string | number;
+    itemMenuBorderRadius?: string | number;
     contentBackground?: string;
     height?: string | number;
     renderTopMenu?: ReactNode;
     renderBottomMenu?: ReactNode;
-    contentGap?: number;
-}
-export declare const SideNavContent: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     contentGap?: number | string;
-    contentBackground?: string;
-    borderRadius?: number | string;
-    height?: number | string;
-}, {}, {}>;
+}
 /**
- * Componente SideNav
+ * Componente de navegação lateral com área de conteúdo associada.
+ *
+ * Permite alternar entre diferentes seções de conteúdo através de um menu
+ * vertical. Cada item do menu pode possuir um conteúdo associado que será
+ * exibido na área principal ao ser selecionado.
+ *
+ * O componente também suporta:
+ * - Itens estáticos sem conteúdo
+ * - Divisores visuais no menu
+ * - Conteúdo customizado no topo e na base do menu
+ * - Animação de transição entre conteúdos com `framer-motion`
+ *
+ * ---
+ *
+ * Funcionalidades principais
+ *
+ * - Navegação lateral baseada em lista de itens (`items`)
+ * - Controle interno de item ativo
+ * - Suporte a itens sem conteúdo
+ * - Suporte a divisores no menu (`label === "DIVIDER"`)
+ * - Área de conteúdo com transição animada
+ * - Customização completa de cores, tipografia e layout
+ * - Suporte a conteúdo customizado no topo e rodapé do menu
+ *
+ * ---
+ *
+ * Tokens de estilo (ordem de prioridade)
+ *
+ * Menu lateral:
+ * `prop` → `theme.pipelinesolucoes.forms.field` → fallback interno
+ *
+ * - menuWidth → 180
+ * - menuBackground → transparent
+ * - borderRadius → 0
+ * - height → 500px
+ *
+ * Itens com conteúdo:
+ *
+ * - itemMenuBackgroundColor → transparent
+ * - itemMenuBackgroundColorHover → grey.300
+ * - itemMenuBackgroundColorSelected → primary.main
+ * - itemMenuColor → black
+ * - itemMenuColorSelected → black
+ * - itemMenuBorderRadius → 16px
+ *
+ * Itens sem conteúdo:
+ *
+ * - itemMenuBackgroundColorSemContent → transparent
+ * - itemMenuColorSemContent → black
+ *
+ * Área de conteúdo:
+ *
+ * - contentBackground → grey.50
+ * - contentGap → 2
+ * - borderRadius → 0
+ * - height → 500px
+ *
+ * ---
+ *
+ * Tipografia
+ *
+ * O componente utiliza variantes tipográficas do Material UI através das props:
+ *
+ * - `itemMenuVariant`
+ * - `itemMenuVariantSemContent`
+ *
+ * Ordem de prioridade:
+ *
+ * `prop` → `theme.typography[variant]` → `theme.typography.body1`
+ *
+ * Quando informada, a variante é aplicada diretamente utilizando os estilos
+ * definidos em `theme.typography`.
+ *
+ * ---
+ *
+ * @param {import("../types/NavItem").NavItem[]} items
+ * Lista de itens exibidos no menu lateral.
+ *
+ * Cada item pode conter:
+ *
+ * - `label` → texto exibido no menu
+ * - `content` → conteúdo renderizado na área principal
+ *
+ * Regras especiais:
+ *
+ * - Itens sem `content` são renderizados como rótulos estáticos
+ * - Quando `label === "DIVIDER"` será renderizado um divisor visual
+ *
+ * ---
+ *
+ * @param {number} [indexItemSelecionado=0]
+ * Índice do item inicialmente selecionado.
+ *
+ * Caso o valor informado esteja fora do intervalo válido da lista de `items`,
+ * o componente utiliza automaticamente o índice `0`.
+ *
+ * @param {number} [menuWidth=180]
+ * Largura do menu lateral.
+ *
+ * @param {string} [itemMenuBackgroundColorSemContent="transparent"]
+ * Cor de fundo aplicada aos itens do menu que não possuem conteúdo.
+ *
+ * @param {string} [itemMenuColorSemContent="black"]
+ * Cor de texto aplicada aos itens do menu que não possuem conteúdo.
+ *
+ * @param {import("@mui/material").TypographyVariant} [itemMenuVariantSemContent="body1"]
+ * Variante tipográfica aplicada aos itens do menu sem conteúdo.
+ *
+ * @param {string} [menuBackground="transparent"]
+ * Cor de fundo do container do menu lateral.
+ *
+ * @param {string} [itemMenuBackgroundColor="transparent"]
+ * Cor de fundo padrão dos itens do menu que possuem conteúdo.
+ *
+ * @param {string} [itemMenuBackgroundColorSelected="primary.main"]
+ * Cor de fundo aplicada ao item atualmente selecionado.
+ *
+ * @param {string} [itemMenuBackgroundColorHover="grey.300"]
+ * Cor de fundo aplicada ao passar o cursor sobre itens não selecionados.
+ *
+ * @param {string} [itemMenuColor="black"]
+ * Cor de texto padrão dos itens selecionáveis.
+ *
+ * @param {string} [itemMenuColorSelected="black"]
+ * Cor de texto aplicada ao item atualmente selecionado.
+ *
+ * @param {import("@mui/material").TypographyVariant} [itemMenuVariant="body1"]
+ * Variante tipográfica aplicada aos itens selecionáveis do menu.
+ *
+ * @param {string | number} [borderRadius="0"]
+ * Raio de borda aplicado ao menu lateral e à área de conteúdo.
+ *
+ * @param {string | number} [itemMenuBorderRadius="16px"]
+ * Raio de borda aplicado individualmente aos itens do menu.
+ *
+ * @param {string} [contentBackground="grey.50"]
+ * Cor de fundo da área onde o conteúdo do item selecionado é exibido.
+ *
+ * @param {string | number} [height="500px"]
+ * Altura do componente aplicada tanto ao menu quanto à área de conteúdo.
+ *
+ * @param {React.ReactNode} [renderTopMenu]
+ * Conteúdo opcional renderizado no topo do menu lateral.
+ *
+ * Pode ser utilizado para:
+ *
+ * - Títulos
+ * - Botões
+ * - Filtros
+ * - Informações adicionais
+ *
+ * @param {React.ReactNode} [renderBottomMenu]
+ * Conteúdo opcional renderizado no rodapé do menu lateral.
+ *
+ * Útil para:
+ *
+ * - Ações secundárias
+ * - Informações complementares
+ * - Links auxiliares
+ *
+ * @param {number | string} [contentGap=2]
+ * Espaçamento horizontal entre o menu lateral e a área de conteúdo.
+ *
+ * @example
+ * Uso básico
+ *
+ * ```tsx
+ * const items = [
+ *   { label: "Visão geral", content: <div>Conteúdo da visão geral</div> },
+ *   { label: "Configurações", content: <div>Conteúdo de configurações</div> },
+ *   { label: "DIVIDER" },
+ *   { label: "Informações" },
+ *   { label: "Usuários", content: <div>Conteúdo de usuários</div> }
+ * ]
+ *
+ * <SideNav
+ *   items={items}
+ *   menuWidth={220}
+ *   contentBackground="white"
+ *   itemMenuBackgroundColorSelected="primary.main"
+ * />
  *
- * Um menu lateral com itens clicáveis que alteram o conteúdo exibido em um container ao lado.
- * Cada item possui um `label` e `content` que será renderizado no container.
+ * @example
+ * Uso com conteúdo customizado no menu
  *
- * Agora suporta:
- * - conteúdo no topo do menu (`renderTopMenu`)
- * - conteúdo fixado na base do menu (`renderBottomMenu`)
+ * ```tsx
+ * <SideNav
+ *   items={items}
+ *   renderTopMenu={<Box p={2}>Menu</Box>}
+ *   renderBottomMenu={<Box p={2}>Rodapé</Box>}
+ * />
+ * ```
  */
-declare function SideNav({ items, menuWidth, itemMenuBackgroundColorSemContent, itemMenuColorSemContent, itemMenuVariantSemContent, menuBackground, borderRadius, itemMenuBorderRadius, itemMenuBackgroundColor, itemMenuBackgroundColorHover, itemMenuBackgroundColorSelected, itemMenuColor, itemMenuColorSelected, itemMenuVariant, contentBackground, renderTopMenu, renderBottomMenu, height, contentGap, }: SideNavProps): import("react/jsx-runtime").JSX.Element | null;
+declare function SideNav({ items, indexItemSelecionado, menuWidth, itemMenuBackgroundColorSemContent, itemMenuColorSemContent, itemMenuVariantSemContent, menuBackground, borderRadius, itemMenuBorderRadius, itemMenuBackgroundColor, itemMenuBackgroundColorHover, itemMenuBackgroundColorSelected, itemMenuColor, itemMenuColorSelected, itemMenuVariant, contentBackground, renderTopMenu, renderBottomMenu, height, contentGap, }: SideNavProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace SideNav {
     var displayName: string;
 }

package/dist/components/SideNav.js

@@ -33,16 +33,16 @@ const MenuItemBox = styled(Box, {
         "itemMenuColorSelected",
         "typographyVariant",
     ].includes(prop),
-})(({ theme, active, itemMenuBorderRadius, itemMenuBackgroundColor, itemMenuBackgroundColorSelected, itemMenuBackgroundColorHover, itemMenuColor, itemMenuColorSelected, typographyVariant }) => (Object.assign(Object.assign({ cursor: "pointer", padding: "8px 16px", borderRadius: itemMenuBorderRadius, backgroundColor: active
+})(({ theme, active, itemMenuBorderRadius, itemMenuBackgroundColor, itemMenuBackgroundColorSelected, itemMenuBackgroundColorHover, itemMenuColor, itemMenuColorSelected, typographyVariant, }) => (Object.assign(Object.assign({ cursor: "pointer", padding: "8px 16px", borderRadius: itemMenuBorderRadius, backgroundColor: active
         ? itemMenuBackgroundColorSelected
         : itemMenuBackgroundColor, color: active ? itemMenuColorSelected : itemMenuColor, width: "100%", transition: "all 0.2s ease", userSelect: "none" }, (typographyVariant && theme.typography[typographyVariant])), { "&:hover": {
         backgroundColor: active
             ? itemMenuBackgroundColorSelected
             : itemMenuBackgroundColorHover,
     } })));
-export const SideNavContent = styled(Box, {
+const SideNavContent = styled(Box, {
     shouldForwardProp: (prop) => !["contentGap", "contentBackground", "borderRadius", "height"].includes(prop),
-})(({ contentGap = 2, contentBackground = "transparent", borderRadius = 2, height = "100%", }) => ({
+})(({ contentGap = 2, contentBackground = "transparent", borderRadius = 2, height = "100%" }) => ({
     width: "auto",
     flex: 1,
     marginLeft: contentGap,
@@ -55,31 +55,218 @@ export const SideNavContent = styled(Box, {
     overflowY: "auto",
 }));
 /**
- * Componente SideNav
+ * Componente de navegação lateral com área de conteúdo associada.
  *
- * Um menu lateral com itens clicáveis que alteram o conteúdo exibido em um container ao lado.
- * Cada item possui um `label` e `content` que será renderizado no container.
+ * Permite alternar entre diferentes seções de conteúdo através de um menu
+ * vertical. Cada item do menu pode possuir um conteúdo associado que será
+ * exibido na área principal ao ser selecionado.
  *
- * Agora suporta:
- * - conteúdo no topo do menu (`renderTopMenu`)
- * - conteúdo fixado na base do menu (`renderBottomMenu`)
+ * O componente também suporta:
+ * - Itens estáticos sem conteúdo
+ * - Divisores visuais no menu
+ * - Conteúdo customizado no topo e na base do menu
+ * - Animação de transição entre conteúdos com `framer-motion`
+ *
+ * ---
+ *
+ * Funcionalidades principais
+ *
+ * - Navegação lateral baseada em lista de itens (`items`)
+ * - Controle interno de item ativo
+ * - Suporte a itens sem conteúdo
+ * - Suporte a divisores no menu (`label === "DIVIDER"`)
+ * - Área de conteúdo com transição animada
+ * - Customização completa de cores, tipografia e layout
+ * - Suporte a conteúdo customizado no topo e rodapé do menu
+ *
+ * ---
+ *
+ * Tokens de estilo (ordem de prioridade)
+ *
+ * Menu lateral:
+ * `prop` → `theme.pipelinesolucoes.forms.field` → fallback interno
+ *
+ * - menuWidth → 180
+ * - menuBackground → transparent
+ * - borderRadius → 0
+ * - height → 500px
+ *
+ * Itens com conteúdo:
+ *
+ * - itemMenuBackgroundColor → transparent
+ * - itemMenuBackgroundColorHover → grey.300
+ * - itemMenuBackgroundColorSelected → primary.main
+ * - itemMenuColor → black
+ * - itemMenuColorSelected → black
+ * - itemMenuBorderRadius → 16px
+ *
+ * Itens sem conteúdo:
+ *
+ * - itemMenuBackgroundColorSemContent → transparent
+ * - itemMenuColorSemContent → black
+ *
+ * Área de conteúdo:
+ *
+ * - contentBackground → grey.50
+ * - contentGap → 2
+ * - borderRadius → 0
+ * - height → 500px
+ *
+ * ---
+ *
+ * Tipografia
+ *
+ * O componente utiliza variantes tipográficas do Material UI através das props:
+ *
+ * - `itemMenuVariant`
+ * - `itemMenuVariantSemContent`
+ *
+ * Ordem de prioridade:
+ *
+ * `prop` → `theme.typography[variant]` → `theme.typography.body1`
+ *
+ * Quando informada, a variante é aplicada diretamente utilizando os estilos
+ * definidos em `theme.typography`.
+ *
+ * ---
+ *
+ * @param {import("../types/NavItem").NavItem[]} items
+ * Lista de itens exibidos no menu lateral.
+ *
+ * Cada item pode conter:
+ *
+ * - `label` → texto exibido no menu
+ * - `content` → conteúdo renderizado na área principal
+ *
+ * Regras especiais:
+ *
+ * - Itens sem `content` são renderizados como rótulos estáticos
+ * - Quando `label === "DIVIDER"` será renderizado um divisor visual
+ *
+ * ---
+ *
+ * @param {number} [indexItemSelecionado=0]
+ * Índice do item inicialmente selecionado.
+ *
+ * Caso o valor informado esteja fora do intervalo válido da lista de `items`,
+ * o componente utiliza automaticamente o índice `0`.
+ *
+ * @param {number} [menuWidth=180]
+ * Largura do menu lateral.
+ *
+ * @param {string} [itemMenuBackgroundColorSemContent="transparent"]
+ * Cor de fundo aplicada aos itens do menu que não possuem conteúdo.
+ *
+ * @param {string} [itemMenuColorSemContent="black"]
+ * Cor de texto aplicada aos itens do menu que não possuem conteúdo.
+ *
+ * @param {import("@mui/material").TypographyVariant} [itemMenuVariantSemContent="body1"]
+ * Variante tipográfica aplicada aos itens do menu sem conteúdo.
+ *
+ * @param {string} [menuBackground="transparent"]
+ * Cor de fundo do container do menu lateral.
+ *
+ * @param {string} [itemMenuBackgroundColor="transparent"]
+ * Cor de fundo padrão dos itens do menu que possuem conteúdo.
+ *
+ * @param {string} [itemMenuBackgroundColorSelected="primary.main"]
+ * Cor de fundo aplicada ao item atualmente selecionado.
+ *
+ * @param {string} [itemMenuBackgroundColorHover="grey.300"]
+ * Cor de fundo aplicada ao passar o cursor sobre itens não selecionados.
+ *
+ * @param {string} [itemMenuColor="black"]
+ * Cor de texto padrão dos itens selecionáveis.
+ *
+ * @param {string} [itemMenuColorSelected="black"]
+ * Cor de texto aplicada ao item atualmente selecionado.
+ *
+ * @param {import("@mui/material").TypographyVariant} [itemMenuVariant="body1"]
+ * Variante tipográfica aplicada aos itens selecionáveis do menu.
+ *
+ * @param {string | number} [borderRadius="0"]
+ * Raio de borda aplicado ao menu lateral e à área de conteúdo.
+ *
+ * @param {string | number} [itemMenuBorderRadius="16px"]
+ * Raio de borda aplicado individualmente aos itens do menu.
+ *
+ * @param {string} [contentBackground="grey.50"]
+ * Cor de fundo da área onde o conteúdo do item selecionado é exibido.
+ *
+ * @param {string | number} [height="500px"]
+ * Altura do componente aplicada tanto ao menu quanto à área de conteúdo.
+ *
+ * @param {React.ReactNode} [renderTopMenu]
+ * Conteúdo opcional renderizado no topo do menu lateral.
+ *
+ * Pode ser utilizado para:
+ *
+ * - Títulos
+ * - Botões
+ * - Filtros
+ * - Informações adicionais
+ *
+ * @param {React.ReactNode} [renderBottomMenu]
+ * Conteúdo opcional renderizado no rodapé do menu lateral.
+ *
+ * Útil para:
+ *
+ * - Ações secundárias
+ * - Informações complementares
+ * - Links auxiliares
+ *
+ * @param {number | string} [contentGap=2]
+ * Espaçamento horizontal entre o menu lateral e a área de conteúdo.
+ *
+ * @example
+ * Uso básico
+ *
+ * ```tsx
+ * const items = [
+ *   { label: "Visão geral", content: <div>Conteúdo da visão geral</div> },
+ *   { label: "Configurações", content: <div>Conteúdo de configurações</div> },
+ *   { label: "DIVIDER" },
+ *   { label: "Informações" },
+ *   { label: "Usuários", content: <div>Conteúdo de usuários</div> }
+ * ]
+ *
+ * <SideNav
+ *   items={items}
+ *   menuWidth={220}
+ *   contentBackground="white"
+ *   itemMenuBackgroundColorSelected="primary.main"
+ * />
+ *
+ * @example
+ * Uso com conteúdo customizado no menu
+ *
+ * ```tsx
+ * <SideNav
+ *   items={items}
+ *   renderTopMenu={<Box p={2}>Menu</Box>}
+ *   renderBottomMenu={<Box p={2}>Rodapé</Box>}
+ * />
+ * ```
  */
-export default function SideNav({ items, menuWidth = 180, itemMenuBackgroundColorSemContent = "transparent", itemMenuColorSemContent = "black", itemMenuVariantSemContent = "body1", menuBackground = "transparent", borderRadius = "0", itemMenuBorderRadius = "16px", itemMenuBackgroundColor = "transparent", itemMenuBackgroundColorHover = "grey.300", itemMenuBackgroundColorSelected = "primary.main", itemMenuColor = "black", itemMenuColorSelected = "black", itemMenuVariant = "body1", contentBackground = "grey.50", renderTopMenu, renderBottomMenu, height = "500px", contentGap = 2, }) {
+export default function SideNav({ items, indexItemSelecionado = 0, menuWidth = 180, itemMenuBackgroundColorSemContent = "transparent", itemMenuColorSemContent = "black", itemMenuVariantSemContent = "body1", menuBackground = "transparent", borderRadius = "0", itemMenuBorderRadius = "16px", itemMenuBackgroundColor = "transparent", itemMenuBackgroundColorHover = "grey.300", itemMenuBackgroundColorSelected = "primary.main", itemMenuColor = "black", itemMenuColorSelected = "black", itemMenuVariant = "body1", contentBackground = "grey.50", renderTopMenu, renderBottomMenu, height = "500px", contentGap = 2, }) {
     var _a;
-    const [activeIndex, setActiveIndex] = useState(0);
     if (!items || items.length === 0) {
         return null;
     }
-    return (_jsxs(Container, { children: [_jsxs(SideNavContainer, { height: height, menuWidth: menuWidth, menuBackground: menuBackground, borderRadius: borderRadius, children: [renderTopMenu && _jsx(Box, { children: renderTopMenu }), _jsx(Box, { sx: { display: "flex", flexDirection: "column", gap: 1, }, children: items.map((item, idx) => {
-                            var _a;
-                            if (!item.content) {
-                                if (((_a = item.label) === null || _a === void 0 ? void 0 : _a.toUpperCase()) == "DIVIDER") {
-                                    return (_jsx(Divider, {}));
-                                }
-                                return (_jsx(MenuItemBox, { typographyVariant: itemMenuVariantSemContent, itemMenuBorderRadius: itemMenuBorderRadius, itemMenuBackgroundColor: itemMenuBackgroundColorSemContent, itemMenuColor: itemMenuColorSemContent, sx: { cursor: "default" }, children: item.label }, `${item.label}-${idx}`));
-                            }
-                            return (_jsx(MenuItemBox, { active: activeIndex === idx, typographyVariant: itemMenuVariant, itemMenuBorderRadius: itemMenuBorderRadius, itemMenuBackgroundColor: itemMenuBackgroundColor, itemMenuBackgroundColorHover: itemMenuBackgroundColorHover, itemMenuBackgroundColorSelected: itemMenuBackgroundColorSelected, itemMenuColor: itemMenuColor, itemMenuColorSelected: itemMenuColorSelected, onClick: () => setActiveIndex(idx), children: item.label }, `${item.label}-${idx}`));
-                        }) }), renderBottomMenu && (_jsx(Box, { sx: { mt: 2, pt: 2, flexShrink: 0, }, children: renderBottomMenu }))] }), _jsx(SideNavContent, { contentBackground: contentBackground, contentGap: contentGap, height: height, borderRadius: borderRadius, 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) }) })] }));
+    const initialIndex = indexItemSelecionado >= 0 && indexItemSelecionado < items.length
+        ? indexItemSelecionado
+        : 0;
+    const [activeIndex, setActiveIndex] = useState(initialIndex);
+    return (_jsxs(Container, { children: [_jsxs(SideNavContainer, { height: height, menuWidth: menuWidth, menuBackground: menuBackground, borderRadius: borderRadius, children: [_jsxs(Box, { children: [renderTopMenu && _jsx(Box, { children: renderTopMenu }), _jsx(Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: items.map((item, idx) => {
+                                    var _a;
+                                    if (!item.content) {
+                                        if (((_a = item.label) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === "DIVIDER") {
+                                            return _jsx(Divider, {}, `divider-${idx}`);
+                                        }
+                                        return (_jsx(MenuItemBox, { typographyVariant: itemMenuVariantSemContent, itemMenuBorderRadius: itemMenuBorderRadius, itemMenuBackgroundColor: itemMenuBackgroundColorSemContent, itemMenuColor: itemMenuColorSemContent, sx: { cursor: "default" }, children: item.label }, `${item.label}-${idx}`));
+                                    }
+                                    return (_jsx(MenuItemBox, { active: activeIndex === idx, typographyVariant: itemMenuVariant, itemMenuBorderRadius: itemMenuBorderRadius, itemMenuBackgroundColor: itemMenuBackgroundColor, itemMenuBackgroundColorHover: itemMenuBackgroundColorHover, itemMenuBackgroundColorSelected: itemMenuBackgroundColorSelected, itemMenuColor: itemMenuColor, itemMenuColorSelected: itemMenuColorSelected, onClick: () => setActiveIndex(idx), children: item.label }, `${item.label}-${idx}`));
+                                }) })] }), renderBottomMenu && (_jsx(Box, { sx: { mt: 2, pt: 2, flexShrink: 0 }, children: renderBottomMenu }))] }), _jsx(SideNavContent, { contentBackground: contentBackground, contentGap: contentGap, height: height, borderRadius: borderRadius, 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) }) })] }));
 }
 SideNav.displayName = "SideNav";
 //# sourceMappingURL=SideNav.js.map

package/dist/components/SideNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNav.js","sourceRoot":"","sources":["../../src/components/SideNav.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SideNav.js","sourceRoot":"","sources":["../../src/components/SideNav.tsx"],"names":[],"mappings":"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"}