@mui/material#AppBar TypeScript Examples

export function Header() {
	return (
		<AppBar position={"static"}>
			<Container maxWidth={"xl"} disableGutters>
			<Toolbar>
					<Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
						Rarible SDK Example
					</Typography>
					<ConnectionStatus/>
			</Toolbar>
			</Container>
		</AppBar>
	)
}

function Header({ actions, navigation }: HeaderProps) {
  return (
    <AppBar
      position="static"
      color="default"
      elevation={0}
      sx={{ zIndex: 2, borderBottom: 1, borderColor: 'divider' }}
    >
      <Toolbar>
        <IconButton
          edge="start"
          color="inherit"
          aria-label="Home"
          sx={{ mr: 2 }}
          component="a"
          href={`/`}
        >
          <MenuIcon />
        </IconButton>
        <Typography
          data-test-id="brand"
          variant="h6"
          color="inherit"
          component="div"
          sx={{ mr: 2 }}
        >
          MUI Toolpad {process.env.TOOLPAD_TARGET}
        </Typography>
        {navigation}
        <Box flex={1} />
        {actions}
      </Toolbar>
    </AppBar>
  );
}

AppBarComponent: React.FunctionComponent = () => {
  return (
    <AppBar position="static">
      <Toolbar variant="dense" className={classes.root}>
        <img className={classes.logo} src={logo} />
      </Toolbar>
    </AppBar>
  );
}

Header: React.FC = () => {
    const [colorMode, setColorMode] = useRecoilState(GlobalState.theme)
    const {setVisible} = useVisibility()

    const handleExit = async () => {
        try {
            await fetchNui("exit")
            setVisible(false);
        } catch (e) {
            console.error(e)
        }
    }

    const handleThemeswitch = () => {
        colorMode === "light" ? setColorMode("dark") : setColorMode("light")
    }

    return (
        <AppBar position="sticky">
            <Toolbar sx={{backgroundColor: "primary.dark"}}>
                <Typography sx={{flex: 1}}>
                    <img src={logo} height="100px" alt=""/>
                </Typography>

                <CategorySelect/>
                <IconButton sx={{ml: 1}} onClick={handleThemeswitch} color="inherit">
                    {colorMode === 'dark' ? <Brightness7Icon/> : <Brightness4Icon/>}
                </IconButton>
                <IconButton sx={{ml: 1}} onClick={handleExit} color="inherit">
                    <CloseIcon/>
                </IconButton>
            </Toolbar>
        </AppBar>
    )
}

function FooterContent() {
  const { t } = useTranslation("ui")
  return <AppBar position="static" sx={{ bgcolor: "#343a40" }} elevation={0}>
    <Box display="flex" justifyContent="space-between" sx={{ px: 2, py: 1 }} gap={2}>
      <Typography variant="caption" sx={{ color: grey[200] }}>
        <Trans t={t} i18nKey="ui:rightsDisclaimer">Genshin Optimizer is not affiliated with or endorsed by hoYoVerse.</Trans>
      </Typography>
      <Typography variant="caption" sx={{ color: grey[200], textAlign: "right" }} >
        <Trans t={t} i18nKey="ui:appVersion" values={{ version: packageInfo.version }}>Genshin Optimizer Version: <code>{{ version: packageInfo.version }}</code></Trans>
      </Typography>
    </Box>
  </AppBar >
}

/**
 * 페이지 로딩 애니메이션입니다.
 */
export function PageLoadingView() {
  const classes = usePageLoadingViewStyles();

  return (
    <AppBar
      position="fixed"
      color="transparent"
      elevation={0}
      className={classes.appbar}>
      <LinearProgress color="secondary" />
    </AppBar>
  );
}

StyledAppBar = styled(AppBar)<{
  rootPageHasAnimation?: boolean;
  scrollPos: number;
}>`
  background: ${({ scrollPos, theme }) =>
    scrollPos > 10 ? theme.background.backgroundColorLight : "unset"};
  box-shadow: ${({ scrollPos }) =>
    scrollPos > 10
      ? "0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%)"
      : "unset"};

  transition: background ease-in-out 0.15s;

  ${({ rootPageHasAnimation }) =>
    rootPageHasAnimation
      ? css`
          opacity: 0;
          animation: ${WrapperKeyframes} 1s cubic-bezier(0.66, 0, 0.2, 1) 0.183s
            forwards;
          animation-delay: 2s;
        `
      : css`
          opacity: 1;
        `}
`

function MobileHeader({ anchor, currentTab }) {
  const [mobileOpen, setMobileOpen] = useState(false);

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


  const { t } = useTranslation("ui")
  return <>
    <AppBar position="fixed" sx={{ bgcolor: "#343a40" }} elevation={0}  >
      <Drawer
        anchor="right"
        variant="temporary"
        open={mobileOpen}
        onClose={handleDrawerToggle}
        ModalProps={{
          keepMounted: true, // Better open performance on mobile.
        }}
      >
        <List>
          <ListItemButton key="home" component={RouterLink} to={'/'} selected={currentTab === ""} disabled={currentTab === ""} onClick={handleDrawerToggle} >
            <ListItemText>{t("pageTitle")}</ListItemText>
          </ListItemButton >
          {content.map(({ i18Key, value, to, svg }) =>
            <ListItemButton key={value} component={RouterLink} to={to} selected={currentTab === value} disabled={currentTab === value} onClick={handleDrawerToggle} >
              <ListItemIcon><FontAwesomeIcon icon={svg} /></ListItemIcon>
              <ListItemText>{t(i18Key)}</ListItemText>
            </ListItemButton >)}
        </List>
        <Divider />
        <List>
          {links.map(({ i18Key, href, svg, label }) =>
            <ListItemButton key={label} component="a" href={href} target="_blank" onClick={e => ReactGA.outboundLink({ label }, () => { })} >
              <ListItemIcon><FontAwesomeIcon icon={svg} /></ListItemIcon>
              <ListItemText>{t(i18Key)}</ListItemText>
            </ListItemButton >)}
        </List>
      </Drawer>
      <Toolbar>
        <Button variant="text" sx={{ color: "white" }} component={RouterLink} to="/">
          <Typography variant="h6" noWrap component="div">
            <Trans t={t} i18nKey="pageTitle">Genshin Optimizer</Trans>
          </Typography>
        </Button>
        <Box flexGrow={1} />
        <IconButton
          color="inherit"
          aria-label="open drawer"
          edge="end"
          onClick={handleDrawerToggle}
        >
          <MenuIcon />
        </IconButton>
      </Toolbar>
    </AppBar>
    {/* add a blank toolbar to keep space and provide a scroll anchor */}
    <Toolbar id={anchor} />
  </>
}

