[DashboardLayout] Fix sidebar CSS transitions for some breakpoints

package.json

@@ -76,6 +76,7 @@
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "chalk": "5.3.0",
     "concurrently": "9.1.0",
+    "css-mediaquery": "^0.1.2",
     "eslint": "8.57.1",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "18.0.0",

packages/toolpad-core/src/DashboardLayout/DashboardLayout.test.tsx

@@ -322,7 +322,7 @@ describe('DashboardLayout', () => {
         action: <div>Action 1</div>,
       },
       {
-        title: 'Item',
+        title: 'Item 2',
         segment: 'item2',
         icon: <DescriptionIcon />,
         action: <div>Action 2</div>,

packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx

@@ -152,32 +152,32 @@ function DashboardLayout(props: DashboardLayoutProps) {
     React.useState(!defaultSidebarCollapsed);
   const [isMobileNavigationExpanded, setIsMobileNavigationExpanded] = React.useState(false);
 
-  const isUnderMdViewport = useMediaQuery(
-    theme.breakpoints.down('md'),
+  const isOverSmViewport = useMediaQuery(
+    theme.breakpoints.up('sm'),
     appWindowContext && {
       matchMedia: appWindowContext.matchMedia,
     },
   );
-  const isOverSmViewport = useMediaQuery(
-    theme.breakpoints.up('sm'),
+  const isOverMdViewport = useMediaQuery(
+    theme.breakpoints.up('md'),
     appWindowContext && {
       matchMedia: appWindowContext.matchMedia,
     },
   );
 
-  const isNavigationExpanded = isUnderMdViewport
-    ? isMobileNavigationExpanded
-    : isDesktopNavigationExpanded;
+  const isNavigationExpanded = isOverMdViewport
+    ? isDesktopNavigationExpanded
+    : isMobileNavigationExpanded;
 
   const setIsNavigationExpanded = React.useCallback(
     (newExpanded: boolean) => {
-      if (isUnderMdViewport) {
-        setIsMobileNavigationExpanded(newExpanded);
-      } else {
+      if (isOverMdViewport) {
         setIsDesktopNavigationExpanded(newExpanded);
+      } else {
+        setIsMobileNavigationExpanded(newExpanded);
       }
     },
-    [isUnderMdViewport],
+    [isOverMdViewport],
   );
 
   const [isNavigationFullyExpanded, setIsNavigationFullyExpanded] =
@@ -249,8 +249,7 @@ function DashboardLayout(props: DashboardLayoutProps) {
     [toggleNavigationExpanded],
   );
 
-  const hasDrawerTransitions =
-    isOverSmViewport && (disableCollapsibleSidebar || !isUnderMdViewport);
+  const hasDrawerTransitions = isOverSmViewport && (!disableCollapsibleSidebar || isOverMdViewport);
 
   const ToolbarActionsSlot = slots?.toolbarActions ?? ToolbarActions;
   const ToolbarAccountSlot = slots?.toolbarAccount ?? Account;

test/setupVitest.ts

@@ -1,6 +1,7 @@
 import { afterEach, vi } from 'vitest';
 import failOnConsole from 'vitest-fail-on-console';
 import { cleanup } from '@testing-library/react';
+import mediaQuery from 'css-mediaquery';
 
 failOnConsole({
   silenceMessage: (errorMessage) => {
@@ -16,18 +17,24 @@ afterEach(cleanup);
 
 // Mocks
 
+function createMatchMedia(width: number) {
+  return (query: string) => ({
+    matches: mediaQuery.match(query, {
+      width,
+    }),
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  });
+}
+
 if (typeof window !== 'undefined' && !window.matchMedia) {
   Object.defineProperty(window, 'matchMedia', {
     writable: true,
-    value: vi.fn().mockImplementation((query) => ({
-      matches: false,
-      media: query,
-      onchange: null,
-      addListener: vi.fn(), // deprecated
-      removeListener: vi.fn(), // deprecated
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-      dispatchEvent: vi.fn(),
-    })),
+    value: createMatchMedia(window.innerWidth),
   });
 }