@material-ui/core#Drawer TypeScript Examples

BannerBuiltIn = (props: {
  form: Client.BuiltIn;
}) => {
  const classes = useStyles();
  const forceUpdate = useForceUpdate();
  const { t } = useTranslation('app');
  return (
    <Drawer
      variant='persistent'
      open={trackingIsConsented() === undefined}
      anchor='bottom'
      PaperProps={{ style: { 'visibility': 'visible' } }} // Fix drawer incorrectly sets visiblity to false
    >
      <div className={classes.bannerDrawer}>
        <div>
          <Typography variant='h6' component='div'>{t(props.form.title as any) || t('cookie-consent')}</Typography>
          <Typography variant='body1' component='div'>{t(props.form.description as any) || t('we-use-cookies-to')}</Typography>
        </div>
        <div className={classes.bannerActions}>
          <Button
            onClick={() => {
              trackingReject();
              forceUpdate();
            }}
          >{t(props.form.reject as any) || t('reject-cookie')}</Button>
          <Button
            variant='contained'
            color='primary'
            onClick={() => {
              trackingConsent();
              forceUpdate();
            }}
          >{t(props.form.accept as any) || t('accept-cookie')}</Button>
        </div>
      </div>
    </Drawer>
  );
}

CartDrawer: React.FC = () => {
    const classes = useStyles();
    const ploc = useCartPloc();
    const state = usePlocState(ploc);

    return (
        <Drawer
            anchor="right"
            open={state.open}
            className={classes.drawer}
            classes={{
                paper: classes.drawerPaper,
            }}>
            <Box className={classes.drawerHeader}>
                <IconButton onClick={() => ploc.closeCart()}>
                    <ChevronLeftIcon />
                </IconButton>
                <Box className={classes.drawerTitleContainer}>
                    <ShoppingCartIcon className={classes.drawerTitleIcon} />
                    <Typography variant="h6" component="h2">
                        Cart
                    </Typography>
                </Box>
            </Box>
            <Divider />
            <CartContent />
        </Drawer>
    );
}

Sidebar = () => {
  const dispatch = useDispatch();
  const mobileOpen = useSelector(mobileDrawerOpen);

  const handleCloseMobileDrawer = () => {
    dispatch(setMobileDrawerOpen(false));
  };

  return (
    <>
      <Hidden smUp implementation="css">
        <Drawer
          variant="temporary"
          anchor="left"
          open={mobileOpen}
          onClose={handleCloseMobileDrawer}
          ModalProps={{ keepMounted: true }}
        >
          <DrawerContent />
        </Drawer>
      </Hidden>
      <Hidden xsDown implementation="css">
        <Drawer anchor="left" variant="permanent">
          <DrawerContent />
        </Drawer>
      </Hidden>
    </>
  );
}

StyledDrawer = withStyles((theme: Theme) => (
  createStyles({
    paper: {
      width: drawerWidth,
      backgroundColor: theme.palette.type === "dark" ? '#303030' : 'rgba(255, 255, 255, 1)',
      backdropFilter: `saturate(180%) blur(5px)`,
    },
    root: {
      backgroundColor: 'rgba(0, 0, 0, .4)',
      backdropFilter: `saturate(180%) blur(5px)`,
    }
  })
))(Drawer)

TechDocsBuildLogs = ({ buildLog }: { buildLog: string[] }) => {
  const classes = useDrawerStyles();
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button color="inherit" onClick={() => setOpen(true)}>
        Show Build Logs
      </Button>
      <Drawer
        classes={{ paper: classes.paper }}
        anchor="right"
        open={open}
        onClose={() => setOpen(false)}
      >
        <TechDocsBuildLogsDrawerContent
          buildLog={buildLog}
          onClose={() => setOpen(false)}
        />
      </Drawer>
    </>
  );
}

function DataDrawer({ classes }: DataDrawerProps) {
  const tableIsShowing = useSelector(getIsShowing);
  const analysisTableIsShowing = useSelector(isDataTableDrawerActiveSelector);
  const isShowing = tableIsShowing || analysisTableIsShowing;

  const dispatch = useDispatch();
  const handleClose = () => {
    dispatch(hideTable());
    dispatch(hideDataTableDrawer());
  };

  return (
    <Drawer
      anchor="left"
      open={isShowing}
      onClose={handleClose}
      classes={{ paper: classes.drawerBackground }}
    >
      <div className={classes.drawerContent}>
        {isShowing && <DataTable maxResults={1000} />}
      </div>
    </Drawer>
  );
}

function NavDrawer({ mobileOpen, handleDrawerToggle }: INavDrawer) {
  const classes = useStyles();

  return (
    <Drawer
      variant="temporary"
      anchor="left"
      open={mobileOpen}
      onClose={handleDrawerToggle}
      onClick={handleDrawerToggle}
      classes={{
        paper: classes.drawerPaper,
      }}
      ModalProps={{
        keepMounted: true,
      }}
    >
      <DrawerContent />
    </Drawer>
  );
}

function NavDrawer({ mobileOpen, handleDrawerToggle }: INavDrawer) {
    const classes = useStyles();

    return (
        <Drawer
            variant="temporary"
            anchor="left"
            open={mobileOpen}
            onClose={handleDrawerToggle}
            onClick={handleDrawerToggle}
            classes={{
                paper: classes.drawerPaper,
            }}
            ModalProps={{
                keepMounted: true,
            }}
        >
            <DrawerContent />
        </Drawer>
    );
}

function Sidebar() {
  return (
    <Drawer variant="permanent" anchor="left">
      <DrawerContent />
    </Drawer>
  );
}