function HeaderContent({ anchor }) {
  const theme = useTheme();
  const isLarge = useMediaQuery(theme.breakpoints.up('lg'));
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));

  const { t } = useTranslation("ui")

  const { params: { currentTab } } = useMatch({ path: "/:currentTab", end: false }) ?? { params: { currentTab: "" } };
  if (isMobile) return <MobileHeader anchor={anchor} currentTab={currentTab} />
  return <AppBar position="static" sx={{ bgcolor: "#343a40", display: "flex", flexWrap: "nowrap" }} elevation={0} id={anchor} >
    <Tabs
      value={currentTab}
      variant="scrollable"
      scrollButtons="auto"

      sx={{
        "& .MuiTab-root": {
          px: 1,
          flexDirection: "row",
          minWidth: 40,
          minHeight: "auto",
        },
        "& .MuiTab-root:hover": {
          transition: "background-color 0.5s ease",
          backgroundColor: "rgba(255,255,255,0.1)"
        },
        "& .MuiTab-root > .MuiTab-iconWrapper": {
          mb: 0,
          mr: 0.5
        },
      }}
    >
      <Tab value="" component={RouterLink} to="/" label={<Typography variant="h6" sx={{ px: 1 }}>
        <Trans t={t} i18nKey="pageTitle">Genshin Optimizer</Trans>
      </Typography>} />
      {content.map(({ i18Key, value, to, svg }) => <Tab key={value} value={value} component={RouterLink} to={to} icon={<FontAwesomeIcon icon={svg} />} label={t(i18Key)} />)}
      <Box flexGrow={1} />
      {links.map(({ i18Key, href, label, svg }) => <Tab key={label} component="a" href={href} target="_blank" icon={<FontAwesomeIcon icon={svg} />} onClick={e => ReactGA.outboundLink({ label }, () => { })} label={isLarge && t(i18Key)} />)}
    </Tabs>
  </AppBar>
}

export default function Header(props: HeaderProps) {
  const [drawer, setDrawer] = useState(false);

  const theme = useTheme();
  const _isNotMobile = useMediaQuery(theme.breakpoints.up("sm"));

  const toggleDrawer = () => () => {
    setDrawer(!drawer);
  };

  return (
    <AppBar
      position="sticky"
      elevation={0}
      style={{
        backgroundColor: theme.palette.primary.main,
      }}
    >
      <Toolbar>
        <Container maxWidth="lg">
          <Grid
            container
            direction="row"
            justifyContent="center"
            alignItems="center"
          >
            <Box sx={{ flexGrow: _isNotMobile ? 0 : 1 }}>
              <Button href="/" variant="text" color="inherit">
                <img
                  src="/favicon.svg"
                  alt="Flutter UI Templates Logo"
                  style={{
                    height: "2.5rem",
                    width: "2.5rem",
                    paddingRight: "0.5rem",
                  }}
                />
                {_isNotMobile && (
                  <Grid container>
                    <Typography
                      style={{
                        color: theme.palette.secondary.main,
                        textTransform: "capitalize",
                        maxLines: 1,
                        fontSize: "1.3rem",
                        fontWeight: "bold",
                        marginLeft: "4px",
                      }}
                    >
                      Flutter
                    </Typography>

                    <Typography
                      style={{
                        textTransform: "capitalize",
                        maxLines: 1,
                        fontSize: "1.3rem",
                        fontWeight: "bold",
                        marginLeft: "4px",
                      }}
                    >
                      Templates
                    </Typography>
                  </Grid>
                )}
              </Button>
            </Box>

            {_isNotMobile && (
              <Box sx={{ flexGrow: 1 }}>
                <Grid
                  container
                  direction="row"
                  justifyContent="flex-end"
                  alignItems="center"
                >
                  {commonNav.map((item, index) => (
                    <Grid item key={`nav_${index}`}>
                      {item}
                    </Grid>
                  ))}
                </Grid>
              </Box>
            )}

            <Grid item>
              <IconButton
                aria-label="Theme Toggle Button"
                onClick={props.onThemeChange}
              >
                {props.isDarkMode ? (
                  <Brightness7Rounded />
                ) : (
                  <NightsStayRounded />
                )}
              </IconButton>
            </Grid>

            {!_isNotMobile && (
              <Grid item>{displayMobile(drawer, toggleDrawer())}</Grid>
            )}
          </Grid>
        </Container>
      </Toolbar>
    </AppBar>
    // </div>
  );
}

export default function AppNavBar({ navMenuToggle }: AppBarDeckProps) {
  const { locale } = useRouter()
  const { status } = useSession()
  const shrink = useScrollTrigger()
  return (
    <AppBar
      position="fixed"
      className={clsx({ shrink })}
      sx={(theme) => ({
        overflow: 'hidden',
        transition: 'height .5s, background-color .5s ease 0s',
        height: theme.spacing(14),
        lineHeight: theme.spacing(14),
        [theme.breakpoints.down('md')]: {
          height: theme.spacing(10),
        },
        '&.shrink': {
          height: theme.spacing(10),
          lineHeight: theme.spacing(10),
          backgroundColor: 'hsla(0,0%,100%,0.85)',
          backdropFilter: 'saturate(180%) blur(5px)',
        },
        backgroundColor: theme.palette.common.white,
      })}>
      <Toolbar
        sx={{
          height: '100%',
          display: 'flex',
          justifyContent: 'space-between',
        }}>
        <Link href={routes.index} passHref>
          <ButtonBase
            component="a"
            className={clsx({ shrink })}
            sx={(theme) => ({
              transition: 'height .5s',
              height: theme.spacing(7.5),
              minWidth: theme.spacing(15),
              marginLeft: theme.spacing(5),
              [theme.breakpoints.up('lg')]: {
                marginLeft: theme.spacing(10),
              },
              [theme.breakpoints.down('md')]: {
                marginLeft: 0,
                width: '100%',
                height: '50%',
              },
              '&.shrink': {
                height: '50%',
              },
              '& > svg': {
                display: 'block',
                height: '100%',
              },
            })}>
            <PodkrepiLogo locale={locale} variant="adaptive" />
          </ButtonBase>
        </Link>
        <Hidden mdDown>
          <Grid
            container
            wrap="nowrap"
            direction="row"
            justifyContent="flex-end"
            sx={(theme) => ({
              marginLeft: theme.spacing(2),
              marginRight: theme.spacing(5),
              [theme.breakpoints.up('lg')]: {
                marginRight: theme.spacing(10),
              },
            })}>
            <Grid item>
              <MainNavMenu>
                {status === 'authenticated' ? <PrivateMenu /> : <PublicMenu />}
                <Grid item>
                  <LocaleButton />
                </Grid>
              </MainNavMenu>
            </Grid>
          </Grid>
        </Hidden>
        <Hidden mdUp>
          <IconButton
            size="small"
            edge="end"
            onClick={navMenuToggle}
            aria-labelledby="navigation menu">
            <Menu fontSize="large" />
          </IconButton>
        </Hidden>
      </Toolbar>
    </AppBar>
  )
}

