[material-ui][docs] Add improvements to Dashboard template

docs/data/material/getting-started/templates/dashboard/Dashboard.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
 
-import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { createTheme, ThemeProvider, alpha } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
-import getDashboardTheme from './getDashboardTheme';
+import Stack from '@mui/material/Stack';
+import getDashboardTheme from './theme/getDashboardTheme';
 import ToggleCustomTheme from './internals/components/ToggleCustomTheme';
-import Copyright from './internals/components/Copyright';
 import Navbar from './components/Navbar';
 import Header from './components/Header';
 import MainGrid from './components/MainGrid';
+import SideMenu from './components/SideMenu';
 
 export default function Dashboard() {
   const [mode, setMode] = React.useState('light');
@@ -29,30 +29,32 @@ export default function Dashboard() {
     <ThemeProvider theme={showCustomTheme ? dashboardTheme : defaultTheme}>
       <CssBaseline />
       <Box sx={{ display: 'flex' }}>
+        <SideMenu />
         <Navbar mode={mode} toggleColorMode={toggleColorMode} />
+        {/* Main content */}
         <Box
           component="main"
-          sx={{
-            backgroundColor: 'background.default',
+          sx={(theme) => ({
+            position: { sm: 'relative', md: '' },
+            top: { sm: '48px', md: '0' },
+            height: { sm: 'calc(100vh - 48px)', md: '100vh' },
             flexGrow: 1,
-            height: '100vh',
+            pt: 2,
+            backgroundColor: alpha(theme.palette.background.default, 1),
             overflow: 'auto',
-          }}
+          })}
         >
-          {/* Main content */}
-          <Container
-            maxWidth="xl"
+          <Stack
+            spacing={2}
             sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              py: { xs: 14, sm: 16 },
-              gap: 2,
+              alignItems: 'center',
+              mx: 3,
+              pb: 10,
             }}
           >
-            <Header />
+            <Header mode={mode} toggleColorMode={toggleColorMode} />
             <MainGrid />
-            <Copyright sx={{ my: 4 }} />
-          </Container>
+          </Stack>
         </Box>
         <ToggleCustomTheme
           showCustomTheme={showCustomTheme}

docs/data/material/getting-started/templates/dashboard/Dashboard.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import { PaletteMode } from '@mui/material';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { createTheme, ThemeProvider, alpha } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
-import getDashboardTheme from './getDashboardTheme';
+import Stack from '@mui/material/Stack';
+import getDashboardTheme from './theme/getDashboardTheme';
 import ToggleCustomTheme from './internals/components/ToggleCustomTheme';
-import Copyright from './internals/components/Copyright';
 import Navbar from './components/Navbar';
 import Header from './components/Header';
 import MainGrid from './components/MainGrid';
+import SideMenu from './components/SideMenu';
 
 export default function Dashboard() {
   const [mode, setMode] = React.useState<PaletteMode>('light');
@@ -29,30 +29,32 @@ export default function Dashboard() {
     <ThemeProvider theme={showCustomTheme ? dashboardTheme : defaultTheme}>
       <CssBaseline />
       <Box sx={{ display: 'flex' }}>
+        <SideMenu />
         <Navbar mode={mode} toggleColorMode={toggleColorMode} />
+        {/* Main content */}
         <Box
           component="main"
-          sx={{
-            backgroundColor: 'background.default',
+          sx={(theme) => ({
+            position: { sm: 'relative', md: '' },
+            top: { sm: '48px', md: '0' },
+            height: { sm: 'calc(100vh - 48px)', md: '100vh' },
             flexGrow: 1,
-            height: '100vh',
+            pt: 2,
+            backgroundColor: alpha(theme.palette.background.default, 1),
             overflow: 'auto',
-          }}
+          })}
         >
-          {/* Main content */}
-          <Container
-            maxWidth="xl"
+          <Stack
+            spacing={2}
             sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              py: { xs: 14, sm: 16 },
-              gap: 2,
+              alignItems: 'center',
+              mx: 3,
+              pb: 10,
             }}
           >
-            <Header />
+            <Header mode={mode} toggleColorMode={toggleColorMode} />
             <MainGrid />
