@mui/material#Drawer JavaScript Examples

function SideDrawer(props) {
  const { classes, onClose, open } = props;
  return (
    <Drawer anchor="right" open={open} variant="temporary" onClose={onClose}>
      <Toolbar disableGutters className={classes.toolbar}>
        <Box
          pl={3}
          pr={3}
          display="flex"
          justifyContent="space-between"
          width="100%"
          alignItems="center"
        >
          <Typography variant="h6">A Sidedrawer</Typography>
          <IconButton
            onClick={onClose}
            color="primary"
            aria-label="Close Sidedrawer"
            size="large">
            <CloseIcon />
          </IconButton>
        </Box>
      </Toolbar>
      <Divider />
    </Drawer>
  );
}

function ResponsiveDrawer(props) {

  const { classes, domains, expanded } = props;
  return (
    <nav className={classes.drawer} aria-label="navigation">
      <Hidden mdUp implementation="css">
        <Drawer
          variant="temporary"
          anchor={"left"}
          open={expanded}
          onClose={props.toggleExpansion}
          classes={{
            paper: classes.drawerPaper,
          }}
          ModalProps={{
            keepMounted: true, // Better open performance on mobile.
          }}
        >
          <NavigationLinks domains={domains}/>
        </Drawer>
      </Hidden>
      <Hidden lgDown implementation="css">
        <Drawer
          classes={{
            paper: classes.drawerPaper,
          }}
          variant="permanent"
          open
        >
          <NavigationLinks domains={domains}/>
        </Drawer>
      </Hidden>
    </nav>
  );
}

function NavBar(props) {
  const { selectedTab, messages, classes, openAddBalanceDialog, theme } = props;
  // Will be use to make website more accessible by screen readers
  const links = useRef([]);
  const [isMobileOpen, setIsMobileOpen] = useState(false);
  const [isSideDrawerOpen, setIsSideDrawerOpen] = useState(false);
  const isWidthUpSm = useMediaQuery(theme.breakpoints.up("sm"));

  const openMobileDrawer = useCallback(() => {
    setIsMobileOpen(true);
  }, [setIsMobileOpen]);

  const closeMobileDrawer = useCallback(() => {
    setIsMobileOpen(false);
  }, [setIsMobileOpen]);

  const openDrawer = useCallback(() => {
    setIsSideDrawerOpen(true);
  }, [setIsSideDrawerOpen]);

  const closeDrawer = useCallback(() => {
    setIsSideDrawerOpen(false);
  }, [setIsSideDrawerOpen]);

  const menuItems = [
    {
      link: "/c/dashboard",
      name: "Dashboard",
      onClick: closeMobileDrawer,
      icon: {
        desktop: (
          <DashboardIcon
            className={
              selectedTab === "Dashboard" ? classes.textPrimary : "text-white"
            }
            fontSize="small"
          />
        ),
        mobile: <DashboardIcon className="text-white" />,
      },
    },
    {
      link: "/c/posts",
      name: "Posts",
      onClick: closeMobileDrawer,
      icon: {
        desktop: (
          <ImageIcon
            className={
              selectedTab === "Posts" ? classes.textPrimary : "text-white"
            }
            fontSize="small"
          />
        ),
        mobile: <ImageIcon className="text-white" />,
      },
    },
    {
      link: "/c/subscription",
      name: "Subscription",
      onClick: closeMobileDrawer,
      icon: {
        desktop: (
          <AccountBalanceIcon
            className={
              selectedTab === "Subscription"
                ? classes.textPrimary
                : "text-white"
            }
            fontSize="small"
          />
        ),
        mobile: <AccountBalanceIcon className="text-white" />,
      },
    },
    {
      link: "/",
      name: "Logout",
      icon: {
        desktop: (
          <PowerSettingsNewIcon className="text-white" fontSize="small" />
        ),
        mobile: <PowerSettingsNewIcon className="text-white" />,
      },
    },
  ];
  return (
    <Fragment>
      <AppBar position="sticky" className={classes.appBar}>
        <Toolbar className={classes.appBarToolbar}>
          <Box display="flex" alignItems="center">
            <Hidden smUp>
              <Box mr={1}>
                <IconButton
                  aria-label="Open Navigation"
                  onClick={openMobileDrawer}
                  color="primary"
                  size="large"
                >
                  <MenuIcon />
                </IconButton>
              </Box>
            </Hidden>
            <Hidden smDown>
              <Typography
                variant="h4"
                className={classes.brandText}
                display="inline"
                color="primary"
              >
                Wa
              </Typography>
              <Typography
                variant="h4"
                className={classes.brandText}
                display="inline"
                color="secondary"
              >
                Ver
              </Typography>
            </Hidden>
          </Box>
          <Box
            display="flex"
            justifyContent="flex-end"
            alignItems="center"
            width="100%"
          >
            {isWidthUpSm && (
              <Box mr={3}>
                <Balance
                  balance={2573}
                  openAddBalanceDialog={openAddBalanceDialog}
                />
              </Box>
            )}
            <MessagePopperButton messages={messages} />
            <ListItem
              disableGutters
              className={classNames(classes.iconListItem, classes.smBordered)}
            >
              <Avatar
                alt="profile picture"
                src={`${process.env.PUBLIC_URL}/images/logged_in/profilePicture.jpg`}
                className={classNames(classes.accountAvatar)}
              />
              {isWidthUpSm && (
                <ListItemText
                  className={classes.username}
                  primary={
                    <Typography color="textPrimary">Username</Typography>
                  }
                />
              )}
            </ListItem>
          </Box>
          <IconButton
            onClick={openDrawer}
            color="primary"
            aria-label="Open Sidedrawer"
            size="large"
          >
            <SupervisorAccountIcon />
          </IconButton>
          <SideDrawer open={isSideDrawerOpen} onClose={closeDrawer} />
        </Toolbar>
      </AppBar>
      <Hidden smDown>
        <Drawer //  both drawers can be combined into one for performance
          variant="permanent"
          classes={{
            paper: classes.drawerPaper,
          }}
          open={false}
        >
          <List>
            {menuItems.map((element, index) => (
              <Link
                to={element.link}
                className={classes.menuLink}
                onClick={element.onClick}
                key={index}
                ref={(node) => {
                  links.current[index] = node;
                }}
              >
                <Tooltip
                  title={element.name}
                  placement="right"
                  key={element.name}
                >
                  <ListItem
                    selected={selectedTab === element.name}
                    button
                    divider={index !== menuItems.length - 1}
                    className={classes.permanentDrawerListItem}
                    onClick={() => {
                      links.current[index].click();
                    }}
                    aria-label={
                      element.name === "Logout"
                        ? "Logout"
                        : `Go to ${element.name}`
                    }
                  >
                    <ListItemIcon className={classes.justifyCenter}>
                      {element.icon.desktop}
                    </ListItemIcon>
                  </ListItem>
                </Tooltip>
              </Link>
            ))}
          </List>
        </Drawer>
      </Hidden>
      <NavigationDrawer
        menuItems={menuItems.map((element) => ({
          link: element.link,
          name: element.name,
          icon: element.icon.mobile,
          onClick: element.onClick,
        }))}
        anchor="left"
        open={isMobileOpen}
        selectedItem={selectedTab}
        onClose={closeMobileDrawer}
      />
    </Fragment>
  );
}