App: React.FC<{ darkMode: boolean, setDarkMode: (a: boolean) => void }> = React.memo(({ darkMode, setDarkMode }) => {
  const loc = useLocation()
  const his = useHistory()
  const pluginRef = useRef<Plugin | null>(null)
  const [mobileOpen, setMobileOpen] = useState(false)
  const [globalItemsOpen, setGlobalItemsOpen] = useState(false)
  const [globalData, setGlobalData] = useState<GlobalInfo>({ } as any)
  const [drawerWidth, setDrawerWidth] = useState(240)
  const updateF = useState(0)[1]
  const create = useMemo(() => {
    const io = socketIO(origin!, { path: pathname!, auth: { token } })
    const map: Record<string, Plugin> = { }
    const fn = (window as any).__NekoMaidAPICreate = (name: string) => map[name] || (map[name] = new Plugin(io, name))
    const nekoMaid = pluginRef.current = fn('NekoMaid')
    io.on('globalData', (data: GlobalInfo) => {
      const his: ServerRecord[] = JSON.parse(localStorage.getItem('NekoMaid:servers') || '[]')
      const curAddress = address!.replace('http://', '') + '?' + token
      let cur = his.find(it => it.address === curAddress)
      if (!cur) his.push((cur = { address: curAddress, time: 0 }))
      cur.time = Date.now()
      cur.icon = data.icon
      const arr = loc.pathname.split('/')
      if (!sent && arr.length > 2) io.emit('switchPage', arr[1], arr[2])
      sent = true
      localStorage.setItem('NekoMaid:servers', JSON.stringify(his))
      new Set(Object.values(data.plugins).flat()).forEach(loadPlugin)
      setGlobalData(data)
      pages = { }
      initPages(nekoMaid)
      onGlobalDataReceived(nekoMaid, data)
      update(Math.random())
      if (process.env.NODE_ENV !== 'development' && data.pluginVersion !== version) toast(lang.pluginUpdate, 'warning')
    }).on('!', () => {
      io.close()
      dialog({ content: lang.wrongToken, cancelButton: false })
        // eslint-disable-next-line no-return-assign
        .then(() => (location.search = location.pathname = location.hash = ''))
    }).on('reconnect', () => {
      toast(lang.reconnect)
      setTimeout(() => location.reload(), 5000)
    }).on('disconnect', () => failed(lang.disconnected)).on('connect_error', () => failed(lang.failedToConnect))
    return fn
  }, [])
  useEffect(() => { if (!loc.pathname || loc.pathname === '/') his.replace('/NekoMaid/dashboard') }, [loc.pathname])
  useEffect(() => {
    update = updateF
    return () => { update = undefined as any }
  }, [])

  const handleDrawerToggle = () => {
    setDrawerWidth(240)
    setMobileOpen(!mobileOpen)
  }

  const isExpand = drawerWidth === 240

  const routes: JSX.Element[] = []
  const mapToItem = (name: string, it: Page) => {
    const path = Array.isArray(it.path) ? it.path[0] : it.path
    const key = '/' + name + '/' + path
    routes.push(<pluginCtx.Provider key={key} value={create(name)}>
      <Route
        path={Array.isArray(it.path) ? it.path.map(it => '/' + name + '/' + it) : key}
        component={it.component}
        strict={it.strict}
        exact={it.exact}
        sensitive={it.sensitive}
      />
    </pluginCtx.Provider>)
    const icon = <ListItemIcon><pluginCtx.Provider value={create(name)}>
      {(typeof it.icon === 'function' ? <it.icon /> : it.icon) || <Build />}
    </pluginCtx.Provider></ListItemIcon>
    return it.title
      ? <NavLink key={key} to={'/' + name + '/' + (it.url || path)} activeClassName='actived'>
        <ListItem button>
          {isExpand ? icon : <Tooltip title={it.title} placement='right'>{icon}</Tooltip>}
          {isExpand && <ListItemText primary={it.title} />}
        </ListItem>
      </NavLink>
      : undefined
  }

  const singlePages: JSX.Element[] = []
  const multiPagesPages: Array<JSX.Element | JSX.Element[]> = []
  let index = 0
  for (const name in pages) {
    if (pages[name].length === 1) {
      const elm = mapToItem(name, pages[name][0])
      if (elm) singlePages.push(elm)
    } else {
      if (multiPagesPages.length) multiPagesPages.push(<Divider key={index++} />)
      multiPagesPages.push(pages[name].map(it => mapToItem(name, it)!).filter(Boolean))
    }
  }
  if (singlePages.length) multiPagesPages.push(<Divider key={index++} />, singlePages)

  const drawer = <Box sx={{ overflowX: 'hidden' }}>
    <Toolbar />
    <Divider sx={{ display: { sm: 'none', xs: 'block' } }} />
    <List sx={{
      '& a': {
        color: 'inherit',
        textDecoration: 'inherit'
      },
      '& .actived > div': {
        fontWeight: 'bold',
        color: theme => theme.palette.primary.main,
        backgroundColor: theme => alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity) + '!important',
        '& svg': { color: theme => theme.palette.primary.main + '!important' }
      }
    }}>{multiPagesPages.flat()}</List>
  </Box>

  return <Box sx={{ display: 'flex' }}>
    <CssBaseline />
    <AppBar position='fixed' sx={{ zIndex: theme => theme.zIndex.drawer + 1 }}>
      <Toolbar>
        <IconButton
          color='inherit'
          edge='start'
          onClick={() => setDrawerWidth(isExpand ? 57 : 240)}
          sx={{ mr: 1, display: { sm: 'inline-flex', xs: 'none' } }}
        ><ChevronLeft sx={{ transition: '.3s', transform: isExpand ? undefined : 'rotate(-180deg)' }} /></IconButton>
        <IconButton color='inherit' edge='start' onClick={handleDrawerToggle} sx={{ mr: 2, display: { sm: 'none' } }}><Menu /></IconButton>
        <Typography variant='h3' noWrap component='div' sx={{ flexGrow: 1 }}>NekoMaid</Typography>
        {globalData.hasNBTAPI && <IconButton
          color='inherit'
          onClick={() => setGlobalItemsOpen(!globalItemsOpen)}
          onDragOver={() => setGlobalItemsOpen(true)}
        ><Backpack /></IconButton>}
        <LanguageSwitch />
        <IconButton color='inherit' edge='end' onClick={() => setDarkMode(!darkMode)}>
          {darkMode ? <Brightness7 /> : <Brightness4 />}
        </IconButton>
      </Toolbar>
    </AppBar>
    <globalCtx.Provider value={globalData}>
      <Box component='nav' sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}>
        <Drawer
          variant='temporary'
          open={mobileOpen}
          onClose={handleDrawerToggle}
          ModalProps={{ keepMounted: true }}
          sx={{
            display: { xs: 'block', sm: 'none' },
            '& .MuiDrawer-paper': {
              boxSizing: 'border-box',
              width: drawerWidth,
              backgroundImage: theme => theme.palette.mode === 'dark'
                ? 'linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))'
                : undefined
            }
          }}
        >
          {drawer}
        </Drawer>
        <Drawer
          open
          variant='permanent'
          sx={{
            display: { xs: 'none', sm: 'block' },
            '& .MuiDrawer-paper': {
              boxSizing: 'border-box',
              width: drawerWidth,
              transition: 'width .3s',
              backgroundImage: theme => theme.palette.mode === 'dark' ? 'linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))' : undefined
            }
          }}
        >
          {drawer}
        </Drawer>
      </Box>
      <Box component='main' sx={{ flexGrow: 1, width: '100vw' }}>
        <drawerWidthCtx.Provider value={drawerWidth}>{routes}</drawerWidthCtx.Provider>
        {globalData.hasNBTAPI && <pluginCtx.Provider value={pluginRef.current}>
          <GlobalItems open={globalItemsOpen} onClose={() => setGlobalItemsOpen(false)} />
        </pluginCtx.Provider>}
      </Box>
    </globalCtx.Provider>
  </Box>
})

