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}`]: {