function NavigationDrawer(props) {
  const { open, onClose, anchor, classes, menuItems, selectedItem, theme } =
    props;
  const isWidthUpSm = useMediaQuery(theme.breakpoints.up("sm"));

  window.onresize = () => {
    if (isWidthUpSm && open) {
      onClose();
    }
  };

  return (
    <Drawer variant="temporary" open={open} onClose={onClose} anchor={anchor}>
      <Toolbar className={classes.headSection}>
        <ListItem
          style={{
            paddingTop: theme.spacing(0),
            paddingBottom: theme.spacing(0),
            height: "100%",
            justifyContent: anchor === "left" ? "flex-start" : "flex-end",
          }}
          disableGutters
        >
          <ListItemIcon className={classes.closeIcon}>
            <IconButton
              onClick={onClose}
              aria-label="Close Navigation"
              size="large"
            >
              <CloseIcon color="primary" />
            </IconButton>
          </ListItemIcon>
        </ListItem>
      </Toolbar>
      <List className={classes.blackList}>
        {menuItems.map((element) => {
          if (element.link) {
            return (
              <Link
                key={element.name}
                to={element.link}
                className={classes.noDecoration}
                onClick={onClose}
              >
                <ListItem
                  button
                  selected={selectedItem === element.name}
                  /**
                   * We disable ripple as it will make a weird animation
                   * with primary and secondary color
                   */
                  disableRipple
                  disableTouchRipple
                >
                  <ListItemIcon>{element.icon}</ListItemIcon>
                  <ListItemText
                    primary={
                      <Typography variant="subtitle1" className="text-white">
                        {element.name}
                      </Typography>
                    }
                  />
                </ListItem>
              </Link>
            );
          }
          return (
            <ListItem button key={element.name} onClick={element.onClick}>
              <ListItemIcon>{element.icon}</ListItemIcon>
              <ListItemText
                primary={
                  <Typography variant="subtitle1" className="text-white">
                    {element.name}
                  </Typography>
                }
              />
            </ListItem>
          );
        })}
      </List>
    </Drawer>
  );
}

