redo elevation prop change, Sidebar renders under Topbar now

src/features/IndexPage/components/Footer/Footer.tsx

@@ -8,7 +8,7 @@ export default function Header() {
   const classes = useStyles();
 
   return (
-    <AppBar position="static" component="footer" elevation={0}>
+    <AppBar position="static" component="footer">
       <Container>
         <Toolbar disableGutters className={classes.toolbar}>
           <Typography align="center" className={classes.copyright}>

src/features/IndexPage/components/Header/Header.tsx

@@ -31,7 +31,7 @@ export default function Header() {
   const classes = useStyles();
 
   return (
-    <AppBar position="fixed" elevation={0}>
+    <AppBar position="fixed">
       <Container>
         <Toolbar disableGutters className={classes.toolbar}>
           <div className={classes.searchInputWrapper}>

src/features/ServerPage/common/PageLayout/PageLayout.tsx

@@ -57,7 +57,7 @@ function PageLayout({ children }: Props) {
           [classes.shiftContent]: isDesktop,
         })}
       >
-        <TopBar openSidebar={openSidebar} t={t} />
+        <TopBar openSidebar={open ? closeSidebar : openSidebar} t={t} />
         <Toolbar />
         <Sidebar
           onClose={closeSidebar}

src/features/ServerPage/common/PageLayout/components/Sidebar/Sidebar.tsx

@@ -7,7 +7,13 @@ import useStyles from './useStyles';
 import * as ROUTES from '@config/routes';
 import { Route } from './components/Nav/types';
 
-import { Divider, SwipeableDrawer, DrawerProps } from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
+import {
+  Divider,
+  SwipeableDrawer,
+  DrawerProps,
+  Toolbar,
+} from '@material-ui/core';
 import DashboardIcon from '@material-ui/icons/Dashboard';
 
 import Nav from './components/Nav/Nav';
@@ -25,6 +31,7 @@ export interface Props {
 const Sidebar = ({ t, className, open, variant, onClose, onOpen }: Props) => {
   const classes = useStyles();
   const { key } = useServer();
+  const theme = useTheme();
 
   const routes: Route[] = [
     {
@@ -39,13 +46,14 @@ const Sidebar = ({ t, className, open, variant, onClose, onOpen }: Props) => {
   return (
     <SwipeableDrawer
       anchor="left"
-      classes={{ paper: classes.drawer }}
+      classes={{ paper: classes.drawerPaper }}
+      ModalProps={{ style: { zIndex: theme.zIndex.appBar - 1 } }}
       onClose={onClose}
       onOpen={onOpen}
       open={open}
       variant={variant}
-      disableBackdropTransition
     >
+      <Toolbar />
       <div className={clsx(classes.root, className)}>
         <ServerInfo t={t} />
         <Divider />

src/features/ServerPage/common/PageLayout/components/Sidebar/components/Nav/ListItem.tsx

@@ -38,7 +38,6 @@ function ListItem({ route, nestedLevel }: Props) {
         button
         component={Box}
         pl={nestedLevel}
-        dense
       >
         <ListItemIcon>{route.Icon}</ListItemIcon>
         <ListItemText primary={route.name} />

src/features/ServerPage/common/PageLayout/components/Sidebar/useStyles.ts

@@ -2,12 +2,9 @@ import { makeStyles } from '@material-ui/core/styles';
 import { DRAWER_WIDTH } from './contants';
 
 const useStyles = makeStyles(theme => ({
-  drawer: {
+  drawerPaper: {
+    zIndex: `${theme.zIndex.appBar - 1} !important` as any,
     width: DRAWER_WIDTH,
-    [theme.breakpoints.up('lg')]: {
-      marginTop: 64,
-      height: 'calc(100% - 64px) !important',
-    },
   },
   root: {
     backgroundColor: theme.palette.background.paper,

src/features/ServerPage/common/PageLayout/components/TopBar/TopBar.tsx

@@ -13,7 +13,7 @@ export interface Props {
 
 const TopBar = ({ className, openSidebar }: Props) => {
   return (
-    <AppBar className={clsx(className)} elevation={0}>
+    <AppBar className={clsx(className)}>
       <Toolbar>
         <Hidden lgUp>
           <IconButton color="inherit" onClick={openSidebar}>

src/theme/createTheme.ts

@@ -21,7 +21,6 @@ const createTheme = (): Theme => {
         },
         MuiAppBar: {
           color: 'default',
-          elevation: 0,
         },
       },
     })