Sidebar = (props) => {
  const { open, variant, onClose, className, ...rest } = props;

  const classes = useStyles();

  const pages = [
    {
      title: 'Dashboard',
      href: '/dashboard',
      icon: <DashboardIcon />,
    },
    {
      title: 'Users',
      href: '/users',
      icon: <PeopleIcon />,
    },
    {
      title: 'Products',
      href: '/products',
      icon: <ShoppingBasketIcon />,
    },
    {
      title: 'Authentication',
      href: '/sign-in',
      icon: <LockOpenIcon />,
    },
    {
      title: 'Typography',
      href: '/typography',
      icon: <TextFieldsIcon />,
    },
    {
      title: 'Icons',
      href: '/icons',
      icon: <ImageIcon />,
    },
    {
      title: 'Account',
      href: '/account',
      icon: <AccountBoxIcon />,
    },
    {
      title: 'Settings',
      href: '/settings',
      icon: <SettingsIcon />,
    },
  ];

  return (
    <Drawer
      anchor='left'
      classes={{ paper: classes.drawer }}
      onClose={onClose}
      open={open}
      variant={variant}
    >
      <div {...rest} className={clsx(classes.root, className)}>
        <Profile />
        <Divider className={classes.divider} />
        <SidebarNav className={classes.nav} pages={pages} />
        {/* <UpgradePlan /> */}
      </div>
    </Drawer>
  );
}

export default function NavDrawer({
  currentSection,
  currentTable,
  ...props
}: INavDrawerProps) {
  const classes = useStyles();

  const { sections } = useFiretableContext();

  return (
    <Drawer open {...props} classes={{ paper: classes.paper }}>
      <Grid
        container
        spacing={1}
        wrap="nowrap"
        alignItems="center"
        className={classes.logoRow}
      >
        <Grid item>
          <IconButton
            aria-label="Close navigation drawer"
            onClick={props.onClose as any}
          >
            <CloseIcon />
          </IconButton>
        </Grid>

        <Grid item className={classes.logo}>
          <FiretableLogo />
        </Grid>
      </Grid>

      <nav>
        <List>
          <li>
            <ListItem
              button
              classes={{ root: classes.listItem }}
              component={Link}
              to={routes.home}
            >
              <ListItemIcon className={classes.listItemIcon}>
                <HomeIcon />
              </ListItemIcon>
              <ListItemText
                primary="Home"
                classes={{ primary: classes.listItemText }}
              />
            </ListItem>
          </li>

          <Divider variant="middle" className={classes.divider} />

          {sections &&
            Object.entries(sections).map(([section, tables]) => (
              <NavDrawerItem
                key={section}
                section={section}
                tables={tables}
                currentSection={currentSection}
                currentTable={currentTable}
              />
            ))}
        </List>
      </nav>
    </Drawer>
  );
}

ReviewList: FC<ListProps> = props => {
    const classes = useStyles();
    const isXSmall = useMediaQuery<Theme>(theme =>
        theme.breakpoints.down('xs')
    );
    const history = useHistory();

    const handleClose = useCallback(() => {
        history.push('/reviews');
    }, [history]);

    return (
        <div className={classes.root}>
            <Route path="/reviews/:id">
                {({ match }): ReactElement => {
                    const isMatch = !!(
                        match &&
                        match.params &&
                        match.params.id !== 'create'
                    );

                    return (
                        <Fragment>
                            <List
                                {...props}
                                className={classnames(classes.list, {
                                    [classes.listWithDrawer]: isMatch,
                                })}
                                bulkActionButtons={<ReviewsBulkActionButtons />}
                                filters={<ReviewFilter />}
                                actions={
                                    <ListActions
                                        breadcrumb={
                                            <CustomBreadcrumb variant="actions" />
                                        }
                                    />
                                }
                                perPage={25}
                                sort={{ field: 'date', order: 'DESC' }}
                            >
                                {isXSmall ? (
                                    <ReviewListMobile />
                                ) : (
                                    <ReviewListDesktop
                                        selectedRow={
                                            isMatch &&
                                            !!match &&
                                            parseInt(match.params.id, 10)
                                        }
                                    />
                                )}
                            </List>
                            <Drawer
                                variant="persistent"
                                open={isMatch}
                                anchor="right"
                                onClose={handleClose}
                                classes={{
                                    paper: classes.drawerPaper,
                                }}
                            >
                                {/* To avoid any errors if the route does not match, we don't render at all the component in this case */}
                                {isMatch && !!match ? (
                                    <ReviewEdit
                                        id={match.params.id}
                                        onCancel={handleClose}
                                        {...props}
                                    />
                                ) : null}
                            </Drawer>
                        </Fragment>
                    );
                }}
            </Route>
        </div>
    );
}

TemporaryDrawer: React.FC = () => {
  const classes = useStyles();
  const [state, setState] = React.useState({
    top: false,
    left: false,
    bottom: false,
    right: false,
  });

  const items = [
    { text: 'USED INVENTORY', link: 'https://www.tesla.com/inventory/used/ms' },
    { text: 'TRADE-IN', link: 'https://www.tesla.com/tradein' },
    { text: 'CYBERTRUCK', link: 'https://www.tesla.com/cybertruck' },
    { text: 'ROADSTER', link: 'https://www.tesla.com/roadster' },
    { text: 'SEMI', link: 'https://www.tesla.com/semi' },
    { text: 'POWERWALL', link: 'https://www.tesla.com/powerwall' },
    { text: 'COMMERCIAL SOLAR', link: 'https://www.tesla.com/commercial' },
    { text: 'TEST DRIVE', link: 'https://www.tesla.com/drive' },
    { text: 'CHARGING', link: 'https://www.tesla.com/charging' },
    { text: 'FIND US', link: 'https://www.tesla.com/findus' },
    { text: 'SUPPORT', link: 'https://www.tesla.com/support' },
    { text: 'UNITED STATES', link: 'https://www.tesla.com/findus/list' },
  ];

  const toggleDrawer = (anchor: Anchor, open: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
    if (event.type === 'keydown' && ((event as React.KeyboardEvent).key === 'Tab' || (event as React.KeyboardEvent).key === 'Shift')) {
      return;
    }

    setState({ ...state, [anchor]: open });
  };

  const list = (anchor: Anchor) => (
    <>
      <Button onClick={toggleDrawer(anchor, false)} className={clsx(classes.closeButton)}>
        <Close />
      </Button>
      <div
        className={clsx(classes.list, {
          [classes.fullList]: anchor === 'top' || anchor === 'bottom',
        })}
        role="presentation"
        onClick={toggleDrawer(anchor, false)}
        onKeyDown={toggleDrawer(anchor, false)}
      >
        <List>
          {items.map(item => (
            <div key={item.text}>
              <ListItem button key={item.text}>
                <a href={item.link} target="_blank" rel="noopener noreferrer">
                  <ListItemText primary={item.text} />
                </a>
              </ListItem>

              <Divider />
            </div>
          ))}
        </List>
      </div>
    </>
  );

  return (
    <div>
      {(['right'] as Anchor[]).map(anchor => (
        <React.Fragment key={anchor}>
          <Button onClick={toggleDrawer(anchor, true)}>
            <Burger />
          </Button>
          <Drawer anchor={anchor} open={state[anchor]} onClose={toggleDrawer(anchor, false)}>
            {list(anchor)}
          </Drawer>
        </React.Fragment>
      ))}
    </div>
  );
}