export default function DashboardSidebar({ isOpenSidebar, onCloseSidebar }) {
  const BlankPofile = 'https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460__340.png';
  const userLogin = useSelector((state) => state.userLogin);
  const { userInfo } = userLogin;
  const { pathname } = useLocation();

  const isDesktop = useResponsive('up', 'lg');

  useEffect(() => {
    if (isOpenSidebar) {
      onCloseSidebar();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pathname]);

  const renderContent = (
    <Scrollbar
      sx={{
        height: 1,
        '& .simplebar-content': { height: 1, display: 'flex', flexDirection: 'column' },
      }}
    >
      <Box sx={{ px: 2.5, py: 3, display: 'inline-flex' }}>
        <Logo />
      </Box>

      <Box sx={{ mb: 5, mx: 2.5 }}>
        <Link underline="none" component={RouterLink} to="#">
          <AccountStyle>
            <Avatar src={userInfo ? userInfo.avatar : BlankPofile} alt="photoURL" />
            <Box sx={{ ml: 2 }}>
              <Typography variant="subtitle2" sx={{ color: 'text.primary' }}>
                {userInfo ? (
                  <>
                    {userInfo.name} 
                  </>
                ) : (
                  'John Doe'
                )}
              </Typography>
            </Box>
          </AccountStyle>
        </Link>
      </Box>

      <NavSection navConfig={navConfig} />

      <Box sx={{ flexGrow: 1 }} />

      <Box sx={{ px: 2.5, pb: 3, mt: 10 }}>
        <Stack alignItems="center" spacing={3} sx={{ pt: 5, borderRadius: 2, position: 'relative' }}>
          <Box
            component="img"
            src="https://cdn.pixabay.com/photo/2021/09/11/12/17/github-6615451__340.png"
            sx={{ width: 100, position: 'absolute', top: -50 }}
          />

          <Box sx={{ textAlign: 'center' }}>
            <Typography gutterBottom variant="h6">
              GitHub
            </Typography>
            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
              MIT License
            </Typography>
          </Box>

          <Button
            href="https://github.com/faisalnazik/Django-REST-Framework-React-BoilerPlate"
            target="_blank"
            variant="contained"
          >
            Make a Clone
          </Button>
        </Stack>
      </Box>
    </Scrollbar>
  );

  return (
    <RootStyle>
      {!isDesktop && (
        <Drawer
          open={isOpenSidebar}
          onClose={onCloseSidebar}
          PaperProps={{
            sx: { width: DRAWER_WIDTH },
          }}
        >
          {renderContent}
        </Drawer>
      )}

      {isDesktop && (
        <Drawer
          open
          variant="persistent"
          PaperProps={{
            sx: {
              width: DRAWER_WIDTH,
              bgcolor: 'background.default',
              borderRightStyle: 'dashed',
            },
          }}
        >
          {renderContent}
        </Drawer>
      )}
    </RootStyle>
  );
}

Component = () => {
  const [data, setData] = React.useState({ nodes });

  //* Theme *//

  const materialTheme = getTheme({
    ...DEFAULT_OPTIONS,
    striped: true,
    highlightOnHover: true,
  });
  const customTheme = {
    Table: `
      --data-table-library_grid-template-columns:  70px repeat(5, minmax(0, 1fr));

      margin: 16px 0px;
    `,
  };
  const theme = useTheme([materialTheme, customTheme]);

  //* Resize *//

  const resize = { resizerHighlight: '#dee2e6' };

  //* Pagination *//

  const pagination = usePagination(data, {
    state: {
      page: 0,
      size: 2,
    },
    onChange: onPaginationChange,
  });

  function onPaginationChange(action, state) {
    console.log(action, state);
  }

  //* Search *//

  const [search, setSearch] = React.useState('');

  useCustom('search', data, {
    state: { search },
    onChange: onSearchChange,
  });

  function onSearchChange(action, state) {
    console.log(action, state);
    pagination.fns.onSetPage(0);
  }

  //* Filter *//

  const [isHide, setHide] = React.useState(false);

  useCustom('filter', data, {
    state: { isHide },
    onChange: onFilterChange,
  });

  function onFilterChange(action, state) {
    console.log(action, state);
    pagination.fns.onSetPage(0);
  }

  //* Select *//

  const select = useRowSelect(data, {
    onChange: onSelectChange,
  });

  function onSelectChange(action, state) {
    console.log(action, state);
  }

  //* Tree *//

  const tree = useTree(
    data,
    {
      onChange: onTreeChange,
    },
    {
      clickType: TreeExpandClickTypes.ButtonClick,
      treeYLevel: 1,
      treeIcon: {
        margin: '4px',
        iconDefault: null,
        iconRight: <FaChevronRight />,
        iconDown: <FaChevronDown />,
      },
    },
  );

  function onTreeChange(action, state) {
    console.log(action, state);
  }

  //* Sort *//

  const sort = useSort(
    data,
    {
      onChange: onSortChange,
    },
    {
      sortIcon: {
        iconDefault: null,
        iconUp: <FaChevronUp />,
        iconDown: <FaChevronDown />,
      },
      sortFns: {
        TASK: (array) => array.sort((a, b) => a.name.localeCompare(b.name)),
        DEADLINE: (array) => array.sort((a, b) => a.deadline - b.deadline),
        TYPE: (array) => array.sort((a, b) => a.type.localeCompare(b.type)),
        COMPLETE: (array) => array.sort((a, b) => a.isComplete - b.isComplete),
        TASKS: (array) => array.sort((a, b) => (a.nodes || []).length - (b.nodes || []).length),
      },
    },
  );

  function onSortChange(action, state) {
    console.log(action, state);
  }

  //* Drawer *//

  const [drawerId, setDrawerId] = React.useState(null);
  const [edited, setEdited] = React.useState('');

  const handleEdit = (event) => {
    setEdited(event.target.value);
  };

  const handleCancel = () => {
    setEdited('');
    setDrawerId(null);
  };

  const handleSave = () => {
    const node = findNodeById(data.nodes, drawerId);
    const editedNode = { ...node, name: edited };
    const nodes = insertNode(data.nodes, editedNode);

    setData({
      nodes,
    });

    setEdited('');
    setDrawerId(null);
  };

  //* Modal *//

  const [modalOpened, setModalOpened] = React.useState(false);

  //* Custom Modifiers *//

  let modifiedNodes = data.nodes;

  // search
  modifiedNodes = modifiedNodes.filter((node) =>
    node.name.toLowerCase().includes(search.toLowerCase()),
  );

  // filter
  modifiedNodes = isHide ? modifiedNodes.filter((node) => !node.isComplete) : modifiedNodes;

  //* Columns *//

  const COLUMNS = [
    {
      label: 'Task',
      renderCell: (item) => item.name,
      resize,
      sort: { sortKey: 'TASK' },
      select: {
        renderHeaderCellSelect: () => (
          <Checkbox
            size="small"
            checked={select.state.all}
            indeterminate={!select.state.all && !select.state.none}
            onChange={select.fns.onToggleAll}
          />
        ),
        renderCellSelect: (item) => (
          <Checkbox
            size="small"
            checked={select.state.ids.includes(item.id)}
            onChange={() => select.fns.onToggleById(item.id)}
          />
        ),
      },
      tree: true,
    },
    {
      label: 'Deadline',
      renderCell: (item) =>
        item.deadline.toLocaleDateString('en-US', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
        }),
      resize,
      sort: { sortKey: 'DEADLINE' },
    },
    { label: 'Type', renderCell: (item) => item.type, resize, sort: { sortKey: 'TYPE' } },
    {
      label: 'Complete',
      renderCell: (item) => item.isComplete.toString(),
      resize,
      sort: { sortKey: 'COMPLETE' },
    },
    {
      label: 'Tasks',
      renderCell: (item) => (
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span>{item.nodes?.length}</span>
          <IconButton onClick={() => setDrawerId(item.id)}>
            <FaPen size={14} />
          </IconButton>
        </div>
      ),
      resize,
      sort: { sortKey: 'TASKS' },
    },
  ];

  return (
    <>
      <Modal open={modalOpened} onClose={() => setModalOpened(false)}>
        <Box
          style={{
            position: 'absolute',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            width: 500,
            backgroundColor: '#ffffff',
            border: '1px solid #e0e0e0',
            borderRadius: '4px',
            padding: '10px',
          }}
        >
          <Typography variant="h6" component="h2">
            "Not all features included here, but we got ..."
          </Typography>
          <FormGroup>
            <FormControlLabel control={<Checkbox checked />} label="Resize" />
            <FormControlLabel control={<Checkbox checked />} label="Sort" />
            <FormControlLabel control={<Checkbox checked />} label="Search" />
            <FormControlLabel control={<Checkbox checked />} label="Filter" />
            <FormControlLabel control={<Checkbox checked />} label="Select" />
            <FormControlLabel control={<Checkbox checked />} label="Tree" />
            <FormControlLabel control={<Checkbox checked />} label="Drawer on Edit" />
            <FormControlLabel control={<Checkbox checked />} label="Pagination" />
          </FormGroup>
        </Box>
      </Modal>

      {/* Form */}

      <Stack spacing={1} direction="row">
        <Button variant="contained" onClick={() => setModalOpened(true)}>
          Features?
        </Button>

        <TextField
          label="Search Task"
          value={search}
          onChange={(event) => setSearch(event.target.value)}
        />
        <FormControlLabel
          control={
            <Checkbox checked={isHide} onChange={(event) => setHide(event.target.checked)} />
          }
          label="Hide Complete"
        />
      </Stack>

      {/* Table */}

      <CompactTable
        columns={COLUMNS}
        data={{ ...data, nodes: modifiedNodes }}
        theme={theme}
        layout={{ custom: true }}
        select={select}
        tree={tree}
        sort={sort}
        pagination={pagination}
      />

      <br />
      <Stack spacing={10}>
        <TablePagination
          count={modifiedNodes.length}
          page={pagination.state.page}
          rowsPerPage={pagination.state.size}
          rowsPerPageOptions={[1, 2, 5]}
          onRowsPerPageChange={(event) =>
            pagination.fns.onSetSize(parseInt(event.target.value, 10))
          }
          onPageChange={(event, page) => pagination.fns.onSetPage(page)}
        />
      </Stack>

      <Drawer
        open={drawerId}
        onClose={handleCancel}
        title="Edit"
        anchor="right"
        PaperProps={{
          sx: { width: '50%', padding: '20px' },
        }}
      >
        <Stack spacing={1}>
          <TextField
            label="Name"
            value={edited || fromTreeToList(data.nodes).find((node) => node.id === drawerId)?.name}
            onChange={handleEdit}
            autoFocus
          />
          <Button variant="outlined" onClick={handleCancel}>
            Cancel
          </Button>
          <Button variant="contained" onClick={handleSave}>
            Save
          </Button>
        </Stack>
      </Drawer>
    </>
  );
}