-            <Copyright sx={{ my: 4 }} />
-          </Container>
+          </Stack>
         </Box>
         <ToggleCustomTheme
           showCustomTheme={showCustomTheme}

docs/data/material/getting-started/templates/dashboard/components/CardAlert.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
+
+export default function CardAlert() {
+  return (
+    <Card variant="outlined" sx={{ m: 1.5, p: 1.5 }}>
+      <CardContent>
+        <AutoAwesomeRoundedIcon fontSize="small" />
+        <Typography fontWeight="600" gutterBottom>
+          Plan about to expire
+        </Typography>
+        <Typography color="text.secondary" variant="body2" sx={{ mb: 2 }}>
+          Enjoy 10% off when renewing your plan today.
+        </Typography>
+        <Button variant="contained" size="small" fullWidth>
+          Get the discount
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}

docs/data/material/getting-started/templates/dashboard/components/CardAlert.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
+
+export default function CardAlert() {
+  return (
+    <Card variant="outlined" sx={{ m: 1.5, p: 1.5 }}>
+      <CardContent>
+        <AutoAwesomeRoundedIcon fontSize="small" />
+        <Typography fontWeight="600" gutterBottom>
+          Plan about to expire
+        </Typography>
+        <Typography color="text.secondary" variant="body2" sx={{ mb: 2 }}>
+          Enjoy 10% off when renewing your plan today.
+        </Typography>
+        <Button variant="contained" size="small" fullWidth>
+          Get the discount
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}

docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.js

@@ -112,15 +112,18 @@ PieCenterLabel.propTypes = {
 };
 
 const colors = [
-  'hsl(220, 25%, 65%)',
-  'hsl(220, 25%, 45%)',
-  'hsl(220, 25%, 30%)',
-  'hsl(220, 25%, 20%)',
+  'hsl(220, 20%, 65%)',
+  'hsl(220, 20%, 42%)',
+  'hsl(220, 20%, 35%)',
+  'hsl(220, 20%, 25%)',
 ];
 
 export default function ChartUserByCountry() {
   return (
-    <Card variant="outlined" sx={{ pb: '8px' }}>
+    <Card
+      variant="outlined"
+      sx={{ display: 'flex', flexDirection: 'column', gap: '8px', flexGrow: 1 }}
+    >
       <CardContent>
         <Typography component="h2" variant="subtitle2">
           Users by country
@@ -177,6 +180,7 @@ export default function ChartUserByCountry() {
               </Stack>
               <LinearProgress
                 variant="determinate"
+                aria-label="Number of users by country"
                 value={country.value}
                 sx={{
                   [`& .${linearProgressClasses.bar}`]: {

docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.tsx

@@ -115,15 +115,18 @@ function PieCenterLabel({ primaryText, secondaryText }: PieCenterLabelProps) {
 }
 
 const colors = [
-  'hsl(220, 25%, 65%)',
-  'hsl(220, 25%, 45%)',
-  'hsl(220, 25%, 30%)',
-  'hsl(220, 25%, 20%)',
+  'hsl(220, 20%, 65%)',
+  'hsl(220, 20%, 42%)',
+  'hsl(220, 20%, 35%)',
+  'hsl(220, 20%, 25%)',
 ];
 
 export default function ChartUserByCountry() {
   return (
-    <Card variant="outlined" sx={{ pb: '8px' }}>
+    <Card
+      variant="outlined"
+      sx={{ display: 'flex', flexDirection: 'column', gap: '8px', flexGrow: 1 }}
+    >
       <CardContent>
         <Typography component="h2" variant="subtitle2">
           Users by country
@@ -180,6 +183,7 @@ export default function ChartUserByCountry() {
               </Stack>
               <LinearProgress
                 variant="determinate"
+                aria-label="Number of users by country"
                 value={country.value}
                 sx={{
                   [`& .${linearProgressClasses.bar}`]: {

docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.js

@@ -5,16 +5,19 @@ import { columns, rows } from '../internals/data/gridData';
 export default function CustomizedDataGrid() {
   return (
     <DataGrid
+      autoHeight
       checkboxSelection
       rows={rows}
       columns={columns}
+      rowHeight={40}
+      columnHeaderHeight={40}
       getRowClassName={(params) =>
         params.indexRelativeToCurrentPage % 2 === 0 ? 'even' : 'odd'
       }
       initialState={{
-        pagination: { paginationModel: { pageSize: 10 } },
+        pagination: { paginationModel: { pageSize: 20 } },
       }}
-      pageSizeOptions={[10, 25, 50]}
+      pageSizeOptions={[10, 20, 50]}
       disableColumnResize
     />
   );

docs/data/material/getting-started/templates/dashboard/components/CustomizedDataGrid.tsx

@@ -5,16 +5,19 @@ import { columns, rows } from '../internals/data/gridData';
 export default function CustomizedDataGrid() {
   return (
     <DataGrid
+      autoHeight
       checkboxSelection
       rows={rows}
       columns={columns}
+      rowHeight={40}
+      columnHeaderHeight={40}
       getRowClassName={(params) =>
         params.indexRelativeToCurrentPage % 2 === 0 ? 'even' : 'odd'
       }
       initialState={{
-        pagination: { paginationModel: { pageSize: 10 } },
+        pagination: { paginationModel: { pageSize: 20 } },
       }}
-      pageSizeOptions={[10, 25, 50]}
+      pageSizeOptions={[10, 20, 50]}
       disableColumnResize
     />
   );

docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.js

@@ -200,10 +200,12 @@ export default function CustomizedTreeView() {
   return (
     <Card
       variant="outlined"
-      sx={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
+      sx={{ display: 'flex', flexDirection: 'column', gap: '8px', flexGrow: 1 }}
     >
       <CardContent>
-        <Typography variant="subtitle2">Product tree</Typography>
+        <Typography component="h2" variant="subtitle2">
+          Product tree
+        </Typography>
         <RichTreeView
           items={ITEMS}
           aria-label="pages"

docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.tsx

@@ -181,10 +181,12 @@ export default function CustomizedTreeView() {
   return (
     <Card
       variant="outlined"
-      sx={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
+      sx={{ display: 'flex', flexDirection: 'column', gap: '8px', flexGrow: 1 }}
     >
       <CardContent>
-        <Typography variant="subtitle2">Product tree</Typography>
+        <Typography component="h2" variant="subtitle2">
+          Product tree
+        </Typography>
         <RichTreeView
           items={ITEMS}
           aria-label="pages"

docs/data/material/getting-started/templates/dashboard/components/Header.js

@@ -1,32 +1,45 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
+
 import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import Search from './Search';
+import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded';
 import CustomDatePicker from './CustomDatePicker';
+import NavbarBreadcrumbs from './NavbarBreadcrumbs';
+import ToggleColorMode from './ToggleColorMode';
+import MenuButton from './MenuButton';
+
+import Search from './Search';
 
-export default function Header() {
+function Header({ mode, toggleColorMode }) {
   return (
     <Stack
-      direction={{ xs: 'column', md: 'row' }}
+      direction="row"
       sx={{
-        alignItems: { xs: 'flex-start', md: 'flex-end' },
+        display: { xs: 'none', md: 'flex' },
+        width: '100%',
+        alignItems: { xs: 'flex-start', md: 'center' },
         justifyContent: 'space-between',
-        gap: 2,
-        my: 2,
+        maxWidth: { sm: '100%', md: '1700px' },
       }}
+      spacing={2}
     >
-      <Stack sx={{ maxWidth: 500 }}>
-        <Typography variant="h4" component="h1">
-          Dashboard
-        </Typography>
-        <Typography sx={{ color: 'text.secondary' }}>
-          Real-time analytics to improve user engagement and guide strategy.
-        </Typography>
-      </Stack>
-      <Stack direction="row" sx={{ gap: 1, width: { xs: '100%', sm: 'auto' } }}>
+      <NavbarBreadcrumbs />
+      <Stack direction="row" sx={{ gap: 1 }}>
         <Search />
         <CustomDatePicker />
+        <MenuButton showBadge aria-label="Open notifications">
+          <NotificationsRoundedIcon />
+        </MenuButton>
+
+        <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
       </Stack>
     </Stack>
   );
 }
+
+Header.propTypes = {
+  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
+  toggleColorMode: PropTypes.func.isRequired,
+};
+
+export default Header;