export function FireCMSAppBar({
                                  title,
                                  handleDrawerToggle,
                                  toolbarExtraWidget
                              }: CMSAppBarProps) {

    const classes = useStyles();

    const breadcrumbsContext = useBreadcrumbsContext();
    const { breadcrumbs } = breadcrumbsContext;

    const authController = useAuthController();
    const { mode, toggleMode } = useModeState();

    const initial = authController.user?.displayName
        ? authController.user.displayName[0].toUpperCase()
        : (authController.user?.email ? authController.user.email[0].toUpperCase() : "A");

    return (
        <Slide
            direction="down" in={true} mountOnEnter unmountOnExit>
            <AppBar
                className={classes.appbar}
                position={"relative"}
                elevation={1}>
                <Toolbar>
                    <IconButton
                        color="inherit"
                        aria-label="Open drawer"
                        edge="start"
                        onClick={handleDrawerToggle}
                        className={classes.menuButton}
                        size="large">
                        <MenuIcon/>
                    </IconButton>

                    <Hidden lgDown>
                        <Box mr={3}>
                            <Link
                                underline={"none"}
                                key={"breadcrumb-home"}
                                color="inherit"
                                component={ReactLink}
                                to={"/"}>
                                <Typography variant="h6" noWrap>
                                    {title}
                                </Typography>
                            </Link>
                        </Box>
                    </Hidden>

                    <Box mr={2}>
                        <Breadcrumbs
                            separator={<NavigateNextIcon
                                htmlColor={"rgb(0,0,0,0.87)"}
                                fontSize="small"/>}
                            aria-label="breadcrumb">
                            {breadcrumbs.map((entry, index) => (
                                <Link
                                    underline={"none"}
                                    key={`breadcrumb-${index}`}
                                    color="inherit"
                                    component={ReactLink}
                                    to={entry.url}>
                                    <Chip
                                        classes={{ root: classes.breadcrumb }}
                                        label={entry.title}
                                    />
                                </Link>)
                            )
                            }
                        </Breadcrumbs>
                    </Box>

                    <Box flexGrow={1}/>

                    {toolbarExtraWidget &&
                    <ErrorBoundary>
                        {
                            toolbarExtraWidget
                        }
                    </ErrorBoundary>}


                    <Box p={1} mr={1}>
                        <IconButton
                            color="inherit"
                            aria-label="Open drawer"
                            edge="start"
                            onClick={() => toggleMode()}
                            size="large">
                            {mode === "dark"
                                ? <Brightness3Icon/>
                                : <Brightness5Icon/>}
                        </IconButton>
                    </Box>

                    <Box p={1} mr={1}>
                        {authController.user && authController.user.photoURL
                            ? <Avatar
                                src={authController.user.photoURL}/>
                            : <Avatar>{initial}</Avatar>
                        }
                    </Box>

                    <Button variant="text"
                            color="inherit"
                            onClick={authController.signOut}>
                        Log Out
                    </Button>

                </Toolbar>
            </AppBar>
        </Slide>
    );
}