MatxCustomizer = () => {
  const theme = useTheme();
  const [open, setOpen] = useState(false);
  const [tabIndex, setTabIndex] = useState(0);
  const { settings, updateSettings } = useSettings();
  const secondary = theme.palette.text.secondary;

  const tooglePanel = () => setOpen(!open);

  const handleTabChange = (index) => setTabIndex(index);

  let activeTheme = { ...settings.themes[settings.activeTheme] };

  return (
    <Fragment>
      <Tooltip title="Theme Settings" placement="left">
        <Label className="open" onClick={tooglePanel}>
          DEMOS
        </Label>
      </Tooltip>

      <ThemeProvider theme={activeTheme}>
        <Drawer
          open={open}
          anchor="right"
          variant="temporary"
          onClose={tooglePanel}
          ModalProps={{ keepMounted: true }}
        >
          <MaxCustomaizer>
            <Controller>
              <Box display="flex">
                <Icon className="icon" color="primary">
                  settings
                </Icon>
                <H5 sx={{ ml: 1, fontSize: '1rem' }}>Theme Settings</H5>
              </Box>

              <IconButton onClick={tooglePanel}>
                <Icon className="icon">close</Icon>
              </IconButton>
            </Controller>

            <Box px={3} mb={2} display="flex">
              <Button
                variant="outlined"
                onClick={() => handleTabChange(0)}
                color={tabIndex === 0 ? 'secondary' : 'primary'}
                sx={{ mr: 2 }}
              >
                Demos
              </Button>
              <Button
                variant="outlined"
                onClick={() => handleTabChange(1)}
                color={tabIndex === 1 ? 'secondary' : 'primary'}
              >
                Settings
              </Button>
            </Box>

            <StyledScrollBar options={{ suppressScrollX: true }}>
              {tabIndex === 0 && (
                <Box sx={{ mb: 4, mx: 3 }}>
                  <Box sx={{ color: secondary }}>Layouts</Box>

                  <Box display="flex" flexDirection="column">
                    {demoLayouts.map((layout) => (
                      <LayoutBox
                        key={layout.name}
                        color="secondary"
                        badgeContent={'Pro'}
                        invisible={!layout.isPro}
                      >
                        <Card
                          elevation={4}
                          sx={{ position: 'relative' }}
                          onClick={() => updateSettings(layout.options)}
                        >
                          <Box sx={{ overflow: 'hidden' }} className="layout-name">
                            <Button variant="contained" color="secondary">
                              {layout.name}
                            </Button>
                          </Box>

                          <IMG src={layout.thumbnail} alt={layout.name} />
                        </Card>
                      </LayoutBox>
                    ))}
                  </Box>
                </Box>
              )}

              {/* END LAYOUT */}
              {tabIndex === 1 && (
                <div>
                  <div className="helpText">
                    We used React context API to control layout. Check out the{' '}
                    <Link href="http://demos.ui-lib.com/matx-react-doc/layout.html" target="_blank">
                      Documentation
                    </Link>
                  </div>
                </div>
              )}
            </StyledScrollBar>
          </MaxCustomaizer>
        </Drawer>
      </ThemeProvider>
    </Fragment>
  );
}

