Refactor Menu to 100%-high Stack with overflow (#277)

* add scrollbar to menu * refactor Menu to 100%-high Stack with overflow with Authentication pushed to bottom by flexGrow=1 --------- Co-authored-by: rtrembecky <[email protected]>
ZdruzenieSTROM · Dec 9, 2023 · 4d6fa58 · 4d6fa58
1 parent cc8e55e
commit 4d6fa58
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 41 deletions.
diff --git a/src/components/PageLayout/Authentication/Authentication.module.scss b/src/components/PageLayout/Authentication/Authentication.module.scss
@@ -1,8 +1,5 @@
 .authenticationDisplayButtons {
-  position: absolute;
-  left: 0px;
-  bottom: 0px;
-  width: 100%;
+  margin-top: 1rem;
   text-align: center;
   color: white;
 

diff --git a/src/components/PageLayout/MenuMain/MenuMain.module.scss b/src/components/PageLayout/MenuMain/MenuMain.module.scss
@@ -1,18 +1,3 @@
-.menu {
-  position: fixed;
-  width: 25%;
-  height: 100vh;
-  top: -100%;
-  background-color: black;
-  transition: 750ms;
-  z-index: 100;
-
-  &.visible {
-    left: 0;
-    top: 0;
-  }
-}
-
 .menuButton {
   cursor: pointer;
   display: grid;

diff --git a/src/components/PageLayout/MenuMain/MenuMain.module.scss.d.ts b/src/components/PageLayout/MenuMain/MenuMain.module.scss.d.ts
@@ -1,12 +1,10 @@
 export type Styles = {
   active: string
   loading: string
-  menu: string
   menuButton: string
   menuCloseButton: string
   menuItem: string
   menuOpenButton: string
-  visible: string
 }
 
 export type ClassNames = keyof Styles

diff --git a/src/components/PageLayout/MenuMain/MenuMain.tsx b/src/components/PageLayout/MenuMain/MenuMain.tsx
@@ -1,4 +1,4 @@
-import {Stack, Theme, Typography, useMediaQuery} from '@mui/material'
+import {Box, Stack, Theme, Typography, useMediaQuery} from '@mui/material'
 import {useQuery} from '@tanstack/react-query'
 import axios from 'axios'
 import clsx from 'clsx'
@@ -45,27 +45,45 @@ export const MenuMain: FC = () => {
           <Menu width={iconSize} height={iconSize} />
         </div>
       )}
-      <div className={clsx(styles.menu, isVisible && styles.visible)}>
-        <CloseButton size={iconSize} onClick={toggleMenu} className={clsx(styles.menuButton, styles.menuCloseButton)} />
-        {menuItemsIsLoading && (
-          <div className={styles.loading}>
-            <Loading />
-          </div>
-        )}
-        <Stack mt="176px">
-          {menuItems.map(({id, caption, url}) => (
-            // `url` je vo formate `/vysledky/` alebo `/akcie/matboj/`
-            <MenuMainItem key={id} caption={caption} url={`/${seminar}${url}`} />
-          ))}
-        </Stack>
-        {hasPermissions && (
-          <Stack sx={{mt: 4, mx: 2, borderTop: '8px dashed white', pt: 4}}>
-            <MenuMainItem caption="TODO: Opravovanie" url={`/${seminar}/admin/opravovanie`} />
-            <MenuMainItem caption="Admin" url="/admin" />
+      <Stack
+        sx={{
+          position: 'fixed',
+          width: '25%',
+          height: '100%',
+          left: 0,
+          top: isVisible ? 0 : '-100%',
+          overflow: 'auto',
+          backgroundColor: 'black',
+          transition: '750ms',
+          zIndex: 100,
+        }}
+      >
+        <Box flexGrow={1}>
+          <CloseButton
+            size={iconSize}
+            onClick={toggleMenu}
+            className={clsx(styles.menuButton, styles.menuCloseButton)}
+          />
+          {menuItemsIsLoading && (
+            <div className={styles.loading}>
+              <Loading />
+            </div>
+          )}
+          <Stack mt="176px">
+            {menuItems.map(({id, caption, url}) => (
+              // `url` je vo formate `/vysledky/` alebo `/akcie/matboj/`
+              <MenuMainItem key={id} caption={caption} url={`/${seminar}${url}`} />
+            ))}
           </Stack>
-        )}
+          {hasPermissions && (
+            <Stack sx={{mt: 4, mx: 2, borderTop: '8px dashed white', pt: 4}}>
+              <MenuMainItem caption="TODO: Opravovanie" url={`/${seminar}/admin/opravovanie`} />
+              <MenuMainItem caption="Admin" url="/admin" />
+            </Stack>
+          )}
+        </Box>
         <Authentication />
-      </div>
+      </Stack>
     </>
   )
 }