export default function Footer() {
  return (
    <div>
      <AppBar
        position="static"
        color="primary"
        elevation={0}
        style={{
          padding: "2.5rem",
          width: "100%",
        }}
      >
        <Grid
          container
          spacing={8}
          direction="row"
          justifyContent="center"
          alignItems="center"
        >
          <Grid item>
            <Grid
              container
              direction="column"
              justifyContent="center"
              alignItems="center"
            >
              <Grid item>
                <Typography
                  style={{
                    fontSize: "1rem",
                    fontWeight: "bold",
                  }}
                >
                  Support Us
                </Typography>
              </Grid>

              <Grid item>
                <a
                  href={BUY_ME_A_COFFEE_LINK}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <img
                    src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png"
                    alt="Buy Me A Coffee"
                    style={{
                      marginTop: "1rem",
                      height: "60px !important",
                      width: "217px !important",
                    }}
                  />
                </a>
              </Grid>
            </Grid>
          </Grid>
          <Grid item>
            <Grid
              container
              direction="column"
              justifyContent="center"
              alignItems="center"
            >
              <Grid item>
                <Typography
                  style={{
                    fontSize: "1rem",
                    fontWeight: "bold",
                  }}
                >
                  Contact
                </Typography>
              </Grid>

              <Grid item>
                <div>
                  <IconButton
                    href="mailto:[email protected]"
                    target="_blank"
                    referrerPolicy="no-referrer"
                  >
                    <MailOutlineRounded />
                  </IconButton>

                  <IconButton
                    href="https://twitter.com/bimsina"
                    target="_blank"
                    referrerPolicy="no-referrer"
                  >
                    <Twitter />
                  </IconButton>

                  <IconButton
                    href="https://www.linkedin.com/in/bimsina/"
                    target="_blank"
                    referrerPolicy="no-referrer"
                  >
                    <LinkedIn />
                  </IconButton>
                </div>
              </Grid>
            </Grid>
          </Grid>
        </Grid>

        <Typography
          style={{
            display: "flex",
            justifyContent: "center",
            marginTop: "1rem",
          }}
        >
          Made by
          <a
            href="https://twitter.com/bimsina"
            target="_blank"
            rel="noopener noreferrer"
            style={{
              margin: "0 0.25rem",
            }}
          >
            Bibek Timsina
          </a>
          and
          <a
            href="https://github.com/bimsina/fluttertemplates.dev/graphs/contributors"
            target="_blank"
            rel="noopener noreferrer"
            style={{ marginLeft: "0.25rem" }}
          >
            contributors
          </a>
        </Typography>
      </AppBar>
    </div>
  );
}

export default function Layout({ group = null, children, ...props }) {
    const authenticated = useRecoilValue(isAuthenticated);
    const [anchorEl, setAnchorEl] = useState(null);
    const theme: Theme = useTheme();
    const dotsMenuOpen = Boolean(anchorEl);
    const cfg = useRecoilValue(config);
    const location = useLocation();

    const [mobileOpen, setMobileOpen] = useState(true);

    const { window } = props;

    const handleProfileMenuOpen = (event) => {
        setAnchorEl(event.currentTarget);
    };

    const handleDotsMenuClose = (event) => {
        setAnchorEl(null);
    };

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

    const drawer = (
        <div style={{ height: "100%" }}>
            <Toolbar />
            <Divider />
            {group != null && (
                <List sx={{ pb: 0 }}>
                    <ListItemLink
                        to={`/groups/${group.id}/`}
                        selected={
                            location.pathname === `/groups/${group.id}/` || location.pathname === `/groups/${group.id}`
                        }
                    >
                        <ListItemIcon>
                            <Paid />
                        </ListItemIcon>
                        <ListItemText primary="Transactions" />
                    </ListItemLink>
                    <ListItemLink
                        to={`/groups/${group.id}/balances`}
                        selected={location.pathname.startsWith(`/groups/${group.id}/balances`)}
                    >
                        <ListItemIcon>
                            <BarChart />
                        </ListItemIcon>
                        <ListItemText primary="Balances" />
                    </ListItemLink>
                    <ListItemLink
                        to={`/groups/${group.id}/accounts`}
                        selected={location.pathname.startsWith(`/groups/${group.id}/accounts`)}
                    >
                        <ListItemIcon>
                            <AccountBalance />
                        </ListItemIcon>
                        <ListItemText primary="Accounts" />
                    </ListItemLink>
                    <ListItemLink
                        to={`/groups/${group.id}/detail`}
                        selected={location.pathname.startsWith(`/groups/${group.id}/detail`)}
                    >
                        <ListItemIcon>
                            <AdminPanelSettings />
                        </ListItemIcon>
                        <ListItemText primary="Group Settings" />
                    </ListItemLink>
                    <ListItemLink
                        to={`/groups/${group.id}/members`}
                        selected={location.pathname.startsWith(`/groups/${group.id}/members`)}
                    >
                        <ListItemIcon>
                            <People />
                        </ListItemIcon>
                        <ListItemText primary="Group Members" />
                    </ListItemLink>
                    <ListItemLink
                        to={`/groups/${group.id}/invites`}
                        selected={location.pathname.startsWith(`/groups/${group.id}/invites`)}
                    >
                        <ListItemIcon>
                            <Mail />
                        </ListItemIcon>
                        <ListItemText primary="Group Invites" />
                    </ListItemLink>
                    <ListItemLink
                        to={`/groups/${group.id}/log`}
                        selected={location.pathname.startsWith(`/groups/${group.id}/log`)}
                    >
                        <ListItemIcon>
                            <Message />
                        </ListItemIcon>
                        <ListItemText primary="Group Log" />
                    </ListItemLink>
                    <Divider />
                </List>
            )}
            <SidebarGroupList group={group} />

            <Box
                sx={{
                    display: "flex",
                    position: "absolute",
                    width: "100%",
                    justifyContent: "center",
                    bottom: 0,
                    padding: 1,
                    borderTop: 1,
                    borderColor: theme.palette.divider,
                }}
            >
                {cfg.imprintURL && (
                    <Link href={cfg.imprintURL} target="_blank" sx={{ mr: 2 }}>
                        imprint
                    </Link>
                )}
                <Tooltip title="Source Code">
                    <Link sx={{ ml: 1 }} target="_blank" href={cfg.sourceCodeURL}>
                        <GitHub />
                    </Link>
                </Tooltip>
                {cfg.issueTrackerURL && (
                    <Tooltip title="Bug reports">
                        <Link sx={{ ml: 1 }} target="_blank" href={cfg.issueTrackerURL}>
                            <BugReport />
                        </Link>
                    </Tooltip>
                )}
            </Box>
        </div>
    );

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

    return (
        <Box sx={{ display: "flex" }}>
            <CssBaseline />
            <AppBar
                position="fixed"
                sx={{
                    // width: {sm: `calc(100% - ${drawerWidth}px)`},
                    // ml: {sm: `${drawerWidth}px`},
                    zIndex: (theme) => theme.zIndex.drawer + 1,
                }}
            >
                <Toolbar>
                    <IconButton
                        color="inherit"
                        aria-label="open drawer"
                        onClick={handleDrawerToggle}
                        edge="start"
                        sx={{ mr: 2, display: { sm: "none" } }}
                    >
                        <MenuIcon />
                    </IconButton>
                    <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
                        Abrechnung
                    </Typography>
                    {authenticated ? (
                        <div>
                            <IconButton
                                aria-label="account of current user"
                                aria-controls="menu-appbar"
                                aria-haspopup="true"
                                onClick={handleProfileMenuOpen}
                                color="inherit"
                            >
                                <AccountCircleIcon />
                            </IconButton>
                            <Menu
                                id="menu-appbar"
                                open={dotsMenuOpen}
                                anchorOrigin={{
                                    vertical: "top",
                                    horizontal: "right",
                                }}
                                keepMounted
                                anchorEl={anchorEl}
                                transformOrigin={{
                                    vertical: "top",
                                    horizontal: "right",
                                }}
                                onClose={handleDotsMenuClose}
                            >
                                <MenuItem component={RouterLink} to="/profile">
                                    Profile
                                </MenuItem>
                                <MenuItem component={RouterLink} to="/profile/settings">
                                    Settings
                                </MenuItem>
                                <MenuItem component={RouterLink} to="/profile/sessions">
                                    Sessions
                                </MenuItem>
                                <MenuItem component={RouterLink} to="/profile/change-email">
                                    Change E-Mail
                                </MenuItem>
                                <MenuItem component={RouterLink} to="/profile/change-password">
                                    Change Password
                                </MenuItem>
                                <Divider />
                                <MenuItem component={RouterLink} to="/logout">
                                    <ListItemIcon>
                                        <Logout fontSize="small" />
                                    </ListItemIcon>
                                    <ListItemText>Sign out</ListItemText>
                                </MenuItem>
                            </Menu>
                        </div>
                    ) : (
                        <Button component={RouterLink} color="inherit" to="/login">
                            Login
                        </Button>
                    )}
                </Toolbar>
            </AppBar>

            {authenticated ? (
                <Box component="nav" sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}>
                    <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: drawerWidth,
                            },
                        }}
                    >
                        {drawer}
                    </Drawer>
                    <Drawer
                        variant="permanent"
                        sx={{
                            flexShrink: 0,
                            display: { xs: "none", sm: "block" },
                            "& .MuiDrawer-paper": {
                                boxSizing: "border-box",
                                width: drawerWidth,
                            },
                        }}
                        open
                    >
                        {drawer}
                    </Drawer>
                </Box>
            ) : null}
            <Box
                component="main"
                sx={{
                    flexGrow: 1,
                    width: { sm: `calc(100% - ${drawerWidth}px)` },
                }}
            >
                <Toolbar />
                <Banner />
                <Container maxWidth="lg" sx={{ padding: { xs: 0, md: 1, lg: 3 } }}>
                    {children}
                </Container>
            </Box>
        </Box>
    );
}