SideMenuDrawer = () => {
  const { showSideMenu, setSideMenu } = useDrawerContext();
  const [currentMenu, setCurrentMenu] = useState<SideMenu>("settings");
  const { t: translate } = useTranslation();
  const classes = useStyles();

  const getCurrentMenuLabel = () => {
    switch (currentMenu) {
      case "language":
        return translate("sidemenuDrawer.language");
      case "contact":
        return translate("sidemenuDrawer.contact");
      default:
        return translate("sidemenuDrawer.settings");
    }
  };

  const getCurrentMenu = () => {
    switch (currentMenu) {
      case "language":
        return <LanguageMenu />;
      case "contact":
        return <ContactMenu />;
      default:
        return <SettingsMenu setCurrentMenu={setCurrentMenu} />;
    }
  };

  return (
    <Drawer
      anchor={"bottom"}
      open={showSideMenu}
      onClose={() => setSideMenu(false)}
      classes={{
        paper: classes.drawerRoot,
      }}
    >
      <Paper className={classes.sideMenuHeader}>
        <Grid container justifyContent="space-between" alignItems="center">
          <Grid item container alignItems="center" xs={10}>
            {currentMenu !== "settings" && (
              <IconButton onClick={() => setCurrentMenu("settings")}>
                <ArrowBackIcon />
              </IconButton>
            )}
            <Typography variant="h6">{getCurrentMenuLabel()}</Typography>
          </Grid>
          <Grid item xs={2}>
            <IconButton onClick={() => setSideMenu(false)}>
              <CloseIcon />
            </IconButton>
          </Grid>
        </Grid>
      </Paper>
      {getCurrentMenu()}
    </Drawer>
  );
}

RouteDetailDrawer = ({
  showRouteDetailDrawer,
  onClose,
  routeNumber,
  journey,
}: RouteDetailDrawerProps) => {
  const classes = useStyles();
  const { t: translation } = useTranslation();
  const nStations = getStationIdsFromJourney(journey).length;
  return (
    <Drawer
      anchor={"bottom"}
      open={showRouteDetailDrawer}
      onClose={onClose}
      classes={{
        paper: classes.drawerRoot,
      }}
    >
      <Paper className={classes.drawerHeader}>
        <Grid
          container
          justifyContent="space-between"
          alignItems="center"
          className={classes.paddingVertical16px}
        >
          <Grid item>
            <Typography variant="h6">
              {translation("route.route")} {routeNumber}
            </Typography>
          </Grid>
          <Grid item>
            <IconButton onClick={() => onClose(false)}>
              <CloseIcon />
            </IconButton>
          </Grid>
        </Grid>
      </Paper>
      <Grid className={classes.drawerContent} container direction="column">
        <RouteFromTo from={journey.from} to={journey.to} />
        <RouteDetailInsight nStations={nStations} fare={journey.fare} />
        <Grid item className={classes.paddingVertical16px}>
          <SelectedRoute journey={journey} />
        </Grid>
      </Grid>
    </Drawer>
  );
}

FromToSelectDrawer = ({
  showRouteSearchDrawer,
  onClose,
  stationId,
  onSelect,
  placeHolder,
}: RouteDrawer) => {
  const classes = useStyles();
  const station = getStation(stationId);
  const {
    i18n: { language },
  } = useTranslation();
  const stationName = station ? getStationName(station, language) : "";
  const [searchTerm, setSearchTerm] = useState<string>(stationName);
  const [searchResult, setSearchResult] = useState<Station[]>(STATIONS);

  useEffect(() => {
    if (searchTerm.length > 1) {
      const result = searchStation(searchTerm);
      setSearchResult(result);
    } else {
      setSearchResult(STATIONS);
    }
  }, [searchTerm]);

  return (
    <Drawer
      anchor={"bottom"}
      open={showRouteSearchDrawer}
      onClose={onClose}
      classes={{
        paper: classes.drawerRoot,
      }}
    >
      <Paper className={classes.drawerHeader}>
        <Grid
          container
          justifyContent="space-between"
          alignItems="center"
          className={classes.drawerHeaderPadding}
        >
          <Grid item>
            <SearchIcon />
            <TextField
              placeholder={placeHolder}
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              variant="standard" />
          </Grid>
          <Grid item>
            <IconButton onClick={() => onClose(false)}>
              <CloseIcon />
            </IconButton>
          </Grid>
        </Grid>
      </Paper>
      <Grid className={classes.drawerContent}>
        <SearchResultList
          searchItems={searchResult}
          handleOnItemClick={onSelect}
        />
      </Grid>
    </Drawer>
  );
}

export default function SideBar(): ReactElement {
  const classes = useStyles()

  return (
    <Drawer className={classes.drawer} variant="permanent" anchor="left" classes={{ paper: classes.drawerPaper }}>
      <Grid container direction="column" justifyContent="space-between" className={classes.root}>
        <Grid className={classes.logo}>
          <Link to={ROUTES.INFO}>
            <img alt="swarm" src={Logo} />
          </Link>
        </Grid>
        <Grid>
          <List>
            {navBarItems.map(p => (
              <Link to={p.path} key={p.path} className={classes.link}>
                <SideBarItem
                  key={p.path}
                  iconStart={<p.icon className={classes.icon} />}
                  path={p.path}
                  label={p.label}
                />
              </Link>
            ))}
          </List>
          <Divider className={classes.divider} />
          <List>
            <MUILink href={config.BEE_DOCS_HOST} target="_blank" className={classes.link}>
              <SideBarItem
                iconStart={<BookOpen className={classes.icon} />}
                iconEnd={<OpenInNewSharp className={classes.iconSmall} />}
                label={<span>Docs</span>}
              />
            </MUILink>
          </List>
        </Grid>
        <Grid>
          <Link to={ROUTES.STATUS} className={classes.link}>
            <SideBarStatus path={ROUTES.STATUS} />
          </Link>
        </Grid>
      </Grid>
    </Drawer>
  )
}

