Question 409649 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – MUI DashboardLayout Default State

I am using the DashboardLayout from MUI on my page

https://mui.com/toolpad/core/react-dashboard-layout/

https://mui.com/toolpad/core/api/dashboard-layout/#slots

I’m trying to set the sidenav bar to closed instead of open, but I haven’t been able to do it successful. in my efforts. There doesn’t appear to be a specific property for this, and my attempts to manually force it haven’t worked so far. I’m wondering if anyone else has encountered this issue or has any suggestions.

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

import { Box, Button, createTheme, Typography } from '@mui/material';
import { useLocation, useNavigate } from 'react-router-dom';
import { AppProvider } 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();

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

  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,
};
Tags:

2

Answers


  1. 0

    Can you share your code please

    Login or Signup to reply.
  2. 0

    I’ve read the source code of DashboardLayout. There is no way to provide default state of the drawer. It is closed by default when viewport is narrower than md breakoint (which is defined by the MUI Theme, 900 px by default) and open when the viewport is wider.

    There is no ellegant way to deal with that. You could:

    • override the value of md breakpoint in the theme, but that will apply for all components within that theme; perhaps you could craft a specific theme for DashboardLayout only? They work just like Context after all…
          <ThemeProvider theme={themeWithOverridenMdBreakpoint}>
        <DashboardLayout
          slots={{
            toolbarAccount: CustomToolbarAccount,
          }}
        >
          <ThemeProvider theme={themeForEverythingElse}>
            {children}
          </ThemeProvider>
        </DashboardLayout>
      </ThemeProvider>
    • you could also try to somehow get a reference to the button and then "click" it programmatically:
      React.useEffect(() => {
    const timeoutId = setTimeout(() => drawerButton.click(), 0);
    return () => clearTimeout(timeoutId);
  }, [])

    However I don’t know how would you get that reference to the button in a way that would not break when they change the implementation – Toolpad Core is still a beta. This is also going to make the drawer close after some delay, it will not be closed from the start.

    This is clearly an imperfection in ToolpadCore, they should definitely add a proprty for that. But again – still a beta, can’t expect too much.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search