Summary

This feature request is to enhance the DashboardLayout component by adding two new props:

collapsed: A boolean prop that controls the initial state of the sidebar (collapsed or expanded).
onToggleSidebar: A function prop that allows toggling the sidebar’s collapsed state from outside the DashboardLayout component.
This setup will make the sidebar’s state externally controllable, enabling more dynamic and flexible UI behaviors in various responsive scenarios.

Examples

import React, { useState } from 'react';
import DashboardLayout from './DashboardLayout';

const AppProvider = () => {
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);

const handleToggleSidebar = (collapsed) => {
setIsSidebarCollapsed(collapsed);
};

return (

{/* Application Content */}

);
};

export default AppProvider;

Motivation

This feature will improve DashboardLayout’s flexibility and control by allowing parent components to manage and toggle the sidebar’s collapsed state. With responsive design requirements, many apps need to control the sidebar's visibility dynamically based on user interactions or screen size. This enhancement will make DashboardLayout more adaptable for complex UI requirements and enhance user experience across devices. The issue i face is i need a state to ensure the sidebar is collapsed or not to manage the responsiveness of design of rendered children comp

Search keywords: sidebar toggle, sidebar collapsed state, DashboardLayout, Material-UI, Toolpad sidebar, responsive sidebar, toggle sidebar from parent, sidebar props