Fix collapsed menu in B&W theme

marmelab · Feb 21, 2025 · 0a8bb4f · 0a8bb4f
1 parent 734f7ae
commit 0a8bb4f
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 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/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,
         },
     };
 };