Sidebar: React.FC<IProps> = ({ children, open, onClose }) => {
  const data = useStaticQuery(graphql`
    query SidebarQuery {
      site {
        siteMetadata {
          title
          logoUrl
          menuLinks {
            name
            link
          }
        }
      }
    }
  `);
  const theme: any = useTheme();

  return (
    <Drawer open={open} onClose={onClose}>
      <Grid container style={{ paddingLeft: "20px", paddingTop: "20px" }}>
        <img
          alt="logo"
          height="30"
          style={{paddingRight: "10px"}}
          src={data.site.siteMetadata.logoUrl} />
        <Typography color="textSecondary" variant="h6">
          {data.site.siteMetadata.title}
        </Typography>
      </Grid>
      <List style={{ minWidth: "250px" }}>
        {data.site.siteMetadata.menuLinks.map((menuLink: any) => (
          <GatsbyLink
            to={menuLink.link} key={menuLink.name}
            style={{ color: theme.palette.text.secondary, textDecoration: "none" }}
            activeStyle={{ color: theme.palette.text.secondary }}
          >
            <ListItem button key="foo" onClick={onClose}>
              <ListItemText primary={menuLink.name} />
            </ListItem>
          </GatsbyLink>
        ))}
      </List>
    </Drawer>
  );

}

_Drawer = ({ open, anchor, onClose, children }: { open: boolean, anchor: Anchor, onClose: () => void, children: any }) => {
	const classes = useStyles();

	const [state, setState] = React.useState({
		top: false,
		left: false,
		bottom: false,
		right: false,
	});

	const toggleDrawer = (anchor: Anchor, open: boolean) => (
		event: React.KeyboardEvent | React.MouseEvent,
	) => {
		if (
			event.type === 'keydown' &&
			((event as React.KeyboardEvent).key === 'Tab' ||
				(event as React.KeyboardEvent).key === 'Shift')
		) {
			return;
		}

		setState({ ...state, [anchor]: open });
	};

	const Content = (anchor: Anchor) => (
		<div
			className={clsx(classes.list, {
				[classes.fullList]: anchor === 'top' || anchor === 'bottom',
			})}
			role="presentation"
			onClick={toggleDrawer(anchor, false)}
			onKeyDown={toggleDrawer(anchor, false)}
		>
			{children}
		</div>
	);

	return (
		<div>
			<Drawer anchor={anchor} open={open} onClose={onClose}>
				{Content(anchor)}
			</Drawer>
		</div>
	);
}

function Sidebar() {
    return (
        <Drawer variant="permanent" anchor="left">
            <DrawerContent />
        </Drawer>
    );
}

KubernetesDrawer = <T extends KubernetesDrawerable>({
  object,
  renderObject,
  kind,
  buttonVariant = 'subtitle2',
  expanded = false,
  children,
}: KubernetesDrawerProps<T>) => {
  const [isOpen, setIsOpen] = useState(expanded);
  const classes = useDrawerStyles();

  const toggleDrawer = (e: ChangeEvent<{}>, newValue: boolean) => {
    e.stopPropagation();
    setIsOpen(newValue);
  };

  return (
    <>
      <PodDrawerButton
        onClick={e => toggleDrawer(e, true)}
        onFocus={event => event.stopPropagation()}
      >
        {children === undefined ? (
          <Typography variant={buttonVariant}>
            {object.metadata?.name ?? 'unknown object'}
          </Typography>
        ) : (
          children
        )}
      </PodDrawerButton>
      <Drawer
        classes={{
          paper: classes.paper,
        }}
        anchor="right"
        open={isOpen}
        onClose={(e: any) => toggleDrawer(e, false)}
        onClick={event => event.stopPropagation()}
      >
        <KubernetesDrawerContent
          kind={kind}
          toggleDrawer={toggleDrawer}
          object={object}
          renderObject={renderObject}
        />
      </Drawer>
    </>
  );
}

Filters = (props: { children: React.ReactNode }) => {
  const isMidSizeScreen = useMediaQuery<BackstageTheme>(theme =>
    theme.breakpoints.down('md'),
  );
  const theme = useTheme<BackstageTheme>();
  const [filterDrawerOpen, setFilterDrawerOpen] = useState<boolean>(false);

  return isMidSizeScreen ? (
    <>
      <Button
        style={{ marginTop: theme.spacing(1), marginLeft: theme.spacing(1) }}
        onClick={() => setFilterDrawerOpen(true)}
        startIcon={<FilterListIcon />}
      >
        Filters
      </Button>
      <Drawer
        open={filterDrawerOpen}
        onClose={() => setFilterDrawerOpen(false)}
        anchor="left"
        disableAutoFocus
        keepMounted
        variant="temporary"
      >
        <Box m={2}>
          <Typography
            variant="h6"
            component="h2"
            style={{ marginBottom: theme.spacing(1) }}
          >
            Filters
          </Typography>
          {props.children}
        </Box>
      </Drawer>
    </>
  ) : (
    <Grid item lg={2}>
      {props.children}
    </Grid>
  );
}

MenuDrawer = ({ classes, open, onClose }: MenuDrawerProps) => {
  return (
    <Drawer
      anchor="left"
      open={open}
      onClose={onClose}
      classes={{ paper: classes.paper }}
    >
      <IconButton
        onClick={onClose}
        style={{
          alignSelf: "flex-end",
          marginRight: 5,
          marginTop: 5,
          color: "white",
        }}
      >
        <Clear />
      </IconButton>
      {menuRoutes.map(({ text, to, href, gaActionLabel }) => (
        <Button
          className={classes.menuDrawerButton}
          key={text}
          component={href ? ExternalLink : Link}
          target={href ? "_blank" : undefined}
          href={href || undefined}
          to={to || ""}
          onClick={() =>
            trackButtonClick(
              GaCategory.BUTTON_CLICK,
              GaAction.SIDE_MENU_BUTTON_CLICK,
              gaActionLabel
            )
          }
        >
          <Typography variant="h6">{text}</Typography>
        </Button>
      ))}
      <Box marginTop="auto" padding="25px">
        <Typography variant="subtitle1">
          {/* eslint-disable-next-line react/no-unescaped-entities */}
          Aqualink is open-source (MIT). Join us and contribute!
        </Typography>
        <ButtonGroup variant="contained" color="default">
          <Button
            target="_blank"
            href="https://github.com/aqualinkorg/aqualink-app"
            startIcon={<GitHub />}
            className={classes.contributeButton}
          >
            GitHub
          </Button>

          <Button
            target="_blank"
            href="https://ovio.org/project/aqualinkorg/aqualink-app"
            className={classes.contributeButton}
          >
            <img src={ovioLogo} alt="Ovio Logo" />
          </Button>
        </ButtonGroup>
      </Box>
    </Drawer>
  );
}

