Merge pull request #1038 from City-of-Helsinki/fix/mobile-menu

Fix/mobile menu
City-of-Helsinki · Oct 10, 2023 · 59bb1fa · 59bb1fa
2 parents b60b743 + 2018862
commit 59bb1fa
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/src/components/BottomNav/BottomNav.js b/src/components/BottomNav/BottomNav.js
@@ -3,7 +3,7 @@ import {
   AccountCircle, ArrowBack, Map, Settings,
 } from '@mui/icons-material';
 import {
-  BottomNavigation, BottomNavigationAction, Drawer, Paper,
+  BottomNavigation, BottomNavigationAction, Drawer, Paper, useMediaQuery,
 } from '@mui/material';
 import React, { useState } from 'react';
 import { useIntl } from 'react-intl';
@@ -19,6 +19,7 @@ const { bottomNavHeight } = config;
 const BottomNav = () => {
   const location = useLocation();
   const intl = useIntl();
+  const small = useMediaQuery('(max-width:477px)');
 
   const navigator = useSelector(state => state.navigator);
   const breadcrumb = useSelector(state => state.breadcrumb);
@@ -84,7 +85,6 @@ const BottomNav = () => {
     }
   };
 
-
   return (
     <>
       <StyledDrawer
@@ -126,20 +126,24 @@ const BottomNav = () => {
         <StyledPaper elevation={10}>
           <StyledBottomNavigation showLabels onChange={(event, newValue) => handleNav(newValue)}>
             <StyledBottomNavigationAction
+              small={+small}
               label={intl.formatMessage({ id: 'general.backTo' })}
               icon={<ArrowBack />}
             />
             <StyledBottomNavigationAction
+              small={+small}
               label={!mapPage || mapSettingsOpen
                 ? intl.formatMessage({ id: 'map.open' })
                 : intl.formatMessage({ id: 'map.close' })}
               icon={<Map />}
             />
             <StyledBottomNavigationAction
+              small={+small}
               label={intl.formatMessage({ id: 'general.ownSettings' })}
               icon={<AccountCircle />}
             />
             <StyledBottomNavigationAction
+              small={+small}
               label={intl.formatMessage({ id: 'general.tools' })}
               icon={<Settings />}
             />
@@ -169,9 +173,17 @@ const StyledBottomNavigation = styled(BottomNavigation)(() => ({
 }));
 
 
-const StyledBottomNavigationAction = styled(BottomNavigationAction)(() => ({
-  color: '#000',
-}));
+const StyledBottomNavigationAction = styled(BottomNavigationAction)(({ small }) => {
+  const styles = {
+    color: '#000',
+  };
+  if (small) {
+    Object.assign(styles, {
+      '& span': { height: '34px' },
+    });
+  }
+  return styles;
+});
 
 const StyledDiv = styled('div')(({ theme }) => ({
   paddingTop: theme.spacing(3),

diff --git a/src/components/TopBar/DrawerMenu/DrawerMenu.js b/src/components/TopBar/DrawerMenu/DrawerMenu.js
@@ -90,6 +90,7 @@ const DrawerMenu = (props) => {
       anchor="right"
       open={isOpen}
       classes={{ paper: pageType === 'mobile' ? drawerContainerMobileClass : drawerContainerClass }}
+      PaperProps={{ sx: { top: `${pageType === 'mobile' ? topBarHeightMobile : topBarHeight}px` } }}
     >
       <StyledScrollContainer>
         {/* Main links */}