Update mobile nav menu styles (#1237)

* Fix shrink effect on mobile nav menu * Add podkrepi logo on open mobile menu * Align spacings * Fix auth links * Fix arrow icon fontSize
podkrepi-bg · Dec 7, 2022 · 290e2c1 · 290e2c1
1 parent 01749ae
commit 290e2c1
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 26 deletions.
diff --git a/src/components/layout/AppNavBar.tsx b/src/components/layout/AppNavBar.tsx
@@ -31,14 +31,18 @@ export default function AppNavBar({ navMenuToggle }: AppBarDeckProps) {
         overflow: 'hidden',
         transition: 'height .5s, background-color .5s ease 0s',
         height: theme.spacing(11),
-        [theme.breakpoints.down('md')]: {
+        [theme.breakpoints.down('sm')]: {
           height: theme.spacing(8),
         },
         '&.shrink': {
           height: theme.spacing(8),
           lineHeight: theme.spacing(8),
           backgroundColor: 'hsla(0,0%,100%,0.85)',
           backdropFilter: 'saturate(180%) blur(5px)',
+
+          [theme.breakpoints.down('sm')]: {
+            height: theme.spacing(7),
+          },
         },
         backgroundColor: theme.palette.common.white,
       })}>
@@ -47,6 +51,7 @@ export default function AppNavBar({ navMenuToggle }: AppBarDeckProps) {
           height: '100%',
           display: 'flex',
           justifyContent: 'space-between',
+          padding: 0,
         }}>
         <Link href={routes.index} passHref>
           <ButtonBase
@@ -64,9 +69,6 @@ export default function AppNavBar({ navMenuToggle }: AppBarDeckProps) {
                 width: '100%',
                 height: theme.spacing(5),
               },
