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

@@ -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 (
-    <StyledGenericMenu label={t('nav.dev.index')}>
+    <StyledGenericNavMenu id="menu-development" label={t('nav.dev.index')}>
       {navItems.map(({ href, label, target }, key) => (
         <ExternalLinkMenuItem
           selected={router.asPath === href}
@@ -82,6 +82,6 @@ export default function DevelopmentMenu() {
           </Typography>
         </ExternalLinkMenuItem>
       ))}
-    </StyledGenericMenu>
+    </StyledGenericNavMenu>
   )
 }

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 (
-    <StyledGenericMenu label={t('nav.donation-menu')}>
+    <StyledGenericNavMenu id="menu-donation" label={t('nav.donation-menu')}>
       {navItems.map(({ href, label }, key) => (
         <LinkMenuItem
           href={href}
@@ -63,6 +63,6 @@ export default function DonationMenu() {
           </Typography>
         </LinkMenuItem>
       ))}
-    </StyledGenericMenu>
+    </StyledGenericNavMenu>
   )
 }

src/components/layout/nav/GenericMenu.tsx → 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<Element | null>(null)
   const open = Boolean(anchorEl)
 
@@ -28,15 +29,16 @@ export default function GenericMenu({ label, children }: Props) {
         {label}
       </Button>
       <Menu
-        disableScrollLock={true}
         keepMounted
-        id="menu-donation"
+        disableScrollLock
+        id={`main-nav-menu--${id}`}
         anchorEl={anchorEl}
-        elevation={6}
         onClose={handleClose}
         open={Boolean(anchorEl)}
+        elevation={6}
         anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-        transformOrigin={{ vertical: 'top', horizontal: 'right' }}>
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+        PaperProps={{ sx: { mt: 1 } }}>
         {children}
       </Menu>
     </>

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 (
-    <StyledGenericMenu label={t('nav.about.about-us')}>
+    <StyledGenericNavMenu id="menu-project" label={t('nav.about.about-us')}>
       {navItems.map(({ href, label, target }, key) =>
         target ? (
           <ExternalLinkMenuItem
@@ -112,6 +112,6 @@ export default function ProjectMenu() {
           </LinkMenuItem>
         ),
       )}
-    </StyledGenericMenu>
+    </StyledGenericNavMenu>
   )
 }