NotificationBar = ({ container }) => {
  const { settings } = useSettings();
  const theme = useTheme();
  const secondary = theme.palette.text.secondary;
  const [panelOpen, setPanelOpen] = React.useState(false);
  const { deleteNotification, clearNotifications, notifications } = useNotification();

  const handleDrawerToggle = () => {
    setPanelOpen(!panelOpen);
  };

  const { palette } = useTheme();
  const textColor = palette.text.primary;

  return (
    <Fragment>
      <IconButton onClick={handleDrawerToggle}>
        <Badge color="secondary" badgeContent={notifications?.length}>
          <Icon sx={{ color: textColor }}>notifications</Icon>
        </Badge>
      </IconButton>

      <ThemeProvider theme={settings.themes[settings.activeTheme]}>
        <Drawer
          width={'100px'}
          container={container}
          variant="temporary"
          anchor={'right'}
          open={panelOpen}
          onClose={handleDrawerToggle}
          ModalProps={{
            keepMounted: true,
          }}
        >
          <Box sx={{ width: sideNavWidth }}>
            <Notification>
              <Icon color="primary">notifications</Icon>
              <h5>Notifications</h5>
            </Notification>

            {notifications?.map((notification) => (
              <NotificationCard key={notification.id}>
                <DeleteButton
                  size="small"
                  className="deleteButton"
                  onClick={() => deleteNotification(notification.id)}
                >
                  <Icon className="icon">clear</Icon>
                </DeleteButton>
                <Link
                  to={`/${notification.path}`}
                  onClick={handleDrawerToggle}
                  style={{ textDecoration: 'none' }}
                >
                  <Card sx={{ mx: 2, mb: 3 }} elevation={3}>
                    <CardLeftContent>
                      <Box display="flex">
                        <Icon className="icon" color={notification.icon.color}>
                          {notification.icon.name}
                        </Icon>
                        <Heading>{notification.heading}</Heading>
                      </Box>
                      <Small className="messageTime">
                        {getTimeDifference(new Date(notification.timestamp))}
                        ago
                      </Small>
                    </CardLeftContent>
                    <Box sx={{ px: 2, pt: 1, pb: 2 }}>
                      <Paragraph sx={{ m: 0 }}>{notification.title}</Paragraph>
                      <Small sx={{ color: secondary }}>{notification.subtitle}</Small>
                    </Box>
                  </Card>
                </Link>
              </NotificationCard>
            ))}
            {!!notifications?.length && (
              <Box sx={{ color: secondary }}>
                <Button onClick={clearNotifications}>Clear Notifications</Button>
              </Box>
            )}
          </Box>
        </Drawer>
      </ThemeProvider>
    </Fragment>
  );
}

function ShoppingCart({ container }) {
  const [totalCost, setTotalCost] = useState(0);
  const [panelOpen, setPanelOpen] = useState(false);
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { user } = useAuth();
  const { cartList } = useSelector((state) => state.ecommerce);
  const { settings } = useSettings();
  const theme = useTheme();
  const secondary = theme.palette.text.secondary;

  if (!cartListLoaded) {
    dispatch(getCartList(user.id));
    cartListLoaded = true;
  }

  const handleDrawerToggle = () => {
    setPanelOpen(!panelOpen);
  };

  const handleCheckoutClick = () => {
    if (totalCost > 0) {
      navigate('/ecommerce/checkout');
      setPanelOpen(false);
    }
  };

  useEffect(() => {
    let total = 0;

    cartList.forEach((product) => {
      total += product.price * product.amount;
    });
    setTotalCost(total);
  }, [cartList]);

  const { palette } = useTheme();
  const textColor = palette.text.primary;

  return (
    <Fragment>
      <IconButton onClick={handleDrawerToggle}>
        <Badge color="secondary" badgeContent={cartList.length}>
          <Icon sx={{ color: textColor }}>shopping_cart</Icon>
        </Badge>
      </IconButton>

      <ThemeProvider theme={settings.themes[settings.activeTheme]}>
        <Drawer
          container={container}
          variant="temporary"
          anchor={'right'}
          open={panelOpen}
          onClose={handleDrawerToggle}
          ModalProps={{
            keepMounted: true,
          }}
        >
          <MiniCart>
            <CartBox>
              <Icon color="primary">shopping_cart</Icon>
              <h5>Cart</h5>
            </CartBox>

            <Box flexGrow={1} overflow="auto">
              {cartList.map((product) => (
                <ProductBox key={product.id}>
                  <Box mr="4px" display="flex" flexDirection="column">
                    <StyledIconButton
                      size="small"
                      onClick={() =>
                        dispatch(updateCartAmount(user.id, product.id, product.amount + 1))
                      }
                    >
                      <Icon sx={{ cursor: 'pinter' }}>keyboard_arrow_up</Icon>
                    </StyledIconButton>
                    <StyledIconButton
                      disabled={!(product.amount - 1)}
                      size="small"
                      onClick={() =>
                        dispatch(updateCartAmount(user.id, product.id, product.amount - 1))
                      }
                    >
                      <Icon id={!(product.amount - 1) && 'disable'}>keyboard_arrow_down</Icon>
                    </StyledIconButton>
                  </Box>
                  <Box mr={1}>
                    <IMG src={product.imgUrl} alt={product.title} />
                  </Box>
                  <ProductDetails>
                    <H6>{product.title}</H6>
                    <Small sx={{ color: secondary }}>
                      ${product.price} x {product.amount}
                    </Small>
                  </ProductDetails>
                  <StyledIconButton
                    size="small"
                    onClick={() => dispatch(deleteProductFromCart(user.userId, product.id))}
                  >
                    <Icon fontSize="small">clear</Icon>
                  </StyledIconButton>
                </ProductBox>
              ))}
            </Box>

            <Button
              sx={{ width: '100%', borderRadius: 0 }}
              variant="contained"
              color="primary"
              onClick={handleCheckoutClick}
            >
              Checkout (${totalCost.toFixed(2)})
            </Button>
          </MiniCart>
        </Drawer>
      </ThemeProvider>
    </Fragment>
  );
}