-              '&.shrink': {
-                height: '50%',
-              },
               '& > svg': {
                 display: 'block',
                 height: '100%',

diff --git a/src/components/layout/nav/AuthLinks/AuthLinks.styled.tsx b/src/components/layout/nav/AuthLinks/AuthLinks.styled.tsx
@@ -8,25 +8,28 @@ export const AuthLinksWrapper = styled(Box)(() => ({
   display: 'flex',
   alignItems: 'center',
   borderTop: '2px solid lightgrey',
-  marginLeft: theme.spacing(0.25),
-  minHeight: theme.spacing(8),
   paddingLeft: theme.spacing(1),
+  minHeight: theme.spacing(8),
 }))
 
 export const AuthLink = styled(LinkButton)(() => ({
   color: theme.palette.common.black,
+  display: 'contents',
+  textAlign: 'start',
+  padding: 0,
 }))
 
 export const SlashSymbol = styled('span')(() => ({
   display: 'flex',
   alignItems: 'center',
+  padding: theme.spacing(0, 1.5),
 }))
 
-export const ProfileLogOut = styled(LinkButton)(() => ({
+export const StyledAuthButton = styled(LinkButton)(() => ({
   justifyContent: 'left',
   fontWeight: 500,
   minHeight: theme.spacing(8),
-  padding: theme.spacing(0, 2),
+  padding: theme.spacing(0, 1),
   borderTop: '2px solid lightgrey',
   borderRadius: 0,
   color: theme.palette.common.black,

diff --git a/src/components/layout/nav/AuthLinks/AuthLinks.tsx b/src/components/layout/nav/AuthLinks/AuthLinks.tsx
@@ -3,11 +3,11 @@ import React from 'react'
 import { useTranslation } from 'next-i18next'
 import { useSession } from 'next-auth/react'
 
-import { Grid, Button } from '@mui/material'
+import { Grid } from '@mui/material'
 import { isAdmin } from 'common/util/roles'
 import { routes } from 'common/routes'
 
-import { AuthLink, AuthLinksWrapper, ProfileLogOut, SlashSymbol } from './AuthLinks.styled'
+import { AuthLink, AuthLinksWrapper, StyledAuthButton, SlashSymbol } from './AuthLinks.styled'
 
 export const AuthLinks = () => {
   const { t } = useTranslation()
@@ -18,21 +18,21 @@ export const AuthLinks = () => {
     return (
       <>
         <Grid item>
-          <ProfileLogOut fullWidth href={routes.profile.index}>
+          <StyledAuthButton fullWidth href={routes.profile.index}>
             {t('nav.profile')}
-          </ProfileLogOut>
+          </StyledAuthButton>
         </Grid>
         {status === 'authenticated' && isAdmin(session) && (
           <Grid item>
-            <Button fullWidth href={routes.admin.index}>
+            <StyledAuthButton fullWidth href={routes.admin.index}>
               {t('nav.admin.index')}
-            </Button>
+            </StyledAuthButton>
           </Grid>
         )}
         <Grid item>
-          <ProfileLogOut fullWidth href={routes.logout}>
+          <StyledAuthButton fullWidth href={routes.logout}>
             {t('nav.logout')}
-          </ProfileLogOut>
+          </StyledAuthButton>
         </Grid>
       </>
     )

diff --git a/src/components/layout/nav/DonationMenuMobile.tsx b/src/components/layout/nav/DonationMenuMobile.tsx
@@ -26,7 +26,7 @@ const StyledAccordion = styled(Accordion)(({ theme }) => ({
   [`& .${classes.accordionSummary}`]: {
     fontWeight: 500,
     minHeight: theme.spacing(8),
-    padding: theme.spacing(0, 3),
+    padding: theme.spacing(0, 1),
   },
 
   [`& .${classes.menuItem}`]: {

diff --git a/src/components/layout/nav/MobileNav/MobileNav.styled.tsx b/src/components/layout/nav/MobileNav/MobileNav.styled.tsx
@@ -7,19 +7,20 @@ import Grid from 'components/recurring-donation/grid/Grid'
 import LinkButton from 'components/common/LinkButton'
 
 export const CloseButton = styled(CloseModalButton)(() => ({
-  marginRight: theme.spacing(1.25),
-  right: theme.spacing(1.25),
+  right: theme.spacing(0.5),
   top: theme.spacing(0.25),
 }))
 
 export const OpenMenuHeader = styled(Box)(() => ({
-  margin: theme.spacing(0.5, 3, 2),
+  margin: theme.spacing(0.5, 0, 1.5),
+  height: theme.spacing(5),
+  display: 'flex',
 }))
 
 export const NavMenuWrapper = styled(Box)(() => ({
   display: 'flex',
   justifyContent: 'center',
-  padding: theme.spacing(2),
+  padding: theme.spacing(1, 2),
   flexDirection: 'column',
 }))
 
@@ -42,11 +43,11 @@ export const LocaleButtonWrapper = styled(Box)(() => ({
   borderBottom: '2px solid lightgrey',
   display: 'flex',
   minHeight: theme.spacing(8),
-  paddingLeft: theme.spacing(1),
 
   '& button': {
     justifyContent: 'start',
-    marginLeft: theme.spacing(1.3),
+    marginLeft: theme.spacing(1),
+    padding: 0,
     fontSize: theme.typography.pxToRem(14),
   },
 }))
diff --git a/src/components/layout/nav/MobileNav/MobileNav.tsx b/src/components/layout/nav/MobileNav/MobileNav.tsx
@@ -7,12 +7,12 @@ import Link from 'next/link'
 import { SwipeableDrawer, Hidden, Grid } from '@mui/material'
 import FavoriteIcon from '@mui/icons-material/Favorite'
 
+import PodkrepiLogo from 'components/brand/PodkrepiLogo'
 import LocaleButton from '../../LocaleButton'
 import DonationMenuMobile from '../DonationMenuMobile'
 import ProjectMenuMobile from '../ProjectMenuMobile'
 import { AuthLinks } from '../AuthLinks/AuthLinks'
 import { routes } from 'common/routes'
-import PodkrepiIcon from 'components/brand/PodkrepiIcon'
 
 import {
   CloseButton,
@@ -31,6 +31,7 @@ export default function MobileNav({ mobileOpen, setMobileOpen }: NavDeckProps) {
   const { t } = useTranslation()
 
   const router = useRouter()
+  const { locale } = useRouter()
   const closeNavMenu = () => setMobileOpen(false)
 
   // Register route change event handlers
@@ -54,7 +55,7 @@ export default function MobileNav({ mobileOpen, setMobileOpen }: NavDeckProps) {
         <NavMenuWrapper>
           <OpenMenuHeader>
             <Link href={routes.index} passHref>
-              <PodkrepiIcon />
+              <PodkrepiLogo locale={locale} variant="adaptive" />
             </Link>
             <CloseButton edge="end" fontSize="large" onClose={closeNavMenu} />
           </OpenMenuHeader>

diff --git a/src/components/layout/nav/ProjectMenuMobile.tsx b/src/components/layout/nav/ProjectMenuMobile.tsx
@@ -26,7 +26,7 @@ const StyledAccordion = styled(Accordion)(({ theme }) => ({
   [`& .${classes.accordionSummary}`]: {
     fontWeight: 500,
     minHeight: theme.spacing(8),
-    padding: theme.spacing(0, 3),
+    padding: theme.spacing(0, 1),
   },
 
   [`& .${classes.menuItem}`]: {