feat(drawer): drawer push main content

Clm-Roig · Mar 15, 2022 · c7422b7 · c7422b7
1 parent d296831
commit c7422b7
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 13 deletions.
diff --git a/src/app/App.css b/src/app/App.css
@@ -0,0 +1,8 @@
+.mainContent {
+    margin: 1rem;
+    padding: 1rem;
+}
+
+.reducedByMenu {
+    margin-left: 10rem;
+}
diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { Container } from '@mui/material';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { Container, Paper } from '@mui/material';
+import { createTheme, StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
 import palette from '../config/CustomTheme';
 import './App.css';
 import AppBar from './AppBar';
@@ -11,21 +11,34 @@ const theme = createTheme({
   palette: palette
 });
 
+const DRAWER_MENU_WIDTH = 250;
+
 function App() {
-  const [isMenuOpen, setIsMenuOpen] = useState(true);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
 
   const toggleDrawerMenu = () => {
     setIsMenuOpen(!isMenuOpen);
   };
 
   return (
-    <ThemeProvider theme={theme}>
-      <Container>
-        <AppBar toggleDrawerMenu={toggleDrawerMenu} />
-        <DrawerMenu open={isMenuOpen} toggleDrawerMenu={toggleDrawerMenu} />
-        <Router />
-      </Container>
-    </ThemeProvider>
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={theme}>
+        <Container
+          style={isMenuOpen ? { marginLeft: DRAWER_MENU_WIDTH } : {}}
+          maxWidth={false}
+          disableGutters>
+          <AppBar toggleDrawerMenu={toggleDrawerMenu} />
+          <DrawerMenu
+            width={DRAWER_MENU_WIDTH}
+            open={isMenuOpen}
+            toggleDrawerMenu={toggleDrawerMenu}
+          />
+          <Paper style={{ margin: '1rem' }}>
+            <Router />
+          </Paper>
+        </Container>
+      </ThemeProvider>
+    </StyledEngineProvider>
   );
 }
 

diff --git a/src/app/DrawerMenu.tsx b/src/app/DrawerMenu.tsx
@@ -6,9 +6,20 @@ import ListAltIcon from '@mui/icons-material/ListAlt';
 import TimelineIcon from '@mui/icons-material/Timeline';
 import './DrawerMenu.css';
 
-function DrawerMenu({ toggleDrawerMenu, open }: InferProps<typeof DrawerMenu.propTypes>) {
+function DrawerMenu({ toggleDrawerMenu, open, width }: InferProps<typeof DrawerMenu.propTypes>) {
   return (
-    <Drawer variant="persistent" anchor="left" open={open}>
+    <Drawer
+      sx={{
+        width: width,
+        flexShrink: 0,
+        '& .MuiDrawer-paper': {
+          width: width,
+          boxSizing: 'border-box'
+        }
+      }}
+      variant="persistent"
+      anchor="left"
+      open={open}>
       <IconButton onClick={toggleDrawerMenu}>
         <ChevronLeftIcon />
       </IconButton>
@@ -32,7 +43,8 @@ function DrawerMenu({ toggleDrawerMenu, open }: InferProps<typeof DrawerMenu.pro
 
 DrawerMenu.propTypes = {
   open: PropTypes.bool.isRequired,
-  toggleDrawerMenu: PropTypes.func.isRequired
+  toggleDrawerMenu: PropTypes.func.isRequired,
+  width: PropTypes.number.isRequired
 };
 
 export default DrawerMenu;