Header: FunctionComponent = memo(() => {
  const { data: updateResponse } = useCheckForUpdatesQuery({
    variables: {
      currentVersion: process.env.EXPRESSLRS_CONFIGURATOR_VERSION || '0.0.1',
    },
  });
  return (
    <AppBar position="static" color="default">
      <Toolbar sx={styles.toolbar}>
        <Box sx={styles.logotype}>
          <img src={LogotypeIcon} alt="ExpressLrs Configurator" />
          <Typography variant="h4" sx={styles.title}>
            {process.env.EXPRESSLRS_CONFIGURATOR_TITLE}{' '}
            <Box component="span" sx={styles.version}>
              v{process.env.EXPRESSLRS_CONFIGURATOR_VERSION}
            </Box>
            {updateResponse?.checkForUpdates?.updateAvailable && (
              <Box
                component="a"
                href={updateResponse?.checkForUpdates?.releaseUrl}
                target="_blank"
                title="Click to download a newest release"
                rel="noreferrer noreferrer"
                sx={styles.updateAvailable}
              >
                Update is available!
              </Box>
            )}
          </Typography>
        </Box>
        <Box sx={styles.social}>
          <Box sx={styles.link}>
            <IconButton
              href={Config.documentationUrl}
              target="_blank"
              title="Documentation"
              rel="noreferrer noreferrer"
              size="large"
            >
              <WebIcon sx={styles.svgIcon} />
            </IconButton>
          </Box>
          <Box sx={styles.link}>
            <IconButton
              href={Config.discordUrl}
              target="_blank"
              title="Discord"
              rel="noreferrer noreferrer"
              size="large"
            >
              <Box
                component="img"
                src={DiscordIcon}
                sx={styles.svgIcon}
                alt=""
              />
            </IconButton>
          </Box>
          <Box sx={styles.link}>
            <IconButton
              href={Config.facebookGroupUrl}
              target="_blank"
              title="Facebook group"
              rel="noreferrer noreferrer"
              size="large"
            >
              <FacebookIcon sx={styles.facebookIcon} />
            </IconButton>
          </Box>
          <Box sx={styles.link}>
            <IconButton
              href={Config.githubRepositoryUrl}
              target="_blank"
              title="Github"
              rel="noreferrer noreferrer"
              size="large"
            >
              <GitHubIcon />
            </IconButton>
          </Box>
          <Box sx={styles.link}>
            <IconButton
              href={Config.openCollectiveUrl}
              target="_blank"
              title="OpenCollective"
              rel="noreferrer noreferrer"
              size="large"
            >
              <Box
                component="img"
                src={OpenCollectiveIcon}
                sx={styles.svgIcon}
                alt=""
              />
            </IconButton>
          </Box>
        </Box>
      </Toolbar>
    </AppBar>
  );
})

