react-dash/src/components/Home/SideHome.js

import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import {
  Drawer,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  Box,
  useTheme,
  Typography
} from '@mui/material';
import {
  DashboardRounded as DashboardIcon,
  PointOfSale as CashierIcon,
  AllInbox as SupplierIcon,
  Store as InventoryIcon,
  School as TrainingIcon,
  AutoGraph as AnalyticsIcon,
  Restaurant as RestaurantIcon,
  CountertopsTwoTone as HostKitchenIcon,
  Queue as CreateKitchenIcon,
  Settings as SettingsIcon,
  Logout as LogoutIcon
} from '@mui/icons-material';

const menuItems = [
  { text: 'Dashboard', icon: <DashboardIcon />, path: '/dashboard' },
  { text: 'Cashier', icon: <CashierIcon />, path: '/cashier' },
  { text: 'Supplier', icon: <SupplierIcon />, path: '/supplier' },
  { text: 'Inventory', icon: <InventoryIcon />, path: '/inventory' },
  { text: 'Training', icon: <TrainingIcon />, path: '/training' },
  { text: 'Analytics & Reporting', icon: <AnalyticsIcon />, path: '/analytics' },
  { text: 'Restaurant Profile', icon: <RestaurantIcon />, path: '/profile' },
  { text: 'Host Kitchen', icon: <HostKitchenIcon />, path: '/host-kitchen' },
  { text: 'Create Kitchen', icon: <CreateKitchenIcon />, path: '/create-kitchen' },
  
];

const bottomItems = [
  { text: 'Settings', icon: <SettingsIcon />, path: '/settings' },
  { text: 'Log Out', icon: <LogoutIcon />, path: '/login' },
];

const Sidebar = ({ open, onClose, isMobile, drawerWidth }) => {
  const theme = useTheme();
  const navigate = useNavigate();
  const location = useLocation();

  const renderListItems = (items) =>
    items.map((item, index) => {
      const isActive = location.pathname === item.path;

      return (
        <ListItem key={index} disablePadding sx={{ px: 1 }}>
          <Box
            onClick={() => {
              if (item.text === 'Log Out') {
                localStorage.removeItem('token');
              }
              navigate(item.path);
              if (isMobile) onClose();
            }}
            sx={{
              display: 'flex',
              alignItems: 'center',
              width: '100%',
              borderRadius: '5px',
              backgroundColor: isActive ? '#F8F6F8' : 'transparent',
              px: 2,
              py: 1,
              cursor: 'pointer',
              transition: 'background-color 0.2s',
              '&:hover': {
                backgroundColor: '#fffcf9d5',
              },
            }}
          >
            <ListItemIcon sx={{
              color: isActive ? theme.palette.primary.main : '#A6ACB8',
              minWidth: 36
            }}>
              {item.icon}
            </ListItemIcon>
            <ListItemText
              primary={item.text}
              primaryTypographyProps={{
                sx: {
                  color: isActive ? theme.palette.primary.main : '#61677F',
                  fontSize: '0.875rem'
                },
              }}
            />
          </Box>
        </ListItem>
      );
    });

  const drawer = (
    <Box sx={{
      height: '100%',
      display: 'flex',
      flexDirection: 'column',
      bgcolor: 'background.paper'
    }}>
      <Box
        sx={{
          px: 2,
          py: 1.5,
          borderColor: 'divider',
          position: 'sticky',
          top: 0,
          zIndex: 1,
          bgcolor: 'background.paper'
        }}
      >
        <Box display="flex" alignItems="center">
          <Box
            component="img"
            src="/image.png"
            alt="logo"
            sx={{
              width: 40,
              height: 40,
              objectFit: 'contain',
              mr: 1.5,
            }}
          />
          <Box display="flex" alignItems="center">
            <Typography
              variant="h6"
              sx={{
                fontWeight: 400,
                fontSize: '1.25rem',
                color: 'text.primary',
              }}
            >
              KITCH
            </Typography>
            <Typography
              variant="h6"
              sx={{
                fontWeight: 400,
                fontSize: '1.25rem',
                color: 'primary.main',
                ml: 0.5,
              }}
            >
              PLUS
            </Typography>
          </Box>
        </Box>
      </Box>

      <Box sx={{
        flex: 1,
        overflowY: 'auto',
        scrollbarWidth: 'none',
        '&::-webkit-scrollbar': { display: 'none' },
        py: 1
      }}>
        <List>{renderListItems(menuItems)}</List>
      </Box>

      <Box sx={{
        position: 'sticky',
        bottom: 0,
        bgcolor: 'background.paper',
        borderColor: 'divider'
      }}>
        <List>{renderListItems(bottomItems)}</List>
      </Box>
    </Box>
  );

  return (
    <Box
      component="nav"
      sx={{
        width: { xs: 0, sm: 0, md: drawerWidth },
        flexShrink: { xs: 0, sm: 0, md: 0 },
        boxShadow: 'none',
      }}
    >
      <Drawer
        variant={isMobile ? 'temporary' : 'persistent'}
        open={open}
        onClose={onClose}
        ModalProps={{ keepMounted: true }}
        sx={{
          '& .MuiDrawer-paper': {
            width: drawerWidth,
            boxSizing: 'border-box',
            borderRight: 'none',
            boxShadow: 'none'
          },
        }}
      >
        {drawer}
      </Drawer>

    </Box>
  );

};

export default Sidebar;