supachat/src/Components/Channels.js

import {
  Box,
  Drawer,
  Toolbar,
  Divider,
  Typography,
  Button,
} from '@mui/material';
import { useAppContext } from '../Contexts/AppContext';

export function Channels({ drawerWidth, showChannels, setShowChannels }) {
  const { channels, setCurrentChannel } = useAppContext();

  return (
    <Box sx={{ display: 'flex' }}>
      <Drawer
        PaperProps={{
          sx: {
            width: 300,
          },
        }}
        anchor="left"
        open={showChannels}
        onClose={() => setShowChannels(false)}
        sx={{
          width: drawerWidth,
          flexShrink: 0,
          '& .MuiDrawer-paper': {
            width: drawerWidth,
          },
        }}
        variant="persistent"
      >
        <Toolbar variant="dense" sx={{ flexDirection: 'row' }}>
          <Box sx={{ flexGrow: 1 }}>
            <Typography
              variant="subtitle2"
              component="div"
              sx={{ flexGrow: 1, textTransform: 'uppercase' }}
            >
              channels
            </Typography>
          </Box>
        </Toolbar>
        <Divider />
        {channels.map((channel) => (
          <Button onClick={() => setCurrentChannel(channel)} key={channel.id}>
            {channel.slug}
          </Button>
        ))}
      </Drawer>
    </Box>
  );
}