MobileHeader = () => {
  const [menuOpen, setMenuOpen] = useState(false);
  const cmsConfig = getCmsSettings();

  const handleCloseMenu = () => {
    setMenuOpen(false);
  }
  const handleOpenMenu = () => {
    setMenuOpen(true);
    globalCloseMenu = () => setMenuOpen(false);
  }

  const handleOpenCart = () => {
    appState.isCartOpen = true;
  }

  const handleOpenWishlist = () => {
    appState.isWishlistOpen = true;
  }

  const handleOpenWatched = () => {
    appState.isWatchedOpen = true;
  }

  return (
    <>
      <Toolbar className={styles.dummyToolbar} />
      <HideOnScroll>
        <AppBar
          className={styles.appBar}
          color="transparent"
        >
          <Toolbar>
            <div className={styles.appBarContent}>
              <div className={styles.leftActions}>
                <div className={styles.logo}>
                  <Link href="/">
                    <img className={styles.logo} src={cmsConfig?.logo} alt="logo" />
                  </Link>
                </div>

              </div>
              <div className={styles.rightActions}>
                <IconButton
                  aria-label="Open wishlist"
                  onClick={handleOpenWishlist}>
                  <FavoriteIcon />
                </IconButton>
                <IconButton
                  aria-label="Open cart"
                  onClick={handleOpenCart}>
                  <ShoppingCartIcon />
                </IconButton>
                <IconButton
                  aria-label="Open main menu"
                  onClick={handleOpenMenu}>
                  <MenuIcon />
                </IconButton>
              </div>
            </div>
          </Toolbar>
        </AppBar>
      </HideOnScroll>
      <SwipeableDrawer
        open={menuOpen}
        onClose={handleCloseMenu}
        onOpen={handleOpenMenu}
      >
        <div className={styles.drawer}>
          <div className={styles.menuActions}>
            <div className={styles.currencyOption}>
              <MuiCurrencySwitch />
            </div>
            <IconButton
              aria-label="Open recently viewed items"
              onClick={handleOpenWatched}>
              <VisibilityIcon />
            </IconButton>
            {/* <IconButton onClick={handleOpenCompare}>
                            <EqualizerIcon />
                        </IconButton> */}
            <IconButton
              aria-label="Open wishlist"
              onClick={handleOpenWishlist}>
              <FavoriteIcon />
            </IconButton>
            <IconButton
              aria-label="Open shopping cart"
              onClick={handleOpenCart}>
              <ShoppingCartIcon />
            </IconButton>
            <IconButton
              aria-label="Close main menu"
              onClick={handleCloseMenu}>
              <CloseIcon />
            </IconButton>
          </div>

          <div className={styles.mobileSearch}>
            <MuiProductSearch />
          </div>
          <CContainer id="mobile_header_13">
            <CPlugin id="header_main_menu"
              plugin={{
                instanceSettings: {
                  mobile: true
                },
                pluginName: "@cromwell/plugin-main-menu"
              }}
              blockName="Main menu"
            />
          </CContainer>
        </div>
      </SwipeableDrawer>
    </>
  );
}

Header = () => {
    const cmsConfig = useCmsSettings();
    const [menuOpen, setMenuOpen] = useState(false);
    const handleCloseMenu = () => {
        setMenuOpen(false);
    }
    const handleOpenMenu = () => {
        setMenuOpen(true);
    }

    return (
        <CContainer global id="header-01">
            <Toolbar className={styles.dummyToolbar} />
            <HideOnScroll>
                <AppBar
                    className={styles.appBar}
                    color="transparent"
                >
                    <Toolbar>
                        <CContainer className={`${styles.Header} ${commonStyles.text}`} id="header-02">
                            <CContainer className={`${commonStyles.content} ${styles.headerContent}`} id="header-03">
                                <CContainer className={styles.logoWrapper} id="header-06">
                                    <Link href="/">
                                        <img className={styles.logo} src={cmsConfig?.logo} alt="logo" />
                                    </Link>
                                </CContainer>
                                <CPlugin
                                    className={styles.mainMenu}
                                    id="header_main_menu"
                                    pluginName={"@cromwell/plugin-main-menu"}
                                    blockName="Main menu"
                                />
                                <CContainer className={styles.search} id="header-04">
                                    <HeaderSearch />
                                </CContainer>
                                <CContainer className={styles.mobileActions} id="header-05">
                                    <IconButton
                                        aria-label={"Open main menu"}
                                        onClick={handleOpenMenu}>
                                        <MenuIcon color="#111" />
                                    </IconButton>
                                </CContainer>
                            </CContainer>
                        </CContainer>
                    </Toolbar>
                </AppBar>
            </HideOnScroll>
            <SwipeableDrawer
                open={menuOpen}
                onClose={handleCloseMenu}
                onOpen={handleOpenMenu}
            >
                <div className={styles.drawer}>
                    <div className={styles.menuActions}>
                        <div></div>
                        <IconButton
                            aria-label="Close main menu"
                            onClick={handleCloseMenu}>
                            <CloseIcon color="#111" />
                        </IconButton>
                    </div>
                    <div className={styles.mobileSearch}>
                        <HeaderSearch />
                    </div>
                    <div>
                        <CPlugin
                            id="header_main_menu"
                            plugin={{
                                instanceSettings: {
                                    mobile: true
                                },
                                pluginName: "@cromwell/plugin-main-menu"
                            }}
                            blockName="Main menu"
                        />
                    </div>
                </div>
            </SwipeableDrawer>
        </CContainer>
    )
}