export default function NavDrawer({
  handleCreateTable,
  ...props
}: INavDrawerProps) {
  const classes = useStyles();
  const theme = useTheme();
  const isSm = useMediaQuery(theme.breakpoints.down("sm"));

  const { sections } = useFiretableContext();
  const { location } = useRouter();
  const { hash } = location;

  return (
    <Drawer
      open
      variant={isSm ? "temporary" : "persistent"}
      {...props}
      classes={{ paper: classes.paper }}
    >
      <Grid
        container
        spacing={1}
        wrap="nowrap"
        alignItems="center"
        className={classes.logoRow}
      >
        <Grid item>
          <IconButton
            aria-label="Close navigation drawer"
            onClick={props.onClose as any}
          >
            <CloseIcon />
          </IconButton>
        </Grid>

        <Grid item className={classes.logo}>
          <FiretableLogo />
        </Grid>
      </Grid>

      <nav className={classes.nav}>
        <List className={classes.list}>
          {sections &&
            Object.keys(sections).map((section) => (
              <li key={section}>
                <ListItem
                  button
                  component="a"
                  href={`#${section}`}
                  selected={
                    section === decodeURIComponent(hash.replace("#", ""))
                  }
                  classes={{
                    root: classes.listItem,
                    selected: classes.listItemSelected,
                  }}
                  onClick={isSm ? (props.onClose as any) : undefined}
                >
                  <ListItemText
                    primary={section}
                    classes={{ primary: classes.listItemText }}
                  />
                </ListItem>
              </li>
            ))}

          <li className={classes.createTable}>
            <ListItem
              button
              onClick={handleCreateTable}
              classes={{ root: classes.listItem }}
            >
              <ListItemIcon>
                <AddIcon />
              </ListItemIcon>
              <ListItemText
                primary="Create Table"
                classes={{ primary: classes.listItemText }}
              />
            </ListItem>
          </li>
        </List>
      </nav>
    </Drawer>
  );
}

TransactionListAmountRangeFilter: React.FC<TransactionListAmountRangeFilterProps> = ({
  filterAmountRange,
  amountRangeFilters,
  resetAmountRange,
}) => {
  const classes = useStyles();
  const theme = useTheme();
  const xsBreakpoint = useMediaQuery(theme.breakpoints.only("xs"));

  const initialAmountRange = [0, 100];
  const [amountRangeValue, setAmountRangeValue] = React.useState<number[]>(initialAmountRange);

  const [amountRangeAnchorEl, setAmountRangeAnchorEl] = React.useState<HTMLDivElement | null>(null);

  const handleAmountRangeClick = (event: React.MouseEvent<HTMLDivElement>) => {
    setAmountRangeAnchorEl(event.currentTarget);
  };

  const handleAmountRangeClose = () => {
    setAmountRangeAnchorEl(null);
  };

  const handleAmountRangeChange = (_event: any, amountRange: number | number[]) => {
    filterAmountRange({
      amountMin: padAmountWithZeros(first(amountRange as number[]) as number),
      amountMax: padAmountWithZeros(last(amountRange as number[]) as number),
    });
    setAmountRangeValue(amountRange as number[]);
  };

  const amountRangeOpen = Boolean(amountRangeAnchorEl);
  const amountRangeId = amountRangeOpen ? "amount-range-popover" : undefined;

  const AmountRangeFilter = () => (
    <Grid
      data-test="transaction-list-filter-amount-range"
      container
      direction="column"
      justify="flex-start"
      alignItems="flex-start"
      spacing={1}
      className={classes.amountRangeRoot}
    >
      <Grid item>
        <Grid
          container
          direction="row"
          justify="space-between"
          alignItems="center"
          className={classes.amountRangeTitleRow}
        >
          <Grid item className={classes.amountRangeTitle}>
            <Typography color="textSecondary" data-test="transaction-list-filter-amount-range-text">
              Amount Range: {formatAmountRangeValues(amountRangeValue)}
            </Typography>
          </Grid>
          <Grid item>
            <Button
              data-test="transaction-list-filter-amount-clear-button"
              onClick={() => {
                setAmountRangeValue(initialAmountRange);
                resetAmountRange();
              }}
            >
              Clear
            </Button>
          </Grid>
        </Grid>
      </Grid>
      <Grid item>
        <Slider
          data-test="transaction-list-filter-amount-range-slider"
          className={classes.amountRangeSlider}
          value={amountRangeValue}
          min={0}
          max={100}
          onChange={handleAmountRangeChange}
          valueLabelDisplay="auto"
          aria-labelledby="range-slider"
          getAriaValueText={amountRangeValueText}
          valueLabelFormat={amountRangeValueTextLabel}
        />
      </Grid>
    </Grid>
  );

  return (
    <div>
      <Chip
        color="primary"
        variant="outlined"
        onClick={handleAmountRangeClick}
        data-test="transaction-list-filter-amount-range-button"
        label={`Amount: ${formatAmountRangeValues(amountRangeValue)}`}
        deleteIcon={<ArrowDropDownIcon />}
        onDelete={handleAmountRangeClick}
      />
      {!xsBreakpoint && (
        <Popover
          id={amountRangeId}
          open={amountRangeOpen}
          anchorEl={amountRangeAnchorEl}
          onClose={handleAmountRangeClose}
          anchorOrigin={{
            vertical: "bottom",
            horizontal: "left",
          }}
          transformOrigin={{
            vertical: "top",
            horizontal: "left",
          }}
        >
          <AmountRangeFilter />
        </Popover>
      )}
      {xsBreakpoint && (
        <Drawer
          id={amountRangeId}
          open={amountRangeOpen}
          ModalProps={{ onClose: handleAmountRangeClose }}
          anchor="bottom"
          data-test="amount-range-filter-drawer"
        >
          <Button
            data-test="amount-range-filter-drawer-close"
            onClick={() => handleAmountRangeClose()}
          >
            Close
          </Button>
          <AmountRangeFilter />
        </Drawer>
      )}
    </div>
  );
}

