@linagora/twake-mui 15.0.0 → 15.1.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# @linagora/twake-mui [15.1.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@15.0.0...@linagora/twake-mui@15.1.0) (2026-10-19)
+
+
+### Features
+
+* **twake-mui:** Implement sidebar drawer ([43a443b](https://github.com/linagora/twake-ui/commit/43a443bcff5719c828382230971beb83be4fb10a))
+* **twake-mui:** Separate click and toggle event in NavDropdown ([4ae7157](https://github.com/linagora/twake-ui/commit/4ae715714a04ba4eb606c598b7ec4e715c511dca))
+
 # @linagora/twake-mui [15.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@14.4.0...@linagora/twake-mui@15.0.0) (2026-10-19)
 
 

package/dist/components/Nav/index.d.ts

@@ -1,6 +1,7 @@
-import { Theme } from '@mui/material/styles';
 import React from 'react';
-declare const NavRoot: import("@emotion/styled").StyledComponent<import("@mui/material").ListOwnProps & Omit<import("@mui/material").ListOwnProps, keyof import("@mui/material").ListOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "style" | "className" | "children" | "dense" | "disablePadding" | "classes" | "sx" | "subheader"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
-export type NavProps = React.ComponentProps<typeof NavRoot>;
+declare const NavRoot: import("@emotion/styled").StyledComponent<import("@mui/material").ListOwnProps & Omit<import("@mui/material").ListOwnProps, keyof import("@mui/material").ListOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "style" | "className" | "children" | "dense" | "disablePadding" | "classes" | "sx" | "subheader"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    disableMobileView: boolean;
+}, {}, {}>;
+export type NavProps = Omit<React.ComponentProps<typeof NavRoot>, 'disableMobileView'>;
 export declare const Nav: (props: NavProps) => React.ReactElement;
 export {};

package/dist/components/Nav/index.js

@@ -1,14 +1,22 @@
 import { List } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import React from 'react';
-const NavRoot = styled(List)(({ theme }) => ({
+import React, { useContext } from 'react';
+import { SidebarContext } from '../Sidebar/SidebarContext';
+const NavRoot = styled(List, {
+    shouldForwardProp: prop => prop !== 'disableMobileView'
+})(({ theme, disableMobileView }) => ({
     margin: '24px 0',
     padding: 0,
-    [theme.breakpoints.down('lg')]: {
-        display: 'flex',
-        justifyContent: 'space-around',
-        margin: '6px 0 4px'
-    }
+    ...(!disableMobileView && {
+        [theme.breakpoints.down('lg')]: {
+            display: 'flex',
+            justifyContent: 'space-around',
+            margin: '6px 0 4px'
+        }
+    })
 }));
-export const Nav = (props) => (React.createElement("nav", null,
-    React.createElement(NavRoot, { ...props })));
+export const Nav = (props) => {
+    const disableMobileView = useContext(SidebarContext);
+    return (React.createElement("nav", null,
+        React.createElement(NavRoot, { ...props, disableMobileView: disableMobileView })));
+};

package/dist/components/NavDesktopDropdown/index.js

@@ -1,13 +1,15 @@
-import React, { Children, isValidElement, useState } from 'react';
+import React, { Children, isValidElement, useState, useContext } from 'react';
 import { useBreakpoints } from '../../hooks/useBreakpoints';
 import DropdownText from '../DropdownText';
 import ListItem from '../ListItem';
+import { SidebarContext } from '../Sidebar/SidebarContext';
 export const NavDesktopDropdown = ({ label, children, defaultOpen = true, limit = 5 }) => {
+    const disableMobileView = useContext(SidebarContext);
     const { isDesktop } = useBreakpoints();
     const [open, setOpen] = useState(defaultOpen);
     const isActivated = Children.toArray(children).filter(isValidElement).length > limit;
     const onToggle = () => setOpen(current => !current);
-    if (!isDesktop)
+    if (!isDesktop && !disableMobileView)
         return null;
     return (React.createElement(React.Fragment, null,
         React.createElement(ListItem, { size: "small", sx: { cursor: isActivated ? 'pointer' : undefined } },

package/dist/components/NavDesktopLimiter/index.js

@@ -1,10 +1,11 @@
 import { Bottom, Top } from '@linagora/twake-icons';
-import React, { Children, isValidElement, useState } from 'react';
+import React, { Children, isValidElement, useState, useContext } from 'react';
 import { useExtendI18n, useI18n } from 'twake-i18n';
 import { NavIcon } from '../NavIcon';
 import { NavItem } from '../NavItem';
 import { NavLink } from '../NavLink/NavLink';
 import NavText from '../NavText';
+import { SidebarContext } from '../Sidebar/SidebarContext';
 import de from './locales/de.json';
 import en from './locales/en.json';
 import es from './locales/es.json';
@@ -16,12 +17,13 @@ import { useBreakpoints } from '../../hooks/useBreakpoints';
 const locales = { de, en, es, fr, it, ru, vi };
 export const NavDesktopLimiter = ({ children, max = 5 }) => {
     useExtendI18n(locales);
+    const disableMobileView = useContext(SidebarContext);
     const { t } = useI18n();
     const [viewingAll, setViewingAll] = useState(false);
-    const { isMobile } = useBreakpoints();
+    const { isDesktop } = useBreakpoints();
     const items = Children.toArray(children).filter(isValidElement);
     const amountHidden = Math.max(0, items.length - max);
-    if (isMobile)
+    if (!isDesktop && !disableMobileView)
         return null;
     return (React.createElement(React.Fragment, null,
         viewingAll ? items : items.slice(0, max),

package/dist/components/NavIcon/index.js

@@ -1,19 +1,27 @@
 import { Icon } from '@linagora/twake-icons';
 import { ListItemIcon } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import React from 'react';
-const NavIconRoot = styled(ListItemIcon)(({ theme }) => ({
+import React, { useContext } from 'react';
+import { SidebarContext } from '../Sidebar/SidebarContext';
+const NavIconRoot = styled(ListItemIcon, {
+    shouldForwardProp: prop => prop !== 'disableMobileView'
+})(({ theme, disableMobileView }) => ({
     minWidth: 0,
     width: 'auto',
     height: 'auto',
     marginRight: 12,
     color: theme.vars.palette.text.primary,
-    [theme.breakpoints.down('lg')]: {
-        display: 'block',
-        marginRight: 0,
-        color: theme.vars.palette.text.secondary,
-        '& svg': { margin: '4px auto 5px', width: 16, height: 16 }
-    }
+    ...(!disableMobileView && {
+        [theme.breakpoints.down('lg')]: {
+            display: 'block',
+            marginRight: 0,
+            color: theme.vars.palette.text.secondary,
+            '& svg': { margin: '4px auto 5px', width: 16, height: 16 }
+        }
+    })
 }));
-export const NavIcon = ({ icon, ...props }) => (React.createElement(NavIconRoot, { ...props },
-    React.createElement(Icon, { icon: icon, "aria-hidden": "true", focusable: "false" })));
+export const NavIcon = ({ icon, ...props }) => {
+    const disableMobileView = useContext(SidebarContext);
+    return (React.createElement(NavIconRoot, { disableMobileView: disableMobileView, ...props },
+        React.createElement(Icon, { icon: icon, "aria-hidden": "true", focusable: "false" })));
+};

package/dist/components/NavItem/NavItemRoot.d.ts

@@ -1,3 +1,4 @@
 export declare const NavItemRoot: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "style" | "className" | "children" | "alignItems" | "dense" | "disablePadding" | "disableGutters" | "classes" | "sx" | "divider" | "slotProps" | "slots" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     variant?: "primary" | "secondary" | "tertiary";
+    disableMobileView?: boolean;
 }, {}, {}>;

package/dist/components/NavItem/NavItemRoot.js

@@ -1,8 +1,8 @@
 import { ListItem } from '@mui/material';
 import { styled } from '@mui/material/styles';
 export const NavItemRoot = styled(ListItem, {
-    shouldForwardProp: prop => prop !== 'secondary' && prop !== 'variant'
-})(({ theme, variant = 'primary' }) => {
+    shouldForwardProp: prop => prop !== 'secondary' && prop !== 'variant' && prop !== 'disableMobileView'
+})(({ theme, variant = 'primary', disableMobileView = false }) => {
     const isSecondary = variant === 'secondary';
     const isTertiary = variant === 'tertiary';
     return {
@@ -27,22 +27,26 @@ export const NavItemRoot = styled(ListItem, {
                 backgroundColor: theme.vars.palette.action.focus
             }
         },
-        [theme.breakpoints.down('lg')]: {
-            display: 'block',
-            height: 'auto',
-            margin: '0 12px',
-            flex: '0 0 40px',
-            [`&.Mui-selected, &:has(.Mui-selected), &:has(.active)`]: {
-                color: theme.vars.palette.text.primary,
-                backgroundColor: 'transparent',
-                '&:hover': {
-                    backgroundColor: 'transparent'
+        ...(!disableMobileView && {
+            [theme.breakpoints.down('lg')]: {
+                display: 'block',
+                height: 'auto',
+                margin: '0 12px',
+                flex: '0 0 40px',
+                [`&.Mui-selected, &:has(.Mui-selected), &:has(.active)`]: {
+                    color: theme.vars.palette.text.primary,
+                    backgroundColor: 'transparent',
+                    '&:hover': {
+                        backgroundColor: 'transparent'
+                    }
                 }
             }
-        },
+        }),
         ...((isSecondary || isTertiary) && {
             margin: '3px 16px',
-            [theme.breakpoints.down('lg')]: { display: 'none' },
+            ...(!disableMobileView && {
+                [theme.breakpoints.down('lg')]: { display: 'none' }
+            }),
             paddingLeft: isTertiary ? '3rem' : '2rem'
         })
     };

package/dist/components/NavItem/index.js

@@ -1,14 +1,16 @@
 import { Divider } from '@mui/material';
 import cx from 'classnames';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { NavBadge } from './NavBadge';
 import { NavIndicator } from './NavIndicator';
 import { NavItemActions } from './NavItemActions';
 import { NavItemRoot } from './NavItemRoot';
+import { SidebarContext } from '../Sidebar/SidebarContext';
 export const NavItem = forwardRef((props, ref) => {
     const { variant = 'primary', selected, children, className, badge, hasIndicator, secondaryAction, divider, ...rest } = props;
+    const disableMobileView = useContext(SidebarContext);
     return (React.createElement(React.Fragment, null,
-        React.createElement(NavItemRoot, { ref: ref, variant: variant, className: cx(className, selected && 'Mui-selected'), ...rest },
+        React.createElement(NavItemRoot, { ref: ref, variant: variant, disableMobileView: disableMobileView, className: cx(className, selected && 'Mui-selected'), ...rest },
             children,
             (hasIndicator || badge || secondaryAction) && (React.createElement(NavItemActions, null,
                 hasIndicator && React.createElement(NavIndicator, null),

package/dist/components/NavLink/NavDropdown.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { NavLinkBaseProps } from './NavLinkBase';
 export interface NavDropdownProps extends Omit<NavLinkBaseProps, 'onToggle'> {
     open?: boolean;
-    onToggle?: React.MouseEventHandler<HTMLDivElement>;
+    onToggle?: () => void;
+    toggleLabel?: string;
 }
 export declare const NavDropdown: React.ForwardRefExoticComponent<NavDropdownProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/NavLink/NavDropdown.js

@@ -1,19 +1,33 @@
 import { Icon, Dropdown } from '@linagora/twake-icons';
+import { IconButton } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import React, { forwardRef } from 'react';
+import { useExtendI18n, useI18n } from 'twake-i18n';
 import { NavLinkBase } from './NavLinkBase';
-export const NavDropdown = forwardRef(({ open, onToggle, onClick, children, ...rest }, ref) => {
+import de from './locales/de.json';
+import en from './locales/en.json';
+import es from './locales/es.json';
+import fr from './locales/fr.json';
+import it from './locales/it.json';
+import ru from './locales/ru.json';
+import vi from './locales/vi.json';
+const locales = { de, en, es, fr, it, ru, vi };
+export const NavDropdown = forwardRef(({ open, onToggle, toggleLabel, onClick, children, ...rest }, ref) => {
+    useExtendI18n(locales);
+    const { t } = useI18n();
     const theme = useTheme();
     const handleClick = (e) => {
-        if (onToggle) {
-            onToggle(e);
-        }
         if (onClick) {
             onClick(e);
         }
     };
     return (React.createElement(NavLinkBase, { ref: ref, onClick: handleClick, "aria-expanded": open, ...rest },
         children,
-        React.createElement(Icon, { className: "u-ml-half", icon: Dropdown, rotate: open ? 0 : -90, size: 14, color: theme.vars.palette.text.primary })));
+        React.createElement(IconButton, { className: "u-ml-half", size: "xsmall", "aria-label": toggleLabel ??
+                t(open ? 'NavDropdown.collapse' : 'NavDropdown.expand'), "aria-expanded": open, onClick: e => {
+                e.stopPropagation();
+                onToggle?.();
+            } },
+            React.createElement(Icon, { icon: Dropdown, rotate: open ? 0 : -90, size: 14, color: theme.vars.palette.text.primary }))));
 });
 NavDropdown.displayName = 'NavDropdown';

package/dist/components/NavLink/NavLinkBase.js

@@ -1,12 +1,16 @@
 import cx from 'classnames';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { NavLinkRoot } from './NavLinkRoot';
+import { SidebarContext } from '../Sidebar/SidebarContext';
 export const NavLinkBase = forwardRef(({ selected, onClick, onKeyDown, className, children, ...rest }, ref) => {
-    return (React.createElement(NavLinkRoot, { ref: ref, role: "button", tabIndex: 0, onClick: onClick, onKeyDown: (e) => {
+    const disableMobileView = useContext(SidebarContext);
+    return (React.createElement(NavLinkRoot, { ref: ref, disableMobileView: disableMobileView, role: "button", tabIndex: 0, onClick: onClick, onKeyDown: (e) => {
             if (onKeyDown) {
                 onKeyDown(e);
             }
-            if (!e.defaultPrevented && (e.key === 'Enter' || e.key === ' ')) {
+            if (e.target === e.currentTarget &&
+                !e.defaultPrevented &&
+                (e.key === 'Enter' || e.key === ' ')) {
                 e.preventDefault();
                 e.currentTarget.click();
             }

package/dist/components/NavLink/NavLinkRoot.d.ts

@@ -1,2 +1,3 @@
-import { Theme } from '@mui/material/styles';
-export declare const NavLinkRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const NavLinkRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    disableMobileView?: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/NavLink/NavLinkRoot.js

@@ -1,5 +1,7 @@
 import { styled } from '@mui/material/styles';
-export const NavLinkRoot = styled('div')(({ theme }) => ({
+export const NavLinkRoot = styled('div', {
+    shouldForwardProp: prop => prop !== 'disableMobileView'
+})(({ theme, disableMobileView }) => ({
     padding: 8,
     width: '100%',
     height: '100%',
@@ -22,20 +24,22 @@ export const NavLinkRoot = styled('div')(({ theme }) => ({
             color: theme.vars.palette.primary.main
         }
     },
-    [theme.breakpoints.down('lg')]: {
-        display: 'block',
-        height: 'auto',
-        margin: 0,
-        padding: 0,
-        textAlign: 'center',
-        fontSize: theme.typography.pxToRem(11),
-        lineHeight: '12px',
-        '&.selected, &.active': {
-            color: theme.vars.palette.text.primary,
-            '&:hover': { backgroundColor: 'transparent' },
-            '& svg, & span': {
-                color: theme.vars.palette.text.primary
+    ...(!disableMobileView && {
+        [theme.breakpoints.down('lg')]: {
+            display: 'block',
+            height: 'auto',
+            margin: 0,
+            padding: 0,
+            textAlign: 'center',
+            fontSize: theme.typography.pxToRem(11),
+            lineHeight: '12px',
+            '&.selected, &.active': {
+                color: theme.vars.palette.text.primary,
+                '&:hover': { backgroundColor: 'transparent' },
+                '& svg, & span': {
+                    color: theme.vars.palette.text.primary
+                }
             }
         }
-    }
+    })
 }));

package/dist/components/NavLink/locales/de.json

@@ -0,0 +1,6 @@
+{
+    "NavDropdown": {
+        "collapse": "Einklappen",
+        "expand": "Ausklappen"
+    }
+}

package/dist/components/NavLink/locales/en.json

@@ -0,0 +1,6 @@
+{
+    "NavDropdown": {
+        "collapse": "Collapse",
+        "expand": "Expand"
+    }
+}

package/dist/components/NavLink/locales/es.json

@@ -0,0 +1,6 @@
+{
+    "NavDropdown": {
+        "collapse": "Contraer",
+        "expand": "Expandir"
+    }
+}

package/dist/components/NavLink/locales/fr.json

@@ -0,0 +1,6 @@
+{
+    "NavDropdown": {
+        "collapse": "Réduire",
+        "expand": "Développer"
+    }
+}

package/dist/components/NavLink/locales/it.json

@@ -0,0 +1,6 @@
+{
+    "NavDropdown": {
+        "collapse": "Comprimi",
+        "expand": "Espandi"
+    }
+}

package/dist/components/NavLink/locales/ru.json

@@ -0,0 +1,6 @@
+{
+    "NavDropdown": {
+        "collapse": "Свернуть",
+        "expand": "Развернуть"
+    }
+}

package/dist/components/NavLink/locales/vi.json

@@ -0,0 +1,6 @@
+{
+    "NavDropdown": {
+        "collapse": "Thu gọn",
+        "expand": "Mở rộng"
+    }
+}

package/dist/components/NavText/NavPrimaryText.d.ts

@@ -1,2 +1,3 @@
-import { Theme } from '@mui/material/styles';
-export declare const NavPrimaryText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const NavPrimaryText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    disableMobileView?: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/components/NavText/NavPrimaryText.js

@@ -1,12 +1,16 @@
 import { styled } from '@mui/material/styles';
-export const NavPrimaryText = styled('span')(({ theme }) => ({
+export const NavPrimaryText = styled('span', {
+    shouldForwardProp: prop => prop !== 'disableMobileView'
+})(({ theme, disableMobileView }) => ({
     fontSize: theme.typography.pxToRem(14),
     fontWeight: 500,
     letterSpacing: '.15px',
-    [theme.breakpoints.down('lg')]: {
-        display: 'block',
-        textAlign: 'center',
-        whiteSpace: 'nowrap',
-        fontSize: theme.typography.pxToRem(12)
-    }
+    ...(!disableMobileView && {
+        [theme.breakpoints.down('lg')]: {
+            display: 'block',
+            textAlign: 'center',
+            whiteSpace: 'nowrap',
+            fontSize: theme.typography.pxToRem(12)
+        }
+    })
 }));

package/dist/components/NavText/index.js

@@ -1,11 +1,13 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { NavPrimaryText } from './NavPrimaryText';
 import { NavSecondaryText } from './NavSecondaryText';
 import { NavTertiaryText } from './NavTertiaryText';
 import { NavTextRoot } from './NavTextRoot';
+import { SidebarContext } from '../Sidebar/SidebarContext';
 const NavText = React.forwardRef(({ secondaryText, tertiaryText, tertiaryIcon, children, sx, ...rest }, ref) => {
+    const disableMobileView = useContext(SidebarContext);
     return (React.createElement(NavTextRoot, { ref: ref, sx: sx, ...rest },
-        React.createElement(NavPrimaryText, null, children),
+        React.createElement(NavPrimaryText, { disableMobileView: disableMobileView }, children),
         secondaryText && React.createElement(NavSecondaryText, null, secondaryText),
         (tertiaryText || tertiaryIcon) && (React.createElement(NavTertiaryText, null,
             tertiaryIcon,

package/dist/components/Sidebar/Sidebar.stories.d.ts

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Screenshot: Story;
+export declare const DrawerMobile: Story;

package/dist/components/Sidebar/Sidebar.stories.js

@@ -21,8 +21,7 @@ const SidebarDemo = (props) => {
         React.createElement(Sidebar, { ...props },
             React.createElement(Nav, null,
                 React.createElement(NavItem, null,
-                    React.createElement(NavDropdown, { ...makeProps(['Section 1']), open: openSection1, onToggle: (e) => {
-                            e.stopPropagation();
+                    React.createElement(NavDropdown, { ...makeProps(['Section 1']), open: openSection1, onToggle: () => {
                             setOpenSection1(prev => !prev);
                         } },
                         React.createElement(NavIcon, { icon: Warn }),
@@ -52,6 +51,14 @@ const meta = {
     title: 'Sidebar',
     component: Sidebar,
     tags: ['autodocs'],
+    argTypes: {
+        anchor: { control: 'radio', options: ['bottom', 'left'] },
+        open: { control: 'boolean' }
+    },
+    args: {
+        anchor: 'bottom',
+        open: false
+    },
     render: args => React.createElement(SidebarDemo, { ...args })
 };
 export default meta;
@@ -60,3 +67,16 @@ export const Default = {};
 export const Screenshot = {
     tags: ['argos']
 };
+export const DrawerMobile = {
+    tags: ['argos', '!autodocs'],
+    globals: { viewport: 'mobile' },
+    args: { anchor: 'left', open: true },
+    parameters: {
+        argos: {
+            modes: {
+                'desktop-light': { disabled: true },
+                'desktop-dark': { disabled: true }
+            }
+        }
+    }
+};

package/dist/components/Sidebar/SidebarContext.d.ts

@@ -0,0 +1 @@
+export declare const SidebarContext: import("react").Context<boolean>;

package/dist/components/Sidebar/SidebarContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const SidebarContext = createContext(false);

package/dist/components/Sidebar/index.d.ts

@@ -1,8 +1,11 @@
-import { SxProps } from '@mui/material';
-import { Theme } from '@mui/material/styles';
+import { DrawerProps, SxProps, Theme } from '@mui/material';
 import React from 'react';
 export declare const SIDEBAR_MOBILE_HEIGHT = "--sidebarHeight";
 export interface SidebarProps extends React.ComponentPropsWithoutRef<'aside'> {
     sx?: SxProps<Theme>;
+    /** Mobile presentation: a bottom bar or a temporary left drawer. */
+    anchor?: 'bottom' | 'left';
+    open?: boolean;
+    onClose?: DrawerProps['onClose'];
 }
-export declare const Sidebar: React.FC<SidebarProps>;
+export declare const Sidebar: ({ children, anchor, open, onClose, sx, ...rest }: SidebarProps) => React.ReactElement;

package/dist/components/Sidebar/index.js

@@ -1,9 +1,12 @@
-import { GlobalStyles } from '@mui/material';
+import { Drawer, GlobalStyles } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import React from 'react';
+import { SidebarContext } from './SidebarContext';
+import { useBreakpoints } from '../../hooks/useBreakpoints';
 export const SIDEBAR_MOBILE_HEIGHT = '--sidebarHeight';
-const makeSidebarHeightCSSVar = (React.createElement(GlobalStyles, { styles: { ':root': { [SIDEBAR_MOBILE_HEIGHT]: '52px' } } }));
-const SidebarRoot = styled('aside')(({ theme }) => ({
+const SidebarRoot = styled('aside', {
+    shouldForwardProp: prop => prop !== 'anchor'
+})(({ theme, anchor }) => ({
     width: 236,
     flex: '0 0 auto',
     display: 'flex',
@@ -11,18 +14,30 @@ const SidebarRoot = styled('aside')(({ theme }) => ({
     overflowX: 'hidden',
     overflowY: 'auto',
     backgroundColor: theme.vars.palette.background.default,
-    [theme.breakpoints.down('lg')]: {
-        position: 'fixed',
-        bottom: 0,
-        left: 0,
-        width: '100%',
-        height: `var(${SIDEBAR_MOBILE_HEIGHT})`,
-        boxSizing: 'content-box',
-        display: 'block',
-        borderTop: `1px solid ${theme.vars.palette.divider}`,
-        zIndex: theme.zIndex.appBar
+    ...(anchor === 'bottom' && {
+        [theme.breakpoints.down('lg')]: {
+            position: 'fixed',
+            bottom: 0,
+            left: 0,
+            width: '100%',
+            height: `var(${SIDEBAR_MOBILE_HEIGHT}, 52px)`,
+            boxSizing: 'content-box',
+            display: 'block',
+            borderTop: `1px solid ${theme.vars.palette.divider}`,
+            zIndex: theme.zIndex.appBar
+        }
+    })
+}));
+const SidebarDrawer = styled(Drawer)(({ theme }) => ({
+    '& .MuiDrawer-paper': {
+        width: 300,
+        maxWidth: 'calc(100vw - 56px)',
+        backgroundColor: theme.vars.palette.background.default
     }
 }));
-export const Sidebar = props => (React.createElement(React.Fragment, null,
-    makeSidebarHeightCSSVar,
-    React.createElement(SidebarRoot, { ...props })));
+export const Sidebar = ({ children, anchor = 'bottom', open = false, onClose, sx, ...rest }) => {
+    const { isDesktop } = useBreakpoints();
+    return (React.createElement(SidebarContext.Provider, { value: anchor === 'left' },
+        anchor === 'bottom' && (React.createElement(GlobalStyles, { styles: { ':root': { [SIDEBAR_MOBILE_HEIGHT]: '52px' } } })),
+        anchor === 'left' && !isDesktop ? (React.createElement(SidebarDrawer, { ...rest, variant: "temporary", anchor: "left", open: open, onClose: onClose, sx: sx }, children)) : (React.createElement(SidebarRoot, { anchor: anchor, sx: sx, ...rest }, children))));
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "15.0.0",
+  "version": "15.1.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",