export default function Demo() {
	const [currentPhoto, setCurrentPhoto] = React.useState(DEFAULT_IMAGE);
	const [showPhoto, setShowPhoto] = React.useState(true);

	const [showLoading, setShowLoading] = React.useState(SHOW_LOADING);
	const [errorIcon, setErrorIcon] = React.useState(ERROR_ICON);
	const [height, setHeight] = React.useState(HEIGHT);
	const [width, setWidth] = React.useState(WIDTH);
	const [shift, setShift] = React.useState(SHIFT);
	const [distance, setDistance] = React.useState(DISTANCE);
	const [shiftDuration, setShiftDuration] = React.useState(SHIFT_DURATION);
	const [duration, setDuration] = React.useState(DURATION);
	const [easing, setEasing] = React.useState(EASING);
	const [fit, setFit] = React.useState(FIT);
	const [bgColor, setBgColor] = React.useState(BG_COLOR);

	function getNewPhoto() {
		if (mobileOpen) setMobileOpen(false);
		const newPhoto = Math.floor(Math.random() * 1051);
		setShowPhoto(false);
		setCurrentPhoto(newPhoto);
		setTimeout(() => {
			setShowPhoto(true);
		}, 100);
	}

	function refreshPhoto() {
		if (mobileOpen) setMobileOpen(false);
		setShowPhoto(false);
		setTimeout(() => {
			setShowPhoto(true);
		}, 100);
	}

	function resetDefaults() {
		setShowLoading(SHOW_LOADING);
		setErrorIcon(ERROR_ICON);
		setHeight(HEIGHT);
		setWidth(WIDTH);
		setShift(SHIFT);
		setDistance(DISTANCE);
		setShiftDuration(SHIFT_DURATION);
		setDuration(DURATION);
		setEasing(EASING);
		setFit(FIT);
		setBgColor(BG_COLOR);
	}

	const [mobileOpen, setMobileOpen] = React.useState(false);

	const mobile = useMediaQuery('@media (max-width: 900px)');

	function handleDrawerToggle() {
		setMobileOpen(!mobileOpen);
	}

	return (
		<Box sx={{ display: 'flex', height: '100vh' }}>
			<CssBaseline />
			<AppBar
				elevation={0}
				position="fixed"
				sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
			>
				<Toolbar>
					<IconButton
						color="inherit"
						aria-label="open drawer"
						edge="start"
						onClick={handleDrawerToggle}
						sx={{ mr: 2, display: { md: 'none' } }}
					>
						{mobileOpen ? <CodeOffIcon /> : <CodeIcon />}
					</IconButton>
					<Typography
						variant="h6"
						noWrap
						component="div"
						sx={{ flexGrow: 1, display: { xs: 'none', md: 'inline-block' } }}
					>
						<TypeIt
							getBeforeInit={(instance) => {
								instance
									.pause(3500)
									.type('npm install mui-image')
									.pause(1500)
									.delete()
									.type("import Image from 'mui-image'");

								return instance;
							}}
							options={{ speed: 120, cursor: false }}
						/>
					</Typography>
					<Typography
						variant="h6"
						noWrap
						component="div"
						sx={{ flexGrow: 1, display: { xs: 'inline-block', md: 'none' } }}
					>
						mui-image
					</Typography>
					<Box display="flex">
						<IconButton
							onClick={() =>
								window.open('https://yarnpkg.com/package/mui-image')
							}
							color="inherit"
						>
							<YarnIcon
								viewBox="0 0 256 256"
								fontSize="large"
								color="inherit"
							/>
						</IconButton>
						<IconButton
							onClick={() => window.open('https://npmjs.com/package/mui-image')}
							color="inherit"
						>
							<NpmIcon fontSize="large" color="inherit" />
						</IconButton>
						<IconButton
							onClick={() =>
								window.open('https://github.com/benmneb/mui-image')
							}
							color="inherit"
						>
							<GitHubIcon fontSize="large" color="inherit" />
						</IconButton>
					</Box>
				</Toolbar>
			</AppBar>
			<Drawer
				variant={mobile ? 'temporary' : 'permanent'}
				open={mobile ? mobileOpen : true}
				onClose={handleDrawerToggle}
				ModalProps={{
					keepMounted: true,
				}}
				sx={{
					width: DRAWER_WIDTH,
					maxWidth: '100vw',
					flexShrink: 0,
					'& .MuiDrawer-paper': {
						width: DRAWER_WIDTH,
						maxWidth: '100vw',
						boxSizing: 'border-box',
					},
				}}
			>
				<Toolbar />
				<Stack
					spacing={2}
					component="section"
					padding={2}
					sx={{ minWidth: '100%' }}
				>
					<Box component="div" variant="h6">
						{'<Image'}
					</Box>
					<Stack spacing={1} sx={{ pl: 2 }}>
						<Line component="div">
							src="https://picsum.photos/id/{currentPhoto}/2000"
						</Line>
						<Tooltip title="Any valid CSS `height` property" placement="right">
							<Line component="div">
								height="
								<TextField
									variant="standard"
									value={height}
									onChange={(e) => setHeight(e.target.value)}
								/>
								"
							</Line>
						</Tooltip>
						<Tooltip title="Any valid CSS `width` property" placement="right">
							<Line component="div">
								width="
								<TextField
									variant="standard"
									value={width}
									onChange={(e) => setWidth(e.target.value)}
								/>
								"
							</Line>
						</Tooltip>
						<Tooltip
							title="Any valid CSS `object-fit` property"
							placement="right"
						>
							<Line component="div">
								fit=
								<Select
									variant="standard"
									value={fit}
									onChange={(e) => setFit(e.target.value)}
									sx={{ minWidth: 100 }}
								>
									<MenuItem value="fill">"fill"</MenuItem>
									<MenuItem value="contain">"contain"</MenuItem>
									<MenuItem value="cover">"cover"</MenuItem>
									<MenuItem value="none">"none"</MenuItem>
									<MenuItem value="scale-down">"scale-down"</MenuItem>
								</Select>
							</Line>
						</Tooltip>
						<Tooltip
							title="Number of milliseconds the image takes to transition in"
							placement="right"
						>
							<Line component="div">
								duration={'{'}
								<TextField
									variant="standard"
									value={duration}
									onChange={(e) => setDuration(e.target.value)}
								/>
								{'}'}
							</Line>
						</Tooltip>
						<Tooltip
							title="Any valid CSS `transition-timing-function` property"
							placement="right"
						>
							<Line component="div">
								easing=
								<Select
									variant="standard"
									value={easing}
									onChange={(e) => setEasing(e.target.value)}
									sx={{ minWidth: 100 }}
								>
									<MenuItem value="cubic-bezier(0.7, 0, 0.6, 1)">
										"cubic-bezier(0.7, 0, 0.6, 1)"
									</MenuItem>
									<MenuItem value="ease">"ease"</MenuItem>
									<MenuItem value="ease-in">"ease-in"</MenuItem>
									<MenuItem value="ease-out">"ease-out"</MenuItem>
									<MenuItem value="ease-in-out">"ease-in-out"</MenuItem>
									<MenuItem value="linear">"linear"</MenuItem>
								</Select>
							</Line>
						</Tooltip>
						<Tooltip
							title="Once installed you can add a custom loading indicator"
							placement="right"
						>
							<Line component="div">
								showLoading=
								<FormControlLabel
									sx={{ ml: 0 }}
									control={
										<Switch
											checked={showLoading}
											onChange={(e) => setShowLoading(e.target.checked)}
										/>
									}
									label={`{ ${showLoading} }`}
									labelPlacement="start"
								/>
							</Line>
						</Tooltip>
						<Tooltip
							title="Once installed you can add a custom error icon"
							placement="right"
						>
							<Line component="div">
								errorIcon=
								<FormControlLabel
									sx={{ ml: 0 }}
									control={
										<Switch
											checked={errorIcon}
											onChange={(e) => setErrorIcon(e.target.checked)}
										/>
									}
									label={`{ ${errorIcon} }`}
									labelPlacement="start"
								/>
							</Line>
						</Tooltip>
						<Tooltip
							title="Direction to shift image as it appears"
							placement="right"
						>
							<Line component="div">
								shift=
								<Select
									variant="standard"
									value={shift || 'null'}
									onChange={(e) => setShift(e.target.value)}
									sx={{ minWidth: 100 }}
								>
									<MenuItem value={'null'}>{'{ null }'}</MenuItem>
									<MenuItem value="top">"top"</MenuItem>
									<MenuItem value="right">"right"</MenuItem>
									<MenuItem value="bottom">"bottom"</MenuItem>
									<MenuItem value="left">"left"</MenuItem>
								</Select>
							</Line>
						</Tooltip>
						<Tooltip
							title="Distance to shift the image as it appears. Any valid CSS `length` property"
							placement="right"
						>
							<Line component="div">
								distance="
								<TextField
									variant="standard"
									value={distance}
									onChange={(e) => setDistance(e.target.value)}
								/>
								"
							</Line>
						</Tooltip>
						<Tooltip
							title="Number of milliseconds the shift takes"
							placement="right"
						>
							<Line component="div">
								shiftDuration={'{'}
								<TextField
									variant="standard"
									value={shiftDuration || duration * 0.3}
									onChange={(e) => setShiftDuration(e.target.value)}
								/>
								{'}'}
							</Line>
						</Tooltip>
						<Tooltip
							title="Color the image transitions in from. Any valid CSS `background-color` property"
							placement="right"
						>
							<Line component="div">
								bgColor="
								<TextField
									variant="standard"
									value={bgColor}
									onChange={(e) => setBgColor(e.target.value)}
								/>
								"
							</Line>
						</Tooltip>
					</Stack>
					<Box component="div" variant="h6">
						{'/>'}
					</Box>
					<Button
						disabled={showPhoto === 'refresh'}
						variant="contained"
						onClick={refreshPhoto}
						disableElevation
					>
						Refresh photo
					</Button>
					<Button
						disabled={showPhoto === 'new'}
						variant="outlined"
						onClick={getNewPhoto}
					>
						Random photo
					</Button>
					<Button onClick={resetDefaults}>Reset defaults</Button>
				</Stack>
			</Drawer>
			<Box component="section" sx={{ flexGrow: 1, backgroundColor: bgColor }}>
				<Toolbar />
				<ImageOutput
					sx={{
						maxHeight: { xs: 'calc(100vh - 56px)', sm: 'calc(100vh - 64px)' },
					}}
				>
					{showPhoto && (
						<Image
							src={`https://picsum.photos/id/${currentPhoto}/2000`}
							width={width}
							height={height}
							duration={duration}
							showLoading={showLoading}
							errorIcon={errorIcon}
							shift={shift}
							distance={distance}
							shiftDuration={shiftDuration}
							easing={easing}
							fit={fit}
							bgColor={bgColor}
						/>
					)}
				</ImageOutput>
			</Box>
		</Box>
	);
}