export function AdrBrowserLayout({
  projectName,
  adrs,
  adrsReloading = false,
  currentAdr,
  children,
  routing = false,
  l4bVersion
}: AdrBrowserLayoutProps) {
  const classes = useStyles();
  const router = useRouter();

  const [mobileDrawerOpen, setMobileDrawerOpen] = React.useState(false);

  const handleMobileDrawerToggle = () => {
    setMobileDrawerOpen(!mobileDrawerOpen);
  };

  React.useEffect(() => {
    const closeMobileDrawer = () => setMobileDrawerOpen(false);
    router?.events.on("routeChangeStart", closeMobileDrawer);
    return () => {
      router?.events.off("routeChangeStart", closeMobileDrawer);
    };
  }, [router]);

  const [searchOpen, setSearchOpenState] = React.useState(false);
  const [searchReallyOpen, setSearchReallyOpenState] = React.useState(false);

  const drawer = (
    <div className={classes.drawerContainer}>
      <Toolbar className={classes.drawerToolbar}>
        <div />
        <Link href="/" passHref>
          <IconButton
            size="small"
            color="inherit"
            aria-label="go to homepage"
            title={`Architecture knowledge base of ${projectName}`}
          >
            <img
              src={`${router?.basePath}/l4b-static/Log4brains-logo.png`}
              alt="Log4brains logo"
              width={40}
              height={40}
            />
          </IconButton>
        </Link>
        <IconButton
          size="small"
          color="inherit"
          aria-label="close drawer"
          title="Close"
          onClick={handleMobileDrawerToggle}
        >
          <CloseIcon fontSize="small" />
        </IconButton>
      </Toolbar>

      <div className={classes.adlTitleAndSpinner}>
        <Typography variant="subtitle2" className={classes.adlTitle}>
          Decision log
        </Typography>

        <Fade in={adrsReloading}>
          <CircularProgress size={13} />
        </Fade>
      </div>

      <Grow in={adrs !== undefined} style={{ transformOrigin: "center left" }}>
        <AdrMenu
          adrs={adrs}
          currentAdrSlug={currentAdr?.slug}
          className={classes.adrMenu}
        />
      </Grow>

      {adrs === undefined && (
        <CircularProgress size={30} className={classes.adrMenuSpinner} />
      )}

      <List className={classes.bottomMenuList}>
        {/* <Divider />
      <ListItem button>
        <ListItemIcon>
          <ChevronRightIcon />
        </ListItemIcon>
        <ListItemText>
          <Badge badgeContent={0} color="primary">
            <Typography>Filters</Typography>
          </Badge>
        </ListItemText>
      </ListItem> */}
        {/* <Divider />
      <Link href="/decision-backlog" passHref>
        <ListItem button selected={backlog} component="a">
          <ListItemIcon>
            <PlaylistAddCheckIcon />
          </ListItemIcon>
          <ListItemText primary="Decision backlog" />
        </ListItem>
      </Link> */}
      </List>
    </div>
  );

  return (
    <div className={classes.root}>
      <AppBar position="fixed" className={classes.appBar}>
        {routing && <RoutingProgress />}
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            edge="start"
            onClick={handleMobileDrawerToggle}
            className={classes.appBarMenuButton}
          >
            <MenuIcon />
          </IconButton>
          <Link href="/">
            <div className={classes.appBarTitle}>
              <div>
                <img
                  src={`${router?.basePath}/l4b-static/Log4brains-logo-dark.png`}
                  alt="Log4brains logo"
                  width={50}
                  height={50}
                />
              </div>
              <div>
                <Link href="/" passHref>
                  <MuiLink
                    variant="h6"
                    noWrap
                    className={classes.appBarTitleLink}
                  >
                    {projectName}
                  </MuiLink>
                </Link>
                <Link href="/" passHref>
                  <MuiLink
                    variant="body2"
                    noWrap
                    className={classes.appBarTitleLink}
                  >
                    Architecture knowledge base
                  </MuiLink>
                </Link>
              </div>
            </div>
          </Link>
          <div className={classes.layoutLeftCol} />
          <div className={clsx(classes.layoutCenterCol)}>
            <Backdrop open={searchOpen} className={classes.searchBackdrop} />
            <NoSsr>
              <ConnectedSearchBox
                onOpen={() => {
                  setSearchOpenState(true);
                  // Delayed real opening because otherwise the dropdown width is bugged
                  setTimeout(
                    () => setSearchReallyOpenState(true),
                    searchTransitionDuration + 100
                  );
                }}
                onClose={() => {
                  setSearchOpenState(false);
                  setSearchReallyOpenState(false);
                }}
                open={searchReallyOpen}
                className={clsx(classes.searchBox, {
                  [classes.searchBoxOpen]: searchOpen
                })}
              />
            </NoSsr>
          </div>
          <div className={classes.layoutRightCol} />
        </Toolbar>
      </AppBar>

      <nav
        className={classes.drawer}
        aria-label="architecture decision records list"
      >
        <Hidden smUp implementation="css">
          <Drawer
            variant="temporary"
            anchor="left"
            open={mobileDrawerOpen}
            onClose={handleMobileDrawerToggle}
            classes={{
              paper: classes.drawerPaper
            }}
            ModalProps={{
              keepMounted: true // Better open performance on mobile.
            }}
          >
            {drawer}
          </Drawer>
        </Hidden>
        <Hidden xsDown implementation="css">
          <Drawer
            variant="permanent"
            open
            classes={{
              paper: classes.drawerPaper
            }}
          >
            {drawer}
          </Drawer>
        </Hidden>
      </nav>

      <div className={classes.container}>
        <Toolbar />
        <main className={classes.content}>
          <AdrNavContext.Provider
            value={currentAdr && adrs ? buildAdrNav(currentAdr, adrs) : {}}
          >
            {children}
          </AdrNavContext.Provider>
        </main>
        <footer className={classes.footer}>
          <div className={classes.layoutLeftCol} />
          <div className={clsx(classes.layoutCenterCol, classes.footerContent)}>
            <Typography className={classes.footerText}>
              Powered by{" "}
              <MuiLink
                href="https://github.com/thomvaill/log4brains"
                className={classes.footerLink}
                target="_blank"
                rel="noopener"
              >
                Log4brains
              </MuiLink>{" "}
              <span style={{ fontSize: "0.8em" }}>
                {l4bVersion ? `(v${l4bVersion})` : null}
              </span>
            </Typography>
          </div>
          <div className={classes.layoutRightCol} />
        </footer>
      </div>
    </div>
  );
}

