Fix menu closing in nested items

mui · Jul 16, 2024 · 6efc05d · 6efc05d
1 parent 1b84d85
commit 6efc05d
Show file tree

Hide file tree

Showing 2 changed files with 146 additions and 13 deletions.
diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx
@@ -47,7 +47,7 @@ interface DashboardSidebarSubNavigationProps {
   subNavigation: Navigation;
   basePath?: string;
   depth?: number;
-  onSidebarItemClick?: (itemId: string) => void;
+  onSidebarItemClick?: (item: NavigationPageItem) => void;
 }
 
 function DashboardSidebarSubNavigation({
@@ -92,15 +92,15 @@ function DashboardSidebarSubNavigation({
   );
 
   const handleSidebarItemClick = React.useCallback(
-    (itemId: string) => () => {
+    (itemId: string, item: NavigationPageItem) => () => {
       setExpandedSidebarItemIds((previousValue) =>
         previousValue.includes(itemId)
           ? previousValue.filter((previousValueItemId) => previousValueItemId !== itemId)
           : [...previousValue, itemId],
       );
 
       if (onSidebarItemClick) {
-        onSidebarItemClick(itemId);
+        onSidebarItemClick(item);
       }
     },
     [onSidebarItemClick],
@@ -155,7 +155,7 @@ function DashboardSidebarSubNavigation({
           <ListItem>
             <ListItemButton
               selected={pathname === navigationItemFullPath}
-              onClick={handleSidebarItemClick(navigationItemId)}
+              onClick={handleSidebarItemClick(navigationItemId, navigationItem)}
             >
               {navigationItem.icon ? <ListItemIcon>{navigationItem.icon}</ListItemIcon> : null}
               <ListItemText primary={navigationItem.title} />
@@ -184,6 +184,7 @@ function DashboardSidebarSubNavigation({
                   subNavigation={navigationItem.children}
                   basePath={navigationItemFullPath}
                   depth={depth + 1}
+                  onSidebarItemClick={onSidebarItemClick}
                 />
               </Collapse>
             ) : null}
@@ -232,7 +233,7 @@ function DashboardLayout(props: DashboardLayoutProps) {
 
   const handleSetMobileNavigationOpen = React.useCallback(
     (newOpen: boolean) => () => {
-      setIsMobileNavigationOpen(newOpen);
+        setIsMobileNavigationOpen(newOpen);
     },
     [],
   );
@@ -241,13 +242,19 @@ function DashboardLayout(props: DashboardLayoutProps) {
     setIsMobileNavigationOpen((previousOpen) => !previousOpen);
   }, []);
 
+  const handleNavigationItemClick = React.useCallback((item: NavigationPageItem) => {
+    if (!item.children) {
+      setIsMobileNavigationOpen(false);
+    }
+  }, [])
+
   const drawerContent = (
     <React.Fragment>
       <Toolbar />
       <Box component="nav" sx={{ overflow: 'auto', pt: navigation[0]?.kind === 'header' ? 0 : 2 }}>
         <DashboardSidebarSubNavigation
           subNavigation={navigation}
-          onSidebarItemClick={handleSetMobileNavigationOpen(false)}
+          onSidebarItemClick={handleNavigationItemClick}
         />
       </Box>
     </React.Fragment>

diff --git a/playground/nextjs/src/app/layout.tsx b/playground/nextjs/src/app/layout.tsx
@@ -4,21 +4,147 @@ import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import type { Navigation } from '@toolpad/core';
+import DescriptionIcon from '@mui/icons-material/Description';
+import FolderIcon from '@mui/icons-material/Folder';
 
 const NAVIGATION: Navigation = [
+  {
+    slug: '/home',
+    title: 'Home',
+    icon: <DescriptionIcon />,
+  },
+  {
+    slug: '/about',
+    title: 'About Us',
+    icon: <DescriptionIcon />,
+  },
+  {
+    slug: '/movies',
+    title: 'Movies',
+    icon: <FolderIcon />,
+    children: [
+      {
+        slug: '/fantasy',
+        title: 'Fantasy',
+        icon: <DescriptionIcon />,
+        children: [
+          {
+            kind: 'header',
+            title: 'Epic Fantasy',
+          },
+          {
+            slug: '/lord-of-the-rings',
+            title: 'Lord of the Rings',
+            icon: <DescriptionIcon />,
+          },
+          {
+            slug: '/harry-potter',
+            title: 'Harry Potter',
+            icon: <DescriptionIcon />,
+          },
+          { kind: 'divider' },
+          {
+            kind: 'header',
+            title: 'Modern Fantasy',
+          },
+          {
+            slug: '/chronicles-of-narnia',
+            title: 'Chronicles of Narnia',
+            icon: <DescriptionIcon />,
+          },
+        ],
+      },
+      {
+        slug: '/action',
+        title: 'Action',
+        icon: <DescriptionIcon />,
+        children: [
+          {
+            slug: '/mad-max',
+            title: 'Mad Max',
+            icon: <DescriptionIcon />,
+          },
+          {
+            slug: '/die-hard',
+            title: 'Die Hard',
+            icon: <DescriptionIcon />,
+          },
+        ],
+      },
+      {
+        slug: '/sci-fi',
+        title: 'Sci-Fi',
+        icon: <DescriptionIcon />,
+        children: [
+          {
+            slug: '/star-wars',
+            title: 'Star Wars',
+            icon: <DescriptionIcon />,
+          },
+          {
+            slug: '/matrix',
+            title: 'The Matrix',
+            icon: <DescriptionIcon />,
+          },
+        ],
+      },
+    ],
+  },
+  { kind: 'divider' },
   {
     kind: 'header',
-    title: 'Main items',
+    title: 'Animals',
+  },
+  {
+    slug: '/mammals',
+    title: 'Mammals',
+    icon: <DescriptionIcon />,
+    children: [
+      {
+        slug: '/lion',
+        title: 'Lion',
+        icon: <DescriptionIcon />,
+      },
+      {
+        slug: '/elephant',
+        title: 'Elephant',
+        icon: <DescriptionIcon />,
+      },
+    ],
   },
   {
-    slug: '/',
-    title: 'Dashboard',
-    icon: <DashboardIcon />,
+    slug: '/birds',
+    title: 'Birds',
+    icon: <DescriptionIcon />,
+    children: [
+      {
+        slug: '/eagle',
+        title: 'Eagle',
+        icon: <DescriptionIcon />,
+      },
+      {
+        slug: '/parrot',
+        title: 'Parrot',
+        icon: <DescriptionIcon />,
+      },
+    ],
   },
   {
-    slug: '/orders',
-    title: 'Orders',
-    icon: <ShoppingCartIcon />,
+    slug: '/reptiles',
+    title: 'Reptiles',
+    icon: <DescriptionIcon />,
+    children: [
+      {
+        slug: '/crocodile',
+        title: 'Crocodile',
+        icon: <DescriptionIcon />,
+      },
+      {
+        slug: '/snake',
+        title: 'Snake',
+        icon: <DescriptionIcon />,
+      },
+    ],
   },
 ];