MUI DashboardLayout侧边栏默认关闭设置问题求助

MUI Toolpad的DashboardLayout侧边栏状态由AppProvider的上下文管理，官方文档暂未提供直接设置默认关闭的配置属性，但可以通过上下文钩子手动控制初始状态：

解决方案步骤 #

1. 从@toolpad/core/AppProvider导入useAppContext钩子
2. 在组件挂载时，通过上下文提供的方法将侧边栏设置为关闭状态

修改后的代码示例 #

import { useMemo, useState, useEffect } from 'react';
import PropTypes from 'prop-types';

import { Box, Button, createTheme, Typography } from '@mui/material';
import { useLocation, useNavigate } from 'react-router-dom';
// 新增useAppContext导入
import { AppProvider, useAppContext } from '@toolpad/core/AppProvider';
import { DashboardLayout } from '@toolpad/core/DashboardLayout';

import HomeIcon from '@mui/icons-material/Home';
import DashboardIcon from '@mui/icons-material/Dashboard';
import LayersIcon from '@mui/icons-material/Layers';


const navigation = [
  {
    kind: 'header',
    title: 'Main items',
  },
  {
    segment: 'dashboard',
    title: 'Dashboard',
    icon: <HomeIcon />,
  },
  {
    kind: 'divider',
  },
  {
    kind: 'header',
    title: 'Analytics',
  },
  {
    segment: 'main',
    title: 'Main',
    icon: <DashboardIcon />,
    children: [
      {
        segment: 'sub1',
        title: 'Sub Page 1',
      },
      {
        segment: 'sub2',
        title: 'Sub Page 2',
      },
    ],
  },
];

const CustomToolbarAccount = () => (
  <Box>
    <Button variant="outlined" color="secondary">
      Profile
    </Button>
  </Box>
);

const theme = createTheme({
  cssVariables: {
    colorSchemeSelector: 'data-toolpad-color-scheme',
  },
  colorSchemes: { light: true, dark: true },
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 600,
      lg: 1200,
      xl: 1536,
    },
  },
});

export const SideNav = (props) => {
  const { window, children } = props;
  const location = useLocation();
  const navigate = useNavigate();
  // 获取App上下文的侧边栏状态控制方法
  const { setSideNavOpen } = useAppContext();

  const [pathname, setPathname] = useState(location.pathname);

  // 组件挂载时强制关闭侧边栏
  useEffect(() => {
    setSideNavOpen(false);
  }, [setSideNavOpen]);

  const router = useMemo(() => {
    return {
      pathname,
      searchParams: new URLSearchParams(),
      navigate: (path) => {
        setPathname(String(path));
        navigate(path)
      },
    };
  }, [navigate, pathname]);

  const siteWindow = window !== undefined ? window() : undefined;

  return (
    <AppProvider
      navigation={navigation}
      branding={{
        logo: <img src='' />,
        title: 'My Site',
      }}
      router={router}
      theme={theme}
      window={siteWindow}
    >
      <DashboardLayout
        slots={{
          toolbarAccount: CustomToolbarAccount,
        }}
      >
        {children}
      </DashboardLayout>
    </AppProvider>
  );
};

SideNav.propTypes = {
  window: PropTypes.func,
  children: PropTypes.node,
};

说明 #

该方案通过useAppContext获取侧边栏状态的控制方法，在组件首次挂载时调用setSideNavOpen(false)将侧边栏设为关闭状态，同时保留了后续通过界面按钮切换侧边栏的功能。

内容的提问来源于stack exchange，提问作者Zanatos