From 4f6f31597f4ef602124141c5f261a7f71e664c42 Mon Sep 17 00:00:00 2001 From: Valentin Kirilov Date: Sun, 20 Nov 2022 15:37:30 +0200 Subject: [PATCH] Fix visual issue with Menu items in the MainNav (#1121) * Fix visual issue with Menu items in the MainNav - increase the spacing between the Button and the opened dropdown with the Menu items so they don't interfere with the border of the "Donate" button in the MainNav References: #1016 * Refactoring of the GenericMenu component - chage the way we set the spacing between the `Button` and the `Menu` dropdown list to use `PaperProps` instead of wrapping it behind a `styled` component. It's simpler now. - rename the `GenericMenu` component to `GenericNavMenu` so it will distinguish its purpose way more clearly - fix the `id` attribute to be properly set via an input prop instead of using always the default wrong `menu-donation` for all items of this type --- src/components/layout/nav/DevelopmentMenu.tsx | 8 ++++---- src/components/layout/nav/DonationMenu.tsx | 8 ++++---- .../nav/{GenericMenu.tsx => GenericNavMenu.tsx} | 12 +++++++----- src/components/layout/nav/ProjectMenu.tsx | 8 ++++---- 4 files changed, 19 insertions(+), 17 deletions(-) rename src/components/layout/nav/{GenericMenu.tsx => GenericNavMenu.tsx} (85%) diff --git a/src/components/layout/nav/DevelopmentMenu.tsx b/src/components/layout/nav/DevelopmentMenu.tsx index 050aceb37..82dc124df 100644 --- a/src/components/layout/nav/DevelopmentMenu.tsx +++ b/src/components/layout/nav/DevelopmentMenu.tsx @@ -6,7 +6,7 @@ import { useTranslation } from 'next-i18next' import { staticUrls } from 'common/routes' -import GenericMenu from './GenericMenu' +import GenericNavMenu from './GenericNavMenu' import ExternalLinkMenuItem from 'components/common/ExternalLinkMenuItem' const PREFIX = 'DevelopmentMenu' @@ -16,7 +16,7 @@ const classes = { dropdownLinkText: `${PREFIX}-dropdownLinkText`, } -const StyledGenericMenu = styled(GenericMenu)(({ theme }) => ({ +const StyledGenericNavMenu = styled(GenericNavMenu)(({ theme }) => ({ [`& .${classes.dropdownLinkButton}`]: { '&:hover': { backgroundColor: lighten(theme.palette.primary.main, 0.9), @@ -69,7 +69,7 @@ export default function DevelopmentMenu() { const router = useRouter() return ( - + {navItems.map(({ href, label, target }, key) => ( ))} - + ) } diff --git a/src/components/layout/nav/DonationMenu.tsx b/src/components/layout/nav/DonationMenu.tsx index 59f6fd6f4..fdb8b4ee4 100644 --- a/src/components/layout/nav/DonationMenu.tsx +++ b/src/components/layout/nav/DonationMenu.tsx @@ -7,7 +7,7 @@ import { useTranslation } from 'next-i18next' import { routes } from 'common/routes' import LinkMenuItem from 'components/common/LinkMenuItem' -import GenericMenu from './GenericMenu' +import GenericNavMenu from './GenericNavMenu' const PREFIX = 'DonationMenu' @@ -16,7 +16,7 @@ const classes = { dropdownLinkText: `${PREFIX}-dropdownLinkText`, } -const StyledGenericMenu = styled(GenericMenu)(({ theme }) => ({ +const StyledGenericNavMenu = styled(GenericNavMenu)(({ theme }) => ({ [`& .${classes.dropdownLinkButton}`]: { '&:hover': { backgroundColor: lighten(theme.palette.primary.main, 0.9), @@ -51,7 +51,7 @@ export default function DonationMenu() { const { t } = useTranslation() const router = useRouter() return ( - + {navItems.map(({ href, label }, key) => ( ))} - + ) } diff --git a/src/components/layout/nav/GenericMenu.tsx b/src/components/layout/nav/GenericNavMenu.tsx similarity index 85% rename from src/components/layout/nav/GenericMenu.tsx rename to src/components/layout/nav/GenericNavMenu.tsx index 97199c297..ffe8dcd57 100644 --- a/src/components/layout/nav/GenericMenu.tsx +++ b/src/components/layout/nav/GenericNavMenu.tsx @@ -4,11 +4,12 @@ import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown' import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp' type Props = { + id: string label: string children: React.ReactNode } -export default function GenericMenu({ label, children }: Props) { +export default function GenericNavMenu({ id, label, children }: Props) { const [anchorEl, setAnchorEl] = useState(null) const open = Boolean(anchorEl) @@ -28,15 +29,16 @@ export default function GenericMenu({ label, children }: Props) { {label} + transformOrigin={{ vertical: 'top', horizontal: 'right' }} + PaperProps={{ sx: { mt: 1 } }}> {children} diff --git a/src/components/layout/nav/ProjectMenu.tsx b/src/components/layout/nav/ProjectMenu.tsx index b6d58b7f4..10d7f3dec 100644 --- a/src/components/layout/nav/ProjectMenu.tsx +++ b/src/components/layout/nav/ProjectMenu.tsx @@ -6,7 +6,7 @@ import { useTranslation } from 'next-i18next' import { routes, staticUrls } from 'common/routes' -import GenericMenu from './GenericMenu' +import GenericNavMenu from './GenericNavMenu' import ExternalLinkMenuItem from 'components/common/ExternalLinkMenuItem' import LinkMenuItem from 'components/common/LinkMenuItem' @@ -17,7 +17,7 @@ const classes = { dropdownLinkText: `${PREFIX}-dropdownLinkText`, } -const StyledGenericMenu = styled(GenericMenu)(({ theme }) => ({ +const StyledGenericNavMenu = styled(GenericNavMenu)(({ theme }) => ({ [`& .${classes.dropdownLinkButton}`]: { '&:hover': { backgroundColor: lighten(theme.palette.primary.main, 0.9), @@ -87,7 +87,7 @@ export default function ProjectMenu() { const router = useRouter() return ( - + {navItems.map(({ href, label, target }, key) => target ? ( ), )} - + ) }