[core] Refix mobile menu closing when link is clicked (#3915)

mui · Aug 9, 2024 · 53d0ac3 · 53d0ac3
1 parent 3d3e447
commit 53d0ac3
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/docs/src/components/landing/ToolpadDashboardLayout.tsx b/docs/src/components/landing/ToolpadDashboardLayout.tsx
@@ -65,7 +65,7 @@ const NAVIGATION: Navigation = [
 function DashboardLayoutBasic(props: DemoProps) {
  const { window } = props;
 
- const [pathname, setPathname] = React.useState('/page');
+ const [pathname, setPathname] = React.useState('/dashboard');
 
  const router = React.useMemo<Router>(() => {
  return {
@@ -159,7 +159,7 @@ const PlaceHolder = styled('div')<{ height: number }>(({ theme, height }) => ({
 function DashboardLayoutBasic(props: DemoProps) {
  const { window } = props;
 
- const [pathname, setPathname] = React.useState('/page');
+ const [pathname, setPathname] = React.useState('/dashboard');
 
  const router = React.useMemo<Router>(() => {
  return {

diff --git a/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx b/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx
@@ -148,7 +148,7 @@ interface DashboardSidebarSubNavigationProps {
  subNavigation: Navigation;
  basePath?: string;
  depth?: number;
- onSidebarItemClick?: (item: NavigationPageItem) => void;
+ onSidebarLinkClick?: (item: NavigationPageItem) => void;
  validatedItemIds: Set<string>;
  uniqueItemPaths: Set<string>;
 }
@@ -157,7 +157,7 @@ function DashboardSidebarSubNavigation({
  subNavigation,
  basePath = '',
  depth = 0,
- onSidebarItemClick,
+ onSidebarLinkClick,
  validatedItemIds,
  uniqueItemPaths,
 }: DashboardSidebarSubNavigationProps) {
@@ -183,6 +183,15 @@ function DashboardSidebarSubNavigation({
  initialExpandedSidebarItemIds,
  );
 
+ const handleLinkClick = React.useCallback(
+ (item: NavigationPageItem) => () => {
+ if (onSidebarLinkClick) {
+ onSidebarLinkClick(item);
+ }
+ },
+ [onSidebarLinkClick],
+ );
+
  const handleOpenFolderClick = React.useCallback(
  (itemId: string) => () => {
  setExpandedSidebarItemIds((previousValue) =>
@@ -253,6 +262,7 @@ function DashboardSidebarSubNavigation({
  : {
  LinkComponent: Link,
  href: navigationItemFullPath,
+ onClick: handleLinkClick(navigationItem),
  })}
  >
  {navigationItem.icon ? (
@@ -298,7 +308,7 @@ function DashboardSidebarSubNavigation({
  subNavigation={navigationItem.children}
  basePath={navigationItemFullPath}
  depth={depth + 1}
- onSidebarItemClick={onSidebarItemClick}
+ onSidebarLinkClick={onSidebarLinkClick}
  validatedItemIds={validatedItemIds}
  uniqueItemPaths={uniqueItemPaths}
  />
@@ -371,7 +381,7 @@ function DashboardLayout(props: DashboardLayoutProps) {
  <Box component="nav" sx={{ overflow: 'auto', pt: navigation[0]?.kind === 'header' ? 0 : 2 }}>
  <DashboardSidebarSubNavigation
  subNavigation={navigation}
- onSidebarItemClick={handleNavigationItemClick}
+ onSidebarLinkClick={handleNavigationItemClick}
  validatedItemIds={validatedItemIdsRef.current}
  uniqueItemPaths={uniqueItemPathsRef.current}
  />