export default function Sidebar() {
    const pageInfos = getPageInfos();
    const currentInfo = pageInfos.find(i => i.route === window.location.pathname.replace('/admin', ''));
    const currentLink = getLinkByInfo(currentInfo);
    const [expanded, setExpanded] = useState<string | false>(currentLink?.parentId ?? false);
    const [optionsOpen, setOptionsOpen] = useState<boolean>(false);
    const [mobileOpen, setMobileOpen] = useState(false);
    const [cmsInfoOpen, setCmsInfoOpen] = useState(false);
    const [systemMonitorOpen, setSystemMonitorOpen] = useState(false);
    const popperAnchorEl = useRef<HTMLDivElement | null>(null);
    const history = useHistory?.();
    const forceUpdate = useForceUpdate();

    const userInfo: TUser | undefined = getStoreItem('userInfo');
    const toggleSubMenu = (panel: string) => (event: React.ChangeEvent<any>, isExpanded: boolean) => {
        setExpanded(isExpanded ? panel : false);
    };
    const handleCloseMenu = () => {
        setMobileOpen(false);
    }
    const handleOpenMenu = () => {
        setMobileOpen(true);
    }

    useEffect(() => {
        onStoreChange('userInfo', () => {
            setTimeout(forceUpdate, 100);
        });
        history?.listen(() => {
            const currentInfo = pageInfos.find(i => i.route === window.location.pathname.replace('/admin', ''));
            const newCurrentLink = getLinkByInfo(currentInfo);
            if (newCurrentLink && newCurrentLink !== currentLink) {
                // setActiveId(newCurrentLink.id);
                if (newCurrentLink.parentId) setExpanded(newCurrentLink.parentId)
            }
            setTimeout(forceUpdate, 100);
        });

        store.setStateProp({
            prop: 'forceUpdateSidebar',
            payload: forceUpdate,
        });
    }, []);

    const handleLogout = async () => {
        setOptionsOpen(false);
        await getRestApiClient()?.logOut();
        forceUpdate();
        history?.push(loginPageInfo.route);
    }

    const handleOptionsToggle = () => {
        setOptionsOpen(!optionsOpen);
    }

    const openFileManager = () => {
        getFileManager()?.open();
    }

    const openCmsInfo = () => {
        setCmsInfoOpen(true);
    }

    const openDocs = () => {
        window.open('https://cromwellcms.com/docs/overview/intro', '_blank')
    }

    // check for disabled sidebar
    if (currentInfo?.disableSidebar) return <></>;

    const sidebarContent = (
        <div className={styles.sidebarContent}>
            <div className={styles.sidebarTop}>
                <div className={styles.sidebarHeader}>
                    <div className={styles.logo}
                        style={{ backgroundImage: `url("/admin/static/logo_small_white.svg")` }}
                    ></div>
                    {/* <p className={commonStyles.text} style={{ color: '#fff', opacity: 0.7 }}>Admin Panel</p> */}
                    <div>
                        <NotificationCenter color="#fff" />
                    </div>
                    <div className={styles.sidebarMobileActions}>
                        <IconButton onClick={handleCloseMenu} >
                            <CloseIcon htmlColor="#999" />
                        </IconButton>
                    </div>
                </div>
                {getSideBarLinks().map(link => <SidebarLink data={link}
                    key={link.id}
                    toggleSubMenu={toggleSubMenu}
                    expanded={expanded}
                    forceUpdate={forceUpdate}
                    activeId={currentLink?.id}
                    userInfo={userInfo}
                />)}
            </div>
            <div className={styles.sidebarBottom}>
                <div className={styles.bottomBlock} style={{ overflow: 'hidden' }}>
                    {(userInfo?.avatar && userInfo?.avatar !== '') ? (
                        <div className={styles.avatar} style={{ backgroundImage: `url(${userInfo.avatar})` }}></div>
                    ) : <AccountCircleIcon className={styles.avatar} />}
                    <div className={styles.textBlock}>
                        <p className={styles.nameText}>{userInfo?.fullName ?? ''}</p>
                        <p className={styles.emailText}>{userInfo?.email ?? ''}</p>
                    </div>
                </div>
                <div className={styles.bottomBlock}
                    style={{ marginRight: '-10px' }}
                    ref={popperAnchorEl}>
                    <Tooltip title="Options">
                        <IconButton
                            style={{ marginLeft: '-10px' }}
                            onClick={handleOptionsToggle}
                            className={styles.actionBtn}
                            aria-label="Options"
                        >
                            <MoreVertOutlinedIcon />
                        </IconButton>
                    </Tooltip>
                    <Popover open={optionsOpen} anchorEl={popperAnchorEl.current}
                        style={{ zIndex: 9999 }}
                        onClose={() => setOptionsOpen(false)}
                        anchorOrigin={{
                            vertical: 'top',
                            horizontal: 'right',
                        }}
                        transformOrigin={{
                            vertical: 'bottom',
                            horizontal: 'right',
                        }}
                    >
                        <div onClick={() => setOptionsOpen(false)}>
                            <Link to={`${userPageInfo.baseRoute}/${userInfo?.id}`}>
                                <MenuItem className={styles.optionsItem}>
                                    <AccountCircleOutlinedIcon />
                                    <p>Your profile</p>
                                </MenuItem>
                            </Link>
                            <MenuItem className={styles.optionsItem} onClick={openFileManager}>
                                <PermMediaOutlinedIcon />
                                <p>Media</p>
                            </MenuItem>
                            <MenuItem className={styles.optionsItem} onClick={() => setSystemMonitorOpen(true)}>
                                <DnsRoundedIcon />
                                <p>System monitor</p>
                            </MenuItem>
                            <MenuItem className={styles.optionsItem} onClick={openCmsInfo}>
                                <InfoOutlinedIcon />
                                <p>CMS specs</p>
                            </MenuItem>
                            <MenuItem className={styles.optionsItem} onClick={openDocs}>
                                <HelpOutlineIcon />
                                <p>Documentation</p>
                            </MenuItem>
                            <MenuItem onClick={handleLogout} className={styles.optionsItem}>
                                <ExitToAppIcon />
                                <p>Log out</p>
                            </MenuItem>
                        </div>
                    </Popover>
                </div>
            </div>
        </div>
    )

    return (
        <div className={styles.Sidebar}>
            <div className={styles.mobileContent}>
                <HideOnScroll>
                    <AppBar
                        className={styles.appBar}
                        color="transparent"
                    >
                        <Toolbar
                            className={styles.toolbar}
                        >
                            <div className={styles.sidebarMobileHeader}>
                                <div className={styles.logoMobile}
                                    style={{ backgroundImage: `url("/admin/static/logo_small_white.svg")` }}
                                ></div>
                                {/* <p className={commonStyles.text} style={{ color: '#fff', opacity: 0.7 }}>Admin Panel</p> */}
                                <div className={styles.mobileActions}>
                                    <NotificationCenter />
                                    <IconButton onClick={handleOpenMenu}>
                                        <MenuIcon />
                                    </IconButton>
                                </div>
                            </div>
                        </Toolbar>
                    </AppBar>
                </HideOnScroll>
                <SwipeableDrawer
                    open={mobileOpen}
                    onClose={handleCloseMenu}
                    onOpen={handleOpenMenu}
                >
                    <div className={styles.drawer}>{sidebarContent}</div>
                </SwipeableDrawer>
            </div>
            <CmsInfo
                open={cmsInfoOpen}
                onClose={() => setCmsInfoOpen(false)}
            />
            <SystemMonitor
                open={systemMonitorOpen}
                onClose={() => setSystemMonitorOpen(false)}
            />
            <div className={styles.desktopContent}>{sidebarContent}</div>
        </div>
    )
}