fix header layout

parlemonde · Jun 19, 2024 · d934f04 · d934f04
1 parent 33516f4
commit d934f04
Show file tree

Hide file tree

Showing 6 changed files with 178 additions and 155 deletions.
diff --git a/src/components/Base.tsx b/src/components/Base.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 
-import { Grid } from '@mui/material';
+import { Box, Grid } from '@mui/material';
 
-import { NavigationWrapper } from './NavigationWrapper';
+import { Navigation } from './Navigation';
+import { NavigationMobile } from './NavigationMobile';
 import { SubHeaders } from 'src/components/accueil/SubHeader';
 
 interface BaseProps {
@@ -14,52 +15,95 @@ interface BaseProps {
 
 export const Base = ({ children, rightNav, hideLeftNav = false, showSubHeader = false, style }: React.PropsWithChildren<BaseProps>) => {
   return (
-    <Grid
-      container
-      sx={{
-        marginTop: {
-          md: '96px',
-        },
-        padding: '0 20px',
-      }}
-    >
-      {!hideLeftNav && <NavigationWrapper />}
+    <>
+      {/*mobile*/}
       <Grid
-        item
-        xs={12}
-        md={8}
-        lg={9}
-        xl={10}
-        sx={{
-          ...style,
-          marginBottom: {
-            xs: rightNav ? '20px' : '0',
-          },
-          marginTop: {
-            xs: '90px',
-            md: '0',
-          },
+        container
+        display={{
+          xs: 'block',
+          md: 'none',
         }}
       >
+        {!hideLeftNav && <NavigationMobile />}
         {showSubHeader && (
-          <div style={{ height: '40px', marginBottom: '20px' }}>
+          <Box sx={{ height: '40px', marginBottom: '10px', marginTop: '70px' }}>
             <SubHeaders />
-          </div>
+          </Box>
         )}
         <div className="app-content__card with-shadow">{children}</div>
+        {rightNav && (
+          <Grid item xs={12} sm={4} lg={3} xl={2}>
+            <aside
+              style={{
+                marginLeft: '20px',
+                marginBottom: '20px',
+              }}
+            >
+              {rightNav}
+            </aside>
+          </Grid>
+        )}
       </Grid>
-      {rightNav && (
-        <Grid item xs={12} sm={4} lg={3} xl={2}>
-          <aside
-            style={{
-              marginLeft: '20px',
-              marginBottom: '20px',
+
+      {/**Desktop*/}
+      <Grid
+        container
+        sx={{
+          marginTop: '96px',
+          padding: '0 20px',
+          display: {
+            xs: 'none',
+            md: 'flex',
+          },
+        }}
+      >
+        {!hideLeftNav && (
+          <Grid
+            item
+            md={4}
+            lg={3}
+            xl={2}
+            className="sticky"
+            sx={{
+              top: '96px',
+              height: 'fit-content',
             }}
           >
-            {rightNav}
-          </aside>
+            <Navigation />
+          </Grid>
+        )}
+
+        <Grid
+          item
+          md={8}
+          lg={9}
+          xl={10}
+          sx={{
+            ...style,
+            marginBottom: rightNav ? '20px' : '0',
+          }}
+        >
+          {showSubHeader && (
+            <div style={{ height: '40px', marginBottom: '20px' }}>
+              <SubHeaders />
+            </div>
+          )}
+          <div className="app-content__card with-shadow">{children}</div>
         </Grid>
-      )}
-    </Grid>
+
+        {rightNav && (
+          <Grid item md={4} lg={3} xl={2}>
+            <aside
+              style={{
+                marginLeft: '20px',
+                marginBottom: '20px',
+              }}
+            >
+              {rightNav}
+            </aside>
+          </Grid>
+        )}
+      </Grid>
+    </>
   );
 };
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -42,17 +42,7 @@ export const Header = () => {
   };
 
   return (
-    <Box
-      component="header"
-      sx={{
-        position: 'fixed',
-        top: '0',
-        left: '0',
-        width: '100%',
-        backgroundColor: 'background.default',
-        zIndex: '100',
-      }}
-    >
+    <Box component="header">
       <Box
         sx={(theme) => ({
           position: 'relative',
@@ -62,7 +52,7 @@ export const Header = () => {
           alignItems: 'center',
           height: '60px',
           margin: {
-            xs: '10px 20px 0',
+            xs: '0',
             md: '10px 20px',
           },
           padding: '0 1rem',

diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
@@ -241,7 +241,7 @@ export const Navigation = (): JSX.Element => {
   return (
     <nav>
       <div style={{ marginRight: '1.5rem' }}>
-        <Box mb={2}>
+        <Box mb={{ xs: '0', md: '20px' }}>
           <VillageMonde />
         </Box>
         {[fixedTabs, phaseTabs].map((tabs, index) => (

diff --git a/src/components/NavigationMobile.tsx b/src/components/NavigationMobile.tsx
@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+
+import CloseIcon from '@mui/icons-material/Close';
+import MenuIcon from '@mui/icons-material/Menu';
+import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
+import Drawer from '@mui/material/Drawer';
+import Grid from '@mui/material/Grid';
+import IconButton from '@mui/material/IconButton';
+
+import { Navigation } from './Navigation';
+import ShowFor from './ShowFor';
+import { VillageMonde } from './VillageMonde';
+import { VillageSelect } from './VillageSelect';
+import { UserType } from 'types/user.type';
+
+export const NavigationMobile = (): JSX.Element => {
+  const [open, setState] = useState(false);
+
+  /*
+  The keys tab and shift are excluded so the user can focus between
+  the elements with the keys
+  */
+  const toggleDrawer = (open: boolean) => (event: { type?: string; key?: string }) => {
+    if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
+      return;
+    }
+    setState(open);
+  };
+
+  return (
+    <Grid
+      className="sticky"
+      item
+      xs={12}
+      sx={{
+        display: {
+          xs: 'flex',
+          md: 'none',
+        },
+        top: {
+          xs: '60px',
+          md: '70px',
+        },
+        zIndex: '99',
+        width: '100%',
+        height: '50px',
+        backgroundColor: 'white',
+        padding: '0.5rem',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        borderBottom: '1px solid lightgray',
+      }}
+    >
+      <IconButton edge="start" color="inherit" aria-label="Ouvrir le menu" onClick={toggleDrawer(true)}>
+        <MenuIcon fontSize="large" />
+      </IconButton>
+      <Box display="flex" width="100%" justifyContent="center" alignItems="center">
+        <ShowFor roles={[UserType.TEACHER, UserType.FAMILY, UserType.OBSERVATOR]}>
+          <VillageMonde />
+        </ShowFor>
+        <VillageSelect />
+      </Box>
+      <Drawer anchor="left" open={open} onClose={toggleDrawer(false)}>
+        <Box
+          sx={{
+            p: 2,
+            height: 1,
+            width: '320px',
+          }}
+        >
+          <IconButton sx={{ mb: 2 }} onClick={toggleDrawer(false)}>
+            <CloseIcon />
+          </IconButton>
+
+          <Divider sx={{ mb: 2 }} />
+
+          <Box sx={{ mb: 2 }}>
+            <Navigation />
+          </Box>
+        </Box>
+      </Drawer>
+    </Grid>
+  );
+};
diff --git a/src/components/NavigationWrapper.tsx b/src/components/NavigationWrapper.tsx
diff --git a/src/styles/base.scss b/src/styles/base.scss
@@ -15,6 +15,14 @@ $horizontalSpacing: 25px;
 }
 
 // ---- HEADER ----
+header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: $bg-page;
+  z-index: 100;
+}
 .header__user {
   margin: auto 0;
   display: flex;