From 3609cf5d5dcb74fb947f0b9c3c7e99ac6f6c6e45 Mon Sep 17 00:00:00 2001
From: Kichiyaki <dawidwysokinski000@gmail.com>
Date: Wed, 11 Nov 2020 13:55:34 +0100
Subject: [PATCH] redo elevation prop change, Sidebar renders under Topbar now

---
 .../IndexPage/components/Footer/Footer.tsx         |  2 +-
 .../IndexPage/components/Header/Header.tsx         |  2 +-
 .../ServerPage/common/PageLayout/PageLayout.tsx    |  2 +-
 .../PageLayout/components/Sidebar/Sidebar.tsx      | 14 +++++++++++---
 .../components/Sidebar/components/Nav/ListItem.tsx |  1 -
 .../PageLayout/components/Sidebar/useStyles.ts     |  7 ++-----
 .../common/PageLayout/components/TopBar/TopBar.tsx |  2 +-
 src/theme/createTheme.ts                           |  1 -
 8 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/features/IndexPage/components/Footer/Footer.tsx b/src/features/IndexPage/components/Footer/Footer.tsx
index fe630ba..1cafc05 100644
--- a/src/features/IndexPage/components/Footer/Footer.tsx
+++ b/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}>
diff --git a/src/features/IndexPage/components/Header/Header.tsx b/src/features/IndexPage/components/Header/Header.tsx
index ce358fb..fedaa9d 100644
--- a/src/features/IndexPage/components/Header/Header.tsx
+++ b/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}>
diff --git a/src/features/ServerPage/common/PageLayout/PageLayout.tsx b/src/features/ServerPage/common/PageLayout/PageLayout.tsx
index 140dbc1..dcf7497 100644
--- a/src/features/ServerPage/common/PageLayout/PageLayout.tsx
+++ b/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}
diff --git a/src/features/ServerPage/common/PageLayout/components/Sidebar/Sidebar.tsx b/src/features/ServerPage/common/PageLayout/components/Sidebar/Sidebar.tsx
index d7ac5b4..cee9b11 100644
--- a/src/features/ServerPage/common/PageLayout/components/Sidebar/Sidebar.tsx
+++ b/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 />
diff --git a/src/features/ServerPage/common/PageLayout/components/Sidebar/components/Nav/ListItem.tsx b/src/features/ServerPage/common/PageLayout/components/Sidebar/components/Nav/ListItem.tsx
index 9a4637e..6f565fe 100644
--- a/src/features/ServerPage/common/PageLayout/components/Sidebar/components/Nav/ListItem.tsx
+++ b/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} />
diff --git a/src/features/ServerPage/common/PageLayout/components/Sidebar/useStyles.ts b/src/features/ServerPage/common/PageLayout/components/Sidebar/useStyles.ts
index ea7ad9a..f35c967 100644
--- a/src/features/ServerPage/common/PageLayout/components/Sidebar/useStyles.ts
+++ b/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,
diff --git a/src/features/ServerPage/common/PageLayout/components/TopBar/TopBar.tsx b/src/features/ServerPage/common/PageLayout/components/TopBar/TopBar.tsx
index 558e054..d585931 100644
--- a/src/features/ServerPage/common/PageLayout/components/TopBar/TopBar.tsx
+++ b/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}>
diff --git a/src/theme/createTheme.ts b/src/theme/createTheme.ts
index db0230d..e94491c 100644
--- a/src/theme/createTheme.ts
+++ b/src/theme/createTheme.ts
@@ -21,7 +21,6 @@ const createTheme = (): Theme => {
         },
         MuiAppBar: {
           color: 'default',
-          elevation: 0,
         },
       },
     })