TransactionListDateRangeFilter: React.FC<TransactionListDateRangeFilterProps> = ({
  filterDateRange,
  dateRangeFilters,
  resetDateRange,
}) => {
  const classes = useStyles();
  const theme = useTheme();
  const xsBreakpoint = useMediaQuery(theme.breakpoints.only("xs"));
  const queryHasDateFields = dateRangeFilters && hasDateQueryFields(dateRangeFilters);

  const [dateRangeAnchorEl, setDateRangeAnchorEl] = React.useState<HTMLDivElement | null>(null);

  const onCalendarSelect = (e: { eventType: number; start: any; end: any }) => {
    if (e.eventType === 3) {
      filterDateRange({
        dateRangeStart: new Date(e.start.setUTCHours(0, 0, 0, 0)).toISOString(),
        dateRangeEnd: new Date(e.end.setUTCHours(23, 59, 59, 999)).toISOString(),
      });
      setDateRangeAnchorEl(null);
    }
  };

  const handleDateRangeClick = (event: React.MouseEvent<HTMLDivElement>) => {
    setDateRangeAnchorEl(event.currentTarget);
  };

  const handleDateRangeClose = () => {
    setDateRangeAnchorEl(null);
  };

  const dateRangeOpen = Boolean(dateRangeAnchorEl);
  const dateRangeId = dateRangeOpen ? "date-range-popover" : undefined;

  const formatButtonDate = (date: string) => {
    return formatDate(new Date(date), "MMM, d yyyy");
  };

  const dateRangeLabel = (dateRangeFields: TransactionDateRangePayload) => {
    const { dateRangeStart, dateRangeEnd } = dateRangeFields;
    return `${formatButtonDate(dateRangeStart!)} - ${formatButtonDate(dateRangeEnd!)}`;
  };

  return (
    <div>
      {!queryHasDateFields && (
        <Chip
          color="primary"
          variant="outlined"
          onClick={handleDateRangeClick}
          data-test="transaction-list-filter-date-range-button"
          label={"Date: ALL"}
          deleteIcon={<ArrowDropDownIcon />}
          onDelete={handleDateRangeClick}
        />
      )}
      {queryHasDateFields && (
        <Chip
          color="primary"
          variant="outlined"
          onClick={handleDateRangeClick}
          label={`Date: ${dateRangeLabel(dateRangeFilters)}`}
          deleteIcon={<CancelIcon data-test="transaction-list-filter-date-clear-button" />}
          onDelete={() => {
            resetDateRange();
          }}
        />
      )}
      {!xsBreakpoint && (
        <Popover
          id={dateRangeId}
          open={dateRangeOpen}
          anchorEl={dateRangeAnchorEl}
          onClose={handleDateRangeClose}
          anchorOrigin={{
            vertical: "bottom",
            horizontal: "left",
          }}
          transformOrigin={{
            vertical: "top",
            horizontal: "left",
          }}
          className={classes.popover}
        >
          <InfiniteCalendar
            data-test="transaction-list-filter-date-range"
            width={xsBreakpoint ? window.innerWidth : 350}
            height={xsBreakpoint ? window.innerHeight : 300}
            rowHeight={50}
            Component={CalendarWithRange}
            selected={false}
            onSelect={onCalendarSelect}
            locale={{
              headerFormat: "MMM Do",
            }}
            theme={{
              accentColor: indigo["400"],
              headerColor: indigo["500"],
              weekdayColor: indigo["300"],
              selectionColor: indigo["300"],
              floatingNav: {
                background: indigo["400"],
                color: "#FFF",
                chevron: "#FFA726",
              },
            }}
          />
        </Popover>
      )}
      {xsBreakpoint && (
        <Drawer
          id={dateRangeId}
          open={dateRangeOpen}
          ModalProps={{ onClose: handleDateRangeClose }}
          anchor="bottom"
          data-test="date-range-filter-drawer"
        >
          <Button data-test="date-range-filter-drawer-close" onClick={() => handleDateRangeClose()}>
            Close
          </Button>
          <InfiniteCalendar
            data-test="transaction-list-filter-date-range"
            width={window.innerWidth}
            height={window.innerHeight - 185}
            rowHeight={50}
            Component={CalendarWithRange}
            selected={false}
            onSelect={onCalendarSelect}
            locale={{
              headerFormat: "MMM Do",
            }}
            theme={{
              accentColor: indigo["400"],
              headerColor: indigo["500"],
              weekdayColor: indigo["300"],
              selectionColor: indigo["300"],
              floatingNav: {
                background: indigo["400"],
                color: "#FFF",
                chevron: "#FFA726",
              },
            }}
          />
        </Drawer>
      )}
    </div>
  );
}

