From fca01e749eb9a45cfd3d946de6ac3011d37e6c1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vikt=C3=B3ria=20Brezinov=C3=A1?= <vikibrezinova@gmail.com>
Date: Sat, 9 Dec 2023 14:14:41 +0100
Subject: [PATCH 1/2] add scrollbar to menu

---
 .../PageLayout/Authentication/Authentication.module.scss         | 1 -
 src/components/PageLayout/MenuMain/MenuMain.module.scss          | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PageLayout/Authentication/Authentication.module.scss b/src/components/PageLayout/Authentication/Authentication.module.scss
index c7a4c825..671cd9d9 100644
--- a/src/components/PageLayout/Authentication/Authentication.module.scss
+++ b/src/components/PageLayout/Authentication/Authentication.module.scss
@@ -1,5 +1,4 @@
 .authenticationDisplayButtons {
-  position: absolute;
   left: 0px;
   bottom: 0px;
   width: 100%;
diff --git a/src/components/PageLayout/MenuMain/MenuMain.module.scss b/src/components/PageLayout/MenuMain/MenuMain.module.scss
index af220445..34711edf 100644
--- a/src/components/PageLayout/MenuMain/MenuMain.module.scss
+++ b/src/components/PageLayout/MenuMain/MenuMain.module.scss
@@ -6,6 +6,7 @@
   background-color: black;
   transition: 750ms;
   z-index: 100;
+  overflow-y: auto;
 
   &.visible {
     left: 0;

From b4f8045d4b64d658ab7aeb7730e83c9e31d8dec2 Mon Sep 17 00:00:00 2001
From: rtrembecky <rtrembecky@gmail.com>
Date: Sat, 9 Dec 2023 18:14:19 +0100
Subject: [PATCH 2/2] refactor Menu to 100%-high Stack with overflow with
 Authentication pushed to bottom by flexGrow=1

---
 .../Authentication/Authentication.module.scss |  4 +-
 .../PageLayout/MenuMain/MenuMain.module.scss  | 16 -----
 .../MenuMain/MenuMain.module.scss.d.ts        |  2 -
 .../PageLayout/MenuMain/MenuMain.tsx          | 58 ++++++++++++-------
 4 files changed, 39 insertions(+), 41 deletions(-)

diff --git a/src/components/PageLayout/Authentication/Authentication.module.scss b/src/components/PageLayout/Authentication/Authentication.module.scss
index 671cd9d9..3a108549 100644
--- a/src/components/PageLayout/Authentication/Authentication.module.scss
+++ b/src/components/PageLayout/Authentication/Authentication.module.scss
@@ -1,7 +1,5 @@
 .authenticationDisplayButtons {
-  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
index 34711edf..d01513f4 100644
--- a/src/components/PageLayout/MenuMain/MenuMain.module.scss
+++ b/src/components/PageLayout/MenuMain/MenuMain.module.scss
@@ -1,19 +1,3 @@
-.menu {
-  position: fixed;
-  width: 25%;
-  height: 100vh;
-  top: -100%;
-  background-color: black;
-  transition: 750ms;
-  z-index: 100;
-  overflow-y: auto;
-
-  &.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
index e1d46efd..c52cdc4e 100644
--- 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
index e5c53e84..c842ee27 100644
--- 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>
     </>
   )
 }