diff --git a/src/components/layout/AppNavBar.tsx b/src/components/layout/AppNavBar.tsx index cee8a4d8d..47fb726e7 100644 --- a/src/components/layout/AppNavBar.tsx +++ b/src/components/layout/AppNavBar.tsx @@ -31,7 +31,7 @@ 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': { @@ -39,6 +39,10 @@ export default function AppNavBar({ navMenuToggle }: AppBarDeckProps) { 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, }}> 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 index 8ec29aee0..e28e4c93c 100644 --- 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 index 57a7b0151..c11e727e8 100644 --- 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 ( <> - + {t('nav.profile')} - + {status === 'authenticated' && isAdmin(session) && ( - + )} - + {t('nav.logout')} - + ) diff --git a/src/components/layout/nav/DonationMenuMobile.tsx b/src/components/layout/nav/DonationMenuMobile.tsx index 728d46ce9..20eb9747b 100644 --- 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 index 1ebd243ae..d873a597d 100644 --- 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 index e8d6a91b5..099171729 100644 --- 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) { - + diff --git a/src/components/layout/nav/ProjectMenuMobile.tsx b/src/components/layout/nav/ProjectMenuMobile.tsx index d81a2c67a..de204005c 100644 --- 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}`]: {