Default Component - Copy this React, Mui Component to your project

Import * as React from 'react'; import { styled, useTheme } from '@mui/material/styles'; import { useMediaQuery, IconButton, Typography, Box, CssBaseline, Divider, List, ListItem, ListItemButton, ListItemIcon, ListItemText,Button } from '@mui/material'; import MuiDrawer from '@mui/material/Drawer'; import MuiAppBar from '@mui/material/AppBar'; import Toolbar from '@mui/material/Toolbar'; import MenuIcon from '@mui/icons material/Menu'; import ChevronLeftIcon from '@mui/icons material/ChevronLeft'; import ChevronRightIcon from '@mui/icons material/ChevronRight'; import InboxIcon from '@mui/icons material/MoveToInbox'; import MailIcon from '@mui/icons material/Mail'; import logo from '../assets/logo.png'; import bg from '../assets/bg.jpg'; import bgvideo from '../assets/background.mp4'; import ItemManagement from './admin/CRUD'; // Import CRUD component import TotalOrder from './admin/TotalOrder'; // Import TotalOrder component import TodayOrder from './admin/TodayOrder'; // Import TodayOrder component import { useNavigate } from 'react router dom'; const drawerWidth = 240; const openedMixin = (theme) => ({ width: drawerWidth, transition: theme.transitions.create('width', { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.enteringScreen, }), overflowX: 'hidden', backgroundColor: 'rgba(255, 255, 255, 0.8)', }); const closedMixin = (theme) => ({ transition: theme.transitions.create('width', { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), overflowX: 'hidden', width: `calc(${theme.spacing(7)} + 1px)`, [theme.breakpoints.up('sm')]: { width: `calc(${theme.spacing(8)} + 1px)`, }, backgroundColor: 'rgba(255, 255, 255, 0.8)', }); const DrawerHeader = styled('div')(({ theme }) => ({ display: 'flex', alignItems: 'center', justifyContent: 'flex end', padding: theme.spacing(0, 1), ...theme.mixins.toolbar, })); const AppBar = styled(MuiAppBar, { shouldForwardProp: (prop) => prop !== 'open', })(({ theme }) => ({ zIndex: theme.zIndex.drawer + 1, transition: theme.transitions.create(['width', 'margin'], { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), backgroundColor: '#7edff2', variants: [ { props: { open: true }, style: { marginLeft: drawerWidth, width: `calc(100% ${drawerWidth}px)`, transition: theme.transitions.create(['width', 'margin'], { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.enteringScreen, }), }, }, ], })); const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })( ({ theme }) => ({ width: drawerWidth, flexShrink: 0, whiteSpace: 'nowrap', boxSizing: 'border box', variants: [ { props: { open: true }, style: { ...openedMixin(theme), '& .MuiDrawer paper': openedMixin(theme), }, }, { props: { open: false }, style: { ...closedMixin(theme), '& .MuiDrawer paper': closedMixin(theme), }, }, ], }), ); const MainContent = styled(Box)(({ theme }) => ({ flexGrow: 1, p: 3, position: 'relative', height: '100vh', // Full height of the screen overflow: 'hidden', '&::before': { content: '""', position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundImage: `url(${bg})`, backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no repeat', opacity: 0.5, zIndex: 2, }, '& video': { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.5, zIndex: 1, }, // Add specific styles for the TodayOrder component '& .today order container': { width: '100%', // Adjust the width to your preference (e.g., '80%' or '1200px') maxWidth: '1200px', // Set maximum width if needed height: 'auto', // You can specify a specific height, e.g., 'calc(100vh 150px)' to adjust for header or other space margin: 'auto', // Center the content horizontally padding: theme.spacing(2), // Add padding for better spacing } })); export default function MiniDrawer() { const theme = useTheme(); const [open, setOpen] = React.useState(false); const [activeSection, setActiveSection] = React.useState(''); const isMobile = useMediaQuery(theme.breakpoints.down('sm')); const navigate = useNavigate(); const handleDrawerOpen = () => { setOpen(true); }; const handleDrawerClose = () => { setOpen(false); }; const handleMenuItemClick = (section) => { setActiveSection(section); }; const handleLogout = () => { localStorage.removeItem('admin_token'); // Remove the admin token from localStorage navigate('/admin/login'); // Redirect to the login page }; return ( <Box sx={{ display: 'flex' }}> <CssBaseline /> <AppBar position="fixed" open={open}> <Toolbar> <IconButton color="inherit" aria label="open drawer" onClick={handleDrawerOpen} edge="start" sx={[ { marginRight: 5, }, open && { display: 'none' }, ]} > <MenuIcon /> </IconButton> <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}> {!open && ( <Box sx={{ display: 'flex', alignItems: 'center' }}> <img src={logo} alt="Logo" style={{ width: isMobile ? '100px' : '125px', height: 'auto', marginRight: '16px', }} /> <Typography variant={isMobile ? "h7" : "h5"} noWrap component="div"> </Typography> </Box> )} {open && ( <Typography variant={isMobile ? "h7" : "h6"} noWrap component="div"> </Typography> )} </Box> </Toolbar> </AppBar> <Drawer variant="permanent" open={open}> <DrawerHeader> <img src={logo} alt="Logo" style={{ width: '70%', height: '100%', objectFit: 'contain', }} /> <IconButton onClick={handleDrawerClose}> {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />} </IconButton> </DrawerHeader> <Divider /> <List> {['Today Orders', 'Total Orders'].map((text, index) => ( <ListItem key={text} disablePadding sx={{ display: 'block' }}> <ListItemButton onClick={() => handleMenuItemClick(text)} sx={[ { minHeight: 48, px: 2.5, }, open ? { justifyContent: 'initial', } : { justifyContent: 'center', }, ]} > <ListItemIcon sx={[ { minWidth: 0, justifyContent: 'center', color: '#00ab57', }, open ? { mr: 3, } : { mr: 'auto', }, ]} > {index % 2 === 0 ? <InboxIcon /> : <MailIcon />} </ListItemIcon> <ListItemText primary={text} sx={[ open ? { opacity: 1, } : { opacity: 0, }, ]} /> </ListItemButton> </ListItem> ))} </List> <Divider /> <List> {['Change Cost'].map((text, index) => ( <ListItem key={text} disablePadding sx={{ display: 'block' }}> <ListItemButton onClick={() => handleMenuItemClick(text)} sx={[ { minHeight: 48, px: 2.5, }, open ? { justifyContent: 'initial', } : { justifyContent: 'center', }, ]} > <ListItemIcon sx={[ { minWidth: 0, justifyContent: 'center', color: '#00ab57', }, open ? { mr: 3, } : { mr: 'auto', }, ]} > {index % 2 === 0 ? <InboxIcon /> : <MailIcon />} </ListItemIcon> <ListItemText primary={text} sx={[ open ? { opacity: 1, } : { opacity: 0, }, ]} /> </ListItemButton> </ListItem> ))} </List> <Divider /> {/* Logout Button */} <Box sx={{ padding: '16px' }}> <Button variant="contained" color="error" fullWidth onClick={handleLogout} > Logout </Button> </Box> </Drawer> <MainContent> <video autoPlay loop muted> <source src={bgvideo} type="video/mp4" /> Your browser does not support the video tag. </video> <DrawerHeader /> {activeSection === 'Change Cost' && <ItemManagement />} {activeSection === 'Total Orders' && <TotalOrder />} {activeSection === 'Today Orders' && <TodayOrder />} {/* Render other components based on activeSection */} </MainContent> </Box> ); } make this stylish