Replace tabs for sidemenu

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

@@ -3,13 +3,13 @@ import { PaletteMode } from '@mui/material';
 import { createTheme, ThemeProvider } 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 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');
@@ -30,6 +30,7 @@ export default function Dashboard() {
       <CssBaseline />
       <Box sx={{ display: 'flex' }}>
         <Navbar mode={mode} toggleColorMode={toggleColorMode} />
+        <SideMenu />
         <Box
           component="main"
           sx={{
@@ -40,19 +41,19 @@ export default function Dashboard() {
           }}
         >
           {/* Main content */}
-          <Container
-            maxWidth="xl"
+          <Box
             sx={{
               display: 'flex',
               flexDirection: 'column',
-              py: { xs: 14, sm: 16 },
+              mx: 3,
+              py: 8,
               gap: 2,
             }}
           >
             <Header />
             <MainGrid />
             <Copyright sx={{ my: 4 }} />
-          </Container>
+          </Box>
         </Box>
         <ToggleCustomTheme
           showCustomTheme={showCustomTheme}

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
-import Search from './Search';
 import CustomDatePicker from './CustomDatePicker';
 
 export default function Header() {
@@ -22,7 +21,6 @@ export default function Header() {
         </Typography>
       </Stack>
       <Stack direction="row" gap={1} sx={{ width: { xs: '100%', sm: 'auto' } }}>
-        <Search />
         <CustomDatePicker />
       </Stack>
     </Stack>

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

@@ -4,91 +4,54 @@ import { PaletteMode } from '@mui/material';
 import AppBar from '@mui/material/AppBar';
 import Stack from '@mui/material/Stack';
 import MuiToolbar from '@mui/material/Toolbar';
-import Tab from '@mui/material/Tab';
-import Tabs from '@mui/material/Tabs';
 import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
 import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded';
 import ToggleColorMode from './ToggleColorMode';
 import SideNav from './SideNav';
 import MenuButton from './MenuButton';
 import NavbarBreadcrumbs from './NavbarBreadcrumbs';
 import OptionsMenu from './OptionsMenu';
+import Search from './Search';
 
 interface NavBarProps {
   mode: PaletteMode;
   toggleColorMode: () => void;
 }
 
 const Toolbar = styled(MuiToolbar)({
-  maxWidth: 1538,
   width: '100%',
-  padding: '16px 16px 0 16px',
+  padding: '16px',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'start',
   justifyContent: 'center',
   gap: '12px',
   flexShrink: 0,
-  backdropFilter: 'blur(24px)',
   '& .MuiTabs-flexContainer': {
     gap: '8px',
     p: '8px',
     pb: 0,
   },
 });
 
-function a11yProps(index: number, selectedIndex: number) {
-  return {
-    id: `simple-tab-${index}`,
-    'aria-controls': `simple-tabpanel-${index}`,
-    'aria-selected': selectedIndex === index,
-    role: 'tab',
-  };
-}
-
-function TabPanel(props: {
-  children?: React.ReactNode;
-  index: number;
-  value: number;
-}) {
-  const { children, value, index, ...other } = props;
-
-  return (
-    <div
-      role="tabpanel"
-      hidden={value !== index}
-      id={`simple-tabpanel-${index}`}
-      aria-labelledby={`simple-tab-${index}`}
-      {...other}
-    >
-      {/* This would be replaced when the content content of other tabs is added */}
-      {value === index && <div />}
-    </div>
-  );
-}
-
 export default function Navbar({ mode, toggleColorMode }: NavBarProps) {
   const [open, setOpen] = React.useState(false);
-  const [value, setValue] = React.useState(0);
 
   const toggleDrawer = (newOpen: boolean) => () => {
     setOpen(newOpen);
   };
 
-  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
-    setValue(newValue);
-  };
-
   return (
     <AppBar
       position="fixed"
       sx={(theme) => ({
         boxShadow: 0,
-        bgcolor: 'transparent',
+        bgcolor: 'background.default',
         backgroundImage: 'none',
         alignItems: 'center',
         borderBottom: '1px solid',
         borderColor: theme.palette.divider,
+        zIndex: theme.zIndex.drawer + 1,
       })}
     >
       <Toolbar variant="regular">
@@ -102,6 +65,7 @@ export default function Navbar({ mode, toggleColorMode }: NavBarProps) {
         >
           <NavbarBreadcrumbs />
           <Stack direction="row" gap={1}>
+            <Search />
             <MenuButton showBadge aria-label="Open notifications">
               <NotificationsRoundedIcon />
             </MenuButton>
@@ -127,21 +91,7 @@ export default function Navbar({ mode, toggleColorMode }: NavBarProps) {
             toggleColorMode={toggleColorMode}
           />
         </Stack>
-        <Tabs value={value} onChange={handleChange} aria-label="navbar tabs">
-          <Tab label="Home" {...a11yProps(0, value)} />
-          <Tab label="Analytics" {...a11yProps(1, value)} />
-          <Tab label="Clients" {...a11yProps(2, value)} />
-        </Tabs>
       </Toolbar>
-      <TabPanel value={value} index={0}>
-        Home Content
-      </TabPanel>
-      <TabPanel value={value} index={1}>
-        Analytics Content
-      </TabPanel>
-      <TabPanel value={value} index={2}>
-        Clients Content
-      </TabPanel>
     </AppBar>
   );
 }

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

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import MuiDrawer from '@mui/material/Drawer';
+import List from '@mui/material/List';
+import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import HomeRoundedIcon from '@mui/icons-material/HomeRounded';
+import AnalyticsRoundedIcon from '@mui/icons-material/AnalyticsRounded';
+import PeopleRoundedIcon from '@mui/icons-material/PeopleRounded';
+import AssignmentRoundedIcon from '@mui/icons-material/AssignmentRounded';
+import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded';
+import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
+import HelpRoundedIcon from '@mui/icons-material/HelpRounded';
+
+const drawerWidth = 225;
+
+const Drawer = styled(MuiDrawer)({
+  width: drawerWidth,
+  flexShrink: 0,
+  whiteSpace: 'nowrap',
+  boxSizing: 'border-box',
+  '& .MuiDrawer-paper': {
+    width: drawerWidth,
+    boxSizing: 'border-box',
+  },
+});
+
+export default function SideMenu() {
+  return (
+    <Drawer variant="permanent" sx={{ display: { xs: 'none', md: 'block' } }}>
+      <Box sx={{ height: 64 }} />
+      <Divider />
+      <List>
+        {[
+          { text: 'Home', icon: <HomeRoundedIcon /> },
+          { text: 'Analytics', icon: <AnalyticsRoundedIcon /> },
+          { text: 'Clients', icon: <PeopleRoundedIcon /> },
+          { text: 'Tasks', icon: <AssignmentRoundedIcon /> },
+        ].map((item, index) => (
+          <ListItem key={index} disablePadding sx={{ display: 'block' }}>
+            <ListItemButton
+              selected={index === 0}
+              sx={{
+                minHeight: 48,
+                px: 3,
+              }}
+            >
+              <ListItemIcon
+                sx={{
+                  minWidth: 0,
+                }}
+              >
+                {item.icon}
+              </ListItemIcon>
+              <ListItemText primary={item.text} />
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+      <Divider />
+      <List>
+        {[
+          { text: 'Settings', icon: <SettingsRoundedIcon /> },
+          { text: 'About', icon: <InfoRoundedIcon /> },
+          { text: 'Feedback', icon: <HelpRoundedIcon /> },
+        ].map((item, index) => (
+          <ListItem key={index} disablePadding sx={{ display: 'block' }}>
+            <ListItemButton
+              sx={{
+                minHeight: 48,
+                px: 3,
+              }}
+            >
+              <ListItemIcon
+                sx={{
+                  minWidth: 0,
+                }}
+              >
+                {item.icon}
+              </ListItemIcon>
+              <ListItemText primary={item.text} />
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+    </Drawer>
+  );
+}

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

@@ -46,7 +46,12 @@ export default function SideNav({
   toggleColorMode,
 }: SideNavProps) {
   return (
-    <Drawer anchor="right" open={open} onClose={toggleDrawer(false)}>
+    <Drawer
+      anchor="right"
+      open={open}
+      onClose={toggleDrawer(false)}
+      sx={(theme) => ({ zIndex: theme.zIndex.drawer + 2 })} // Increase the z-index due to the Navbar
+    >
       <Stack
         gap={2}
         sx={{

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

@@ -1101,6 +1101,13 @@ export default function getDashboardTheme(mode: PaletteMode): ThemeOptions {
           columnHeaderDraggableContainer: { paddingRight: 2 },
         },
       },
+      MuiDrawer: {
+        styleOverrides: {
+          paper: ({ theme }) => ({
+            backgroundColor: theme.palette.background.default,
+          }),
+        },
+      },
     },
   };
 }