From 0a8bb4f0c1f59e44da8ebf57c1c0eff5315802b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Zaninotto?= <fzaninotto@gmail.com>
Date: Fri, 21 Feb 2025 21:42:14 +0100
Subject: [PATCH 1/2] Fix collapsed menu in B&W theme

---
 examples/demo/src/layout/Menu.tsx                |  6 +++++-
 packages/ra-ui-materialui/src/layout/Sidebar.tsx | 13 ++++++++++---
 packages/ra-ui-materialui/src/theme/bwTheme.ts   |  6 +++++-
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/examples/demo/src/layout/Menu.tsx b/examples/demo/src/layout/Menu.tsx
index d598893cd4f..bf11ab76c99 100644
--- a/examples/demo/src/layout/Menu.tsx
+++ b/examples/demo/src/layout/Menu.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { useState } from 'react';
 import { Box } from '@mui/material';
 import LabelIcon from '@mui/icons-material/Label';
-
 import {
     useTranslate,
     DashboardMenuItem,
@@ -10,6 +9,7 @@ import {
     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/packages/ra-ui-materialui/src/layout/Sidebar.tsx b/packages/ra-ui-materialui/src/layout/Sidebar.tsx
index 6eea5d33bd3..ae95dd034af 100644
--- 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
index 0e3a3018a4a..925433c94e5 100644
--- 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,
         },
     };
 };

From 75cf474e7eb6e4d55842abcbd6823e7421ccf961 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Zaninotto?= <fzaninotto@gmail.com>
Date: Mon, 24 Feb 2025 17:36:07 +0100
Subject: [PATCH 2/2] [demo] Fix submenu collapsed padding in bw theme

---
 examples/demo/src/layout/SubMenu.tsx |  1 +
 examples/demo/src/themes/themes.tsx  | 31 +++++++++++++++++++++++++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/examples/demo/src/layout/SubMenu.tsx b/examples/demo/src/layout/SubMenu.tsx
index 86442c66dbc..bcfbd5475eb 100644
--- 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
index 8edd98434ed..028491dc6bc 100644
--- 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 },