Merge pull request #10542 from marmelab/bw-menu-closed

Fix collapsed menu in B&W theme
marmelab · Feb 25, 2025 · c3d60d4 · c3d60d4
2 parents 23366b5 + 75cf474
commit c3d60d4
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 6 deletions.
diff --git a/examples/demo/src/layout/Menu.tsx b/examples/demo/src/layout/Menu.tsx
@@ -2,14 +2,14 @@ import * as React from 'react';
 import { useState } from 'react';
 import { Box } from '@mui/material';
 import LabelIcon from '@mui/icons-material/Label';
-
 import {
     useTranslate,
     DashboardMenuItem,
     MenuItemLink,
     MenuProps,
     useSidebarState,
 } from 'react-admin';
+import clsx from 'clsx';
 
 import visitors from '../visitors';
 import orders from '../orders';
@@ -46,6 +46,10 @@ const Menu = ({ dense = false }: MenuProps) => {
                         duration: theme.transitions.duration.leavingScreen,
                     }),
             }}
+            className={clsx({
+                'RaMenu-open': open,
+                'RaMenu-closed': !open,
+            })}
         >
             <DashboardMenuItem />
             <SubMenu

diff --git a/examples/demo/src/layout/SubMenu.tsx b/examples/demo/src/layout/SubMenu.tsx
@@ -51,6 +51,7 @@ const SubMenu = (props: Props) => {
                     dense={dense}
                     component="div"
                     disablePadding
+                    className="SubMenu"
                     sx={{
                         '& .MuiMenuItem-root': {
                             transition:

diff --git a/examples/demo/src/themes/themes.tsx b/examples/demo/src/themes/themes.tsx
@@ -30,10 +30,39 @@ export interface Theme {
     dark?: RaThemeOptions;
 }
 
+const BW_SIDEBAR_OVERRIDE = {
+    styleOverrides: {
+        root: {
+            '& .SubMenu .MuiMenuItem-root': {
+                paddingLeft: 24,
+            },
+            '& .RaMenu-closed .SubMenu .MuiMenuItem-root': {
+                paddingLeft: 8,
+            },
+        },
+    },
+};
+
 export const themes: Theme[] = [
     { name: 'soft', light: softLightTheme, dark: softDarkTheme },
     { name: 'default', light: defaultLightTheme, dark: defaultDarkTheme },
-    { name: 'B&W', light: bwLightTheme, dark: bwDarkTheme },
+    {
+        name: 'B&W',
+        light: {
+            ...bwLightTheme,
+            components: {
+                ...bwLightTheme.components,
+                RaSidebar: BW_SIDEBAR_OVERRIDE,
+            },
+        },
+        dark: {
+            ...bwDarkTheme,
+            components: {
+                ...bwDarkTheme.components,
+                RaSidebar: BW_SIDEBAR_OVERRIDE,
+            },
+        },
+    },
     { name: 'nano', light: nanoLightTheme, dark: nanoDarkTheme },
     { name: 'radiant', light: radiantLightTheme, dark: radiantDarkTheme },
     { name: 'house', light: houseLightTheme, dark: houseDarkTheme },

diff --git a/packages/ra-ui-materialui/src/layout/Sidebar.tsx b/packages/ra-ui-materialui/src/layout/Sidebar.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
+import clsx from 'clsx';
 import { ReactElement } from 'react';
 import {
     Drawer,
@@ -40,9 +41,12 @@ export const Sidebar = (props: SidebarProps) => {
             open={open}
             onClose={toggleSidebar}
             classes={SidebarClasses}
-            className={
-                trigger && !appBarAlwaysOn ? SidebarClasses.appBarCollapsed : ''
-            }
+            className={clsx(
+                trigger && !appBarAlwaysOn
+                    ? SidebarClasses.appBarCollapsed
+                    : '',
+                open ? OPEN_CLASS : CLOSED_CLASS
+            )}
             {...rest}
         >
             <div className={SidebarClasses.fixed}>{children}</div>
@@ -75,6 +79,9 @@ export const SidebarClasses = {
     appBarCollapsed: `${PREFIX}-appBarCollapsed`,
 };
 
+const OPEN_CLASS = `${PREFIX}-open`;
+const CLOSED_CLASS = `${PREFIX}-closed`;
+
 const StyledDrawer = styled(Drawer, {
     name: PREFIX,
     slot: 'Root',

diff --git a/packages/ra-ui-materialui/src/theme/bwTheme.ts b/packages/ra-ui-materialui/src/theme/bwTheme.ts
@@ -343,6 +343,7 @@ const createBWTheme = (mode: 'light' | 'dark'): RaThemeOptions => {
                     root: {
                         margin: `0 ${SPACING}px`,
                         paddingRight: 0,
+                        paddingLeft: SPACING,
                         borderRadius: 5,
                         color: isDarkMode ? grey['200'] : common['black'],
                         '&.RaMenuItemLink-active': {
@@ -351,13 +352,16 @@ const createBWTheme = (mode: 'light' | 'dark'): RaThemeOptions => {
                         '& .RaMenuItemLink-icon': {
                             minWidth: 30,
                         },
+                        '.RaMenu-closed &': {
+                            margin: `0 0 0 ${SPACING}px`,
+                        },
                     },
                 },
             },
         },
         sidebar: {
             width: 195,
-            closedWidth: 50,
+            closedWidth: 45,
         },
     };
 };