Feature Request: Auto-Hide and Overlay Sidebar in DashboardLayout

[vikasgurjar]

Summary

I'm utilizing Toolpad Core for building internal tools and have encountered limitations with the current DashboardLayout component regarding sidebar behavior.​

Problem:

The existing sidebar in DashboardLayout pushes the main content aside when opened and lacks an auto-hide feature. This behavior can be restrictive, especially on smaller screens or when aiming for a more dynamic user experience.​

Proposed Solution:

1. Overlay Sidebar Mode: Provide an option to have the sidebar overlay the main content instead of pushing it. This could be achieved by allowing a variant prop similar to MUI's Drawer.
2. Auto-Hide Sidebar: Introduce a prop (e.g., autoHideSidebar) that allows the sidebar to collapse automatically after a period of inactivity or upon navigation.​

Examples

<DashboardLayout
  slotProps={{
    navigation: {
      variant: 'temporary', // Sidebar overlays content
      autoHide: true,       // Sidebar hides automatically after route change or inactivity
    },
  }}
>
  {/* Page Content */}
</DashboardLayout>

When variant: 'temporary', sidebar overlays content instead of pushing it.

When autoHide: true, sidebar automatically collapses (or hides) after:

• A period of inactivity.
• A navigation or route change.
• An optional manual trigger (e.g., clicking outside or selecting a menu item).

Motivation

No response

Search keywords: DashboardLayout, sidebar, overlay, auto-hide, responsive, navigation, temporary, drawer, collapse