export default function SideDrawer() {
  const classes = useStyles();
  const { tableState, dataGridRef, sideDrawerRef } = useFiretableContext();

  const [cell, setCell] = useState<SelectedCell>(null);
  const [open, setOpen] = useState(false);
  if (sideDrawerRef) sideDrawerRef.current = { cell, setCell, open, setOpen };

  const disabled = !open && (!cell || _isNil(cell.row));
  useEffect(() => {
    if (disabled && setOpen) setOpen(false);
  }, [disabled]);

  const handleNavigate = (direction: "up" | "down") => () => {
    if (!tableState?.rows) return;

    let row = cell!.row;
    if (direction === "up" && row > 0) row -= 1;
    if (direction === "down" && row < tableState.rows.length - 1) row += 1;

    setCell!((cell) => ({ column: cell!.column, row }));

    const idx = tableState?.columns[cell!.column]?.index;
    dataGridRef?.current?.selectCell({ rowIdx: row, idx });
  };

  const [urlDocState, dispatchUrlDoc] = useDoc({});
  useEffect(() => {
    if (urlDocState.doc) setOpen(true);
  }, [urlDocState]);

  useEffect(() => {
    setOpen(false);
    dispatchUrlDoc({ path: "", doc: null });
  }, [window.location.pathname]);

  useEffect(() => {
    const rowRef = queryString.parse(window.location.search).rowRef as string;
    if (rowRef) dispatchUrlDoc({ path: decodeURIComponent(rowRef) });
  }, []);

  useEffect(() => {
    if (cell && tableState?.rows[cell.row]) {
      window.history.pushState(
        "",
        `${tableState?.tablePath}`,
        `${window.location.pathname}?rowRef=${encodeURIComponent(
          tableState?.rows[cell.row].ref.path
        )}`
      );
      // console.log(tableState?.tablePath, tableState?.rows[cell.row].id);
      if (urlDocState.doc) {
        urlDocState.unsubscribe();
        dispatchUrlDoc({ path: "", doc: null });
      }
    }
  }, [cell]);

  return (
    <div className={clsx(open && classes.open, disabled && classes.disabled)}>
      <Drawer
        variant="permanent"
        anchor="right"
        className={classes.drawer}
        classes={{
          paperAnchorDockedRight: clsx(
            classes.paper,
            !disabled && classes.bumpPaper
          ),
          paper: clsx({ [classes.paperClose]: !open }),
        }}
      >
        <ErrorBoundary>
          <div className={classes.drawerContents}>
            {open &&
              (urlDocState.doc || cell) &&
              !_isEmpty(tableState?.columns) && (
                <Form
                  key={urlDocState.path}
                  values={
                    urlDocState.doc ?? tableState?.rows[cell?.row ?? -1] ?? {}
                  }
                />
              )}
          </div>
        </ErrorBoundary>

        {open && (
          <div className={classes.navFabContainer}>
            <Fab
              classes={{
                root: clsx(classes.fab, classes.navFab),
                disabled: classes.disabled,
              }}
              style={{ animationDelay: "0.2s" }}
              color="secondary"
              size="small"
              disabled={disabled || !cell || cell.row <= 0}
              onClick={handleNavigate("up")}
            >
              <ChevronUpIcon />
            </Fab>

            <Fab
              classes={{
                root: clsx(classes.fab, classes.navFab),
                disabled: classes.disabled,
              }}
              style={{ animationDelay: "0.1s" }}
              color="secondary"
              size="small"
              disabled={
                disabled ||
                !tableState ||
                !cell ||
                cell.row >= tableState.rows.length - 1
              }
              onClick={handleNavigate("down")}
            >
              <ChevronDownIcon />
            </Fab>
          </div>
        )}

        <div className={classes.drawerFabContainer}>
          <Fab
            classes={{ root: classes.fab, disabled: classes.disabled }}
            color="secondary"
            disabled={disabled}
            onClick={() => {
              if (setOpen) setOpen((o) => !o);
            }}
          >
            <ChevronIcon className={classes.drawerFabIcon} />
          </Fab>
        </div>
      </Drawer>
    </div>
  );
}

NeoDrawer = ({ open, hidden, connection, dashboardSettings, updateDashboardSetting,
    handleDrawerClose, onAboutModalOpen, resetApplication }) => {

    // Override to hide the drawer when the application is in standalone mode.
    if (hidden) {
        return <></>;
    }

    const content = (
        <Drawer
            variant="permanent"
            style={
                (open) ? {
                    position: 'relative',
                    overflowX: 'hidden',
                    width: '240px',
                    transition: "width 125ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
                    boxShadow: "2px 1px 10px 0px rgb(0 0 0 / 12%)",

                } : {
                    position: 'relative',
                    overflowX: 'hidden',
                    boxShadow: " 2px 1px 10px 0px rgb(0 0 0 / 12%)",

                    transition: "width 125ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
                    width: "56px"
                }
            }
            open={open == true}
        >
            <div style={{
                display: 'flex',
                alignItems: 'center',
                overflowX: 'hidden',
                justifyContent: 'flex-end',
                padding: '0 8px',
                minHeight: '64px',

            }}>
                <ListItem>
                    <Button
                        component="label"
                        onClick={resetApplication}
                        style={{ backgroundColor: "white", marginLeft: "-8px" }}
                        color="default"
                        variant="outlined"
                        size="small"
                        startIcon={<ExitToAppIcon />}>Menu
                    </Button>
                </ListItem>


                <IconButton onClick={handleDrawerClose}>
                    <ChevronLeftIcon />
                </IconButton>
            </div>
            <Divider />
            <div >
                <ListItem style={{ background: "white", height: "47px" }} >
                    <ListItemIcon>
                    </ListItemIcon>
                    <ListItemText primary="" />
                </ListItem>
            </div>
            <Divider />
            <List>
                <div>
                    <NeoSettingsModal dashboardSettings={dashboardSettings} updateDashboardSetting={updateDashboardSetting}></NeoSettingsModal>
                    <NeoSaveModal></NeoSaveModal>
                    <NeoLoadModal></NeoLoadModal>
                    <NeoShareModal></NeoShareModal>
                </div>
            </List>
            <Divider />
            <List>
                <ListItem button onClick={(e) => window.open("https://github.com/neo4j-labs/neodash/wiki/User-Guide", "_blank")}>
                    <ListItemIcon>
                        <LibraryBooksIcon />
                    </ListItemIcon>
                    <ListItemText primary="Documentation" />
                </ListItem>
                <NeoReportExamplesModal database={connection.database}></NeoReportExamplesModal>
                <ListItem button onClick={onAboutModalOpen}>
                    <ListItemIcon>
                        <InfoOutlinedIcon />
                    </ListItemIcon>
                    <ListItemText primary="About" />
                </ListItem>
            </List>
            <Divider />
        </Drawer>

    );
    return content;
}