fix: changed layout root to flex based

src/components/Layout.js

@@ -1,65 +1,51 @@
-import Grid from '@material-ui/core/Grid';
-import Paper from '@material-ui/core/Paper';
+import Box from '@material-ui/core/Box';
 import { makeStyles } from '@material-ui/core/styles';
 import dynamic from 'next/dynamic';
 
 import Navbar from './Navbar';
 
 const App = dynamic(() => import('./App'), { ssr: false });
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(() => ({
   root: {
     height: '100vh',
-  },
-  nav: {
-    height: theme.spacing(18),
-    width: '100%',
-    background: 'white',
     display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 1000,
-  },
-  mainItem: {
-    height: '100%',
+    flexDirection: 'column',
   },
   main: {
     width: '100vw',
-    height: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    flexGrow: 1,
+    overflow: 'hidden',
   },
   left: {
     width: '50%',
     height: '100%',
-    overflow: 'hidden',
     zIndex: 999,
     background: 'gray',
+    overflowY: 'auto',
   },
   right: {
     width: '50%',
+    zIndex: 998,
+    background: 'gray',
   },
 }));
 
 export default function Layout({ children }) {
   const classes = useStyles();
   return (
-    <Grid container className={classes.root}>
-      <Grid item className={classes.nav}>
-        <Paper elevation={4}>
-          <Navbar />
-        </Paper>
-      </Grid>
-      <Grid item className={classes.mainItem}>
-        <Grid container className={classes.main}>
-          <Grid item className={classes.left}>
-            {children}
-          </Grid>
-          <Grid item className={classes.right}>
-            <div>
-              <App />
-            </div>
-          </Grid>
-        </Grid>
-      </Grid>
-    </Grid>
+    <Box className={classes.root}>
+      <Navbar />
+      <Box className={classes.main}>
+        <Box className={classes.left}>{children}</Box>
+        <Box className={classes.right}>
+          <div>
+            <App />
+          </div>
+        </Box>
+      </Box>
+    </Box>
   );
 }

src/components/Navbar.js

@@ -16,6 +16,7 @@ const useStyles = makeStyles((theme) => ({
     alignItems: 'center',
     justifyContent: 'space-between',
     padding: '0 20px',
+    zIndex: 1000,
   },
   toolbar: {
     gap: 25,
@@ -46,7 +47,7 @@ function Navbar() {
   };
   const classes = useStyles();
   return (
-    <AppBar className={classes.navContainer} color="primary">
+    <AppBar className={classes.navContainer} color="primary" position="static">
       <Image src={logo} width={180} height={30} />
       <Toolbar variant="dense" className={classes.toolbar}>
         <Link href="/">

src/pages/organizations/[organizationid].js

@@ -9,7 +9,6 @@ import placeholder from '../../images/organizationsPlaceholder.png';
 
 const useStyles = makeStyles((theme) => ({
   organizationPage: {
-    overflowY: 'scroll',
     background: 'white',
     padding: '12px 20px',
   },