switch mobile layout on md

parlemonde · Jun 11, 2024 · 6487814 · 6487814
1 parent 1100b04
commit 6487814
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 22 deletions.
diff --git a/src/components/Base.tsx b/src/components/Base.tsx
@@ -19,8 +19,7 @@ export const Base = ({ children, rightNav, hideLeftNav = false, showSubHeader =
       xs={12}
       sx={{
         marginTop: {
-          xs: '60px',
-          sm: '96px',
+          md: '96px',
         },
         padding: '0 20px',
       }}
@@ -29,7 +28,7 @@ export const Base = ({ children, rightNav, hideLeftNav = false, showSubHeader =
       <Grid
         item
         xs={12}
-        sm={8}
+        md={8}
         lg={9}
         xl={10}
         sx={{
@@ -39,8 +38,8 @@ export const Base = ({ children, rightNav, hideLeftNav = false, showSubHeader =
             xs: rightNav ? '20px' : '0',
           },
           marginTop: {
-            xs: '20px',
-            sm: '0',
+            xs: '90px',
+            md: '0',
           },
         }}
       >

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
 import React from 'react';
 
 import SettingsIcon from '@mui/icons-material/Settings';
-import { Button } from '@mui/material';
+import { Box, Button } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
@@ -51,7 +51,14 @@ export const Header = () => {
         </Link>
         {user && (
           <div className="header__user">
-            <VillageSelect />
+            <Box
+              display={{
+                xs: 'none',
+                md: 'block',
+              }}
+            >
+              <VillageSelect />
+            </Box>
             {user.type === UserType.ADMIN || user.type === UserType.SUPER_ADMIN || user.type === UserType.MEDIATOR ? (
               <Link href="/admin/villages" passHref>
                 <Button component="a" href="/admin/villages" variant="contained" color="primary" size="small" style={{ marginLeft: '1rem' }}>

diff --git a/src/components/NavigationWrapper.tsx b/src/components/NavigationWrapper.tsx
@@ -29,37 +29,49 @@ export const NavigationWrapper = (): JSX.Element => {
     <>
       {/* Desktop view */}
       <Grid
-        className="sticky"
+        className="fixed"
         item
         xs={12}
-        sm={4}
+        md={4}
         lg={3}
         xl={2}
         sx={{
           top: '96px',
           height: 'fit-content',
           display: {
             xs: 'none',
-            sm: 'block',
+            md: 'block',
+          },
+          width: {
+            md: 'calc(33.333333% - 20px)',
+            lg: 'calc(25% - 20px)',
+            xl: 'calc(16.666667% - 20px)',
           },
         }}
       >
-        <Navigation />
+        <div
+          style={{
+            position: 'fixed',
+            width: 'inherit',
+          }}
+        >
+          <Navigation />
+        </div>
       </Grid>
       {/* Mobile view */}
       <Grid
-        className="sticky with-shadow"
+        className="with-shadow"
         item
         xs={12}
         sx={{
           display: {
+            position: 'sticky',
+            top: '70px',
             xs: 'block',
-            sm: 'none',
+            md: 'none',
             zIndex: '99',
-            top: '60px',
             width: '100%',
             backgroundColor: 'white',
-            margin: '1rem 0',
             padding: '0.5rem',
           },
         }}

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -120,7 +120,7 @@ const MyApp: React.FunctionComponent<MyAppProps> & {
     <CacheProvider value={emotionCache}>
       <Head>
         <title key="app-title">1Village{isOnAdmin ? ' - Admin' : ''}</title>
-        <meta key="app-viewport" name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
+        <meta key="app-viewport" name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
 
       <ThemeProvider theme={theme}>

diff --git a/src/styles/base.scss b/src/styles/base.scss
@@ -27,7 +27,7 @@ header {
 .header__container {
   background-color: white;
   height: $headerHeight;
-  margin: $verticalSpacing $horizontalSpacing 0 $horizontalSpacing;
+  margin: 10px 20px;
   border-radius: 10px;
   overflow: hidden;
   display: flex;
@@ -54,16 +54,16 @@ header {
 
 // ---- LEFT NAVIGATION ----
 .navigation {
-  //position: fixed;
-  //top: $headerHeight + 2 * $verticalSpacing;
+  position: fixed;
+  top: $headerHeight + 2 * $verticalSpacing;
   left: 0;
   padding-bottom: 4px;
   height: calc(100vh - #{$headerHeight + 3 * $verticalSpacing});
   overflow: auto;
 }
 .navigation__content {
   background-color: white;
-  //width: $menuWidth;
+  width: $menuWidth;
   margin: 0 $horizontalSpacing $verticalSpacing $horizontalSpacing;
   border-radius: 10px;
 }
@@ -144,7 +144,7 @@ main {
 
 @include for-small-screen {
   .header__container {
-    margin: math.div($verticalSpacing, 2) math.div($horizontalSpacing, 2) 0 math.div($horizontalSpacing, 2);
+    //margin: math.div($verticalSpacing, 2) math.div($horizontalSpacing, 2) 0 math.div($horizontalSpacing, 2);
   }
 
   .navigation {

diff --git a/src/styles/globals.scss b/src/styles/globals.scss
@@ -7,7 +7,6 @@ body {
   font-weight: 400 !important;
   padding: 0 !important;
   overflow: auto !important;
-  margin-top: 80px;
 }
 
 h1,