Layout = (props) => {
  const { window } = props;
  const [mobileOpen, setMobileOpen] = React.useState(false);

  const handleDrawerToggle = () => {
    setMobileOpen(!mobileOpen);
  };

  const sidebarContents = [
    {
      title: "Contacts",
      link: "/admin_dashboard/contacts",
      icon: <Phone strokeWidth={1} />,
    },
    {
      title: "Tickets",
      link: "/admin_dashboard/tickets",
      icon: <Package strokeWidth={1} />,
    },
    {
      title: "Todos",
      link: "/admin_dashboard/todos",
      icon: <FileText strokeWidth={1} />,
    },
    {
      title: "Email",
      link: "/admin_dashboard/emails",
      icon: <Inbox strokeWidth={1} />,
    },
    {
      title: "CDA",
      link: "/admin_dashboard/cda",
      icon: <Book strokeWidth={1} />,
    },
  ];

  const drawer = (
    <div>
      <Toolbar />
      <Divider />
      <List>
        {sidebarContents.map((item, index) => (
          <ListItem button key={index} component={NavLink} to={item.link}>
            <ListItemIcon>{item.icon}</ListItemIcon>
            <ListItemText primary={item.title} />
          </ListItem>
        ))}
      </List>
      <Divider />
    </div>
  );

  const container =
    window !== undefined ? () => window().document.body : undefined;

  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  const renderMenu = (
    <Menu
      id="long-menu"
      MenuListProps={{
        "aria-labelledby": "long-button",
      }}
      anchorEl={anchorEl}
      open={open}
      onClose={handleClose}
    >
      <MenuItem onClick={handleClose}>
        <ListItemIcon>
          <User width="18px" strokeWidth={1.5} />
        </ListItemIcon>
        <Typography variant="inherit">Profile</Typography>
      </MenuItem>
      <MenuItem onClick={handleClose}>
        <ListItemIcon>
          <LogOut width="18px" strokeWidth={1.5} />
        </ListItemIcon>
        <Typography variant="inherit">Logout</Typography>
      </MenuItem>
    </Menu>
  );

  return (
    <section className="wrapper">
      <Box sx={{ display: "flex" }}>
        <CssBaseline />
        <AppBar
          position="fixed"
          sx={{
            // width: { sm: `calc(100% - ${drawerWidth}px)` },
            // ml: { sm: `${drawerWidth}px` },
            backgroundColor: "#1e1e2f",
            backgroundImage: "none",
            boxShadow: "none",
            borderTop: "2px solid #1d8cf8",
          }}
        >
          <Toolbar>
            <IconButton
              color="inherit"
              aria-label="open drawer"
              edge="start"
              onClick={handleDrawerToggle}
              sx={{ mr: 2, display: { sm: "none" } }}
            >
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" noWrap component="div">
              Easy CRM
            </Typography>
            <Box sx={{ flexGrow: 1 }} />
            <IconButton
              color="inherit"
              aria-label="more"
              id="long-button"
              aria-controls={open ? "long-menu" : undefined}
              aria-expanded={open ? "true" : undefined}
              aria-haspopup="true"
              onClick={handleClick}
            >
              <MoreVertical />
            </IconButton>
            {renderMenu}
          </Toolbar>
        </AppBar>
        <Box
          component="nav"
          sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
          aria-label="sidebar"
          className="sidebar"
        >
          {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
          <Drawer
            container={container}
            variant="temporary"
            open={mobileOpen}
            onClose={handleDrawerToggle}
            ModalProps={{
              keepMounted: true, // Better open performance on mobile.
            }}
            sx={{
              display: { xs: "block", sm: "none" },
              "& .MuiDrawer-paper": {
                boxSizing: "border-box",
                width: 230,
                border: "none",
                // backgroundColor: "transparent",
                background: "linear-gradient(0deg, #3358f4, #1d8cf8)",
                position: "relative",
              },
            }}
          >
            {drawer}
          </Drawer>
          <Drawer
            variant="permanent"
            sx={{
              display: { xs: "none", sm: "block" },
              "& .MuiDrawer-paper": {
                boxSizing: "border-box",
                width: 230,
                border: "none",
                backgroundColor: "transparent",
                position: "relative",
              },
            }}
            open
          >
            {drawer}
          </Drawer>
        </Box>
        <Box
          component="main"
          sx={{
            flexGrow: 1,
            p: 3,
            width: { sm: `calc(100% - ${drawerWidth}px)` },
            overflowY: "scroll",
            // height: "100vh - 64px",
          }}
          className="main-panel"
        >
          <Toolbar />
          <Outlet />
        </Box>
      </Box>
    </section>
  );
}