Skip to content

Commit

Permalink
Close the mobile menu when a link inside is clicked
Browse files Browse the repository at this point in the history
  • Loading branch information
@dtrucs
dtrucs committed Jun 5, 2024
1 parent ca2203a commit 7e1e153
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 30 deletions.
35 changes: 30 additions & 5 deletions frontend/src/components/Header/BurgerMenu/BurgerMenu.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useMemo } from 'react';
import { useMemo, useState } from 'react';
// @ts-expect-error Not official but useful to reduce bundle size
import Slide from 'react-burger-menu/lib/menus/slide';
import { MenuConfig } from 'modules/header/interface';
Expand Down Expand Up @@ -30,6 +30,12 @@ export const BurgerMenu: React.FC<Props> = ({
className,
);

const [isMenuOpen, handleMenu] = useState(false);

const handleCloseMenu = () => {
handleMenu(false);
};

const intl = useIntl();
const menuItemLinkClassNames =
'flex items-center pt-4 pb-4 font-bold outline-none border-b border-solid border-greySoft hover:text-primary3 focus:text-primary3';
Expand Down Expand Up @@ -69,6 +75,8 @@ export const BurgerMenu: React.FC<Props> = ({
crossClassName="bg-greyDarkColored"
overlayClassName="top-0"
className="top-0"
isOpen={isMenuOpen}
onStateChange={({ isOpen }: { isOpen: boolean }) => handleMenu(isOpen)}
>
<span
id="verticalMenu_title"
Expand All @@ -80,32 +88,49 @@ export const BurgerMenu: React.FC<Props> = ({
if (!item.children?.length) {
if (item.url) {
return (
<NextLink key={index} className={menuItemLinkClassNames} href={item.url}>
<NextLink
key={index}
className={menuItemLinkClassNames}
href={item.url}
onClick={handleCloseMenu}
>
{item.title}
</NextLink>
);
}
return null;
}
return <BurgerMenuSection key={index} title={item.title} items={item.children} />;
return (
<BurgerMenuSection
key={index}
title={item.title}
items={item.children}
handleCloseMenu={handleCloseMenu}
/>
);
})}
{config.shouldDisplayFavorite && (
<BurgerMenuSection title={intl.formatMessage({ id: 'header.favorites' })} />
<BurgerMenuSection
title={intl.formatMessage({ id: 'header.favorites' })}
handleCloseMenu={handleCloseMenu}
/>
)}
{config.supportedLanguages.length > 1 && (
<BurgerMenuSection
title={intl.formatMessage({ id: 'header.language' })}
languages={config.supportedLanguages}
handleCloseMenu={handleCloseMenu}
/>
)}
<NextLink className={menuItemLinkClassNames} href={routes.SEARCH}>
<NextLink className={menuItemLinkClassNames} href={routes.SEARCH} onClick={handleCloseMenu}>
{intl.formatMessage({ id: 'header.goToSearch' })}
</NextLink>
<NextLink
className={menuItemLinkClassNames}
href={routes.OFFLINE}
prefetch={false}
rel="nofollow"
onClick={handleCloseMenu}
>
{intl.formatMessage({ id: 'header.offline' })}
</NextLink>
Expand Down
32 changes: 16 additions & 16 deletions frontend/src/components/Header/BurgerMenu/__tests__/__snapshots__/BurgerMenu.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ Object {
class="text-Mobile-C2 m-3"
>
<a
class="flex"
class="flex hover:text-primary3 focus:text-primary3 transition"
href="https://www.ecrins-parcnational.fr/"
rel="noopener noreferrer"
target="_blank"
Expand Down Expand Up @@ -157,7 +157,7 @@ Object {
class="text-Mobile-C2 m-3"
>
<a
class="flex"
class="flex hover:text-primary3 focus:text-primary3 transition"
href="https://www.ecrins-parcnational.fr/"
rel="noopener noreferrer"
target="_blank"
Expand Down Expand Up @@ -197,7 +197,7 @@ Object {
class="text-Mobile-C2 m-3"
>
<a
class="flex"
class="flex hover:text-primary3 focus:text-primary3 transition"
href="https://www.ecrins-parcnational.fr/"
rel="noopener noreferrer"
target="_blank"
Expand Down Expand Up @@ -408,7 +408,7 @@ Object {
class="text-Mobile-C2 m-3"
>
<a
class="flex"
class="flex hover:text-primary3 focus:text-primary3 transition"
href="https://www.ecrins-parcnational.fr/"
rel="noopener noreferrer"
target="_blank"
Expand Down Expand Up @@ -448,7 +448,7 @@ Object {
class="text-Mobile-C2 m-3"
>
<a
class="flex"
class="flex hover:text-primary3 focus:text-primary3 transition"
href="https://www.ecrins-parcnational.fr/"
rel="noopener noreferrer"
target="_blank"
Expand Down Expand Up @@ -488,7 +488,7 @@ Object {
class="text-Mobile-C2 m-3"
>
<a
class="flex"
class="flex hover:text-primary3 focus:text-primary3 transition"
href="https://www.ecrins-parcnational.fr/"
rel="noopener noreferrer"
target="_blank"
Expand Down Expand Up @@ -756,7 +756,7 @@ Object {
class="text-Mobile-C2 m-3"
>
<a
class="flex"
class="flex hover:text-primary3 focus:text-primary3 transition"
href="https://www.ecrins-parcnational.fr/"
rel="noopener noreferrer"
target="_blank"
Expand Down Expand Up @@ -796,7 +796,7 @@ Object {
class="text-Mobile-C2 m-3"
>
<a
class="flex"
class="flex hover:text-primary3 focus:text-primary3 transition"
href="https://www.ecrins-parcnational.fr/"
rel="noopener noreferrer"
target="_blank"
Expand Down Expand Up @@ -836,7 +836,7 @@ Object {
class="text-Mobile-C2 m-3"
>
<a
class="flex"
class="flex hover:text-primary3 focus:text-primary3 transition"
href="https://www.ecrins-parcnational.fr/"
rel="noopener noreferrer"
target="_blank"
Expand Down Expand Up @@ -934,13 +934,13 @@ Object {
id="accordion__panel-:r1:"
>
<a
class="hover:text-primary3 focus:text-primary3 transition-colors block text-Mobile-C2 py-2 text-greyDarkColored"
class="block text-Mobile-C2 py-2 text-greyDarkColored hover:text-primary3 focus:text-primary3 transition"
href="/"
>
FR
</a>
<a
class="hover:text-primary3 focus:text-primary3 transition-colors block text-Mobile-C2 py-2 text-greyDarkColored"
class="block text-Mobile-C2 py-2 text-greyDarkColored hover:text-primary3 focus:text-primary3 transition"
href="/"
>
EN
Expand Down Expand Up @@ -1115,7 +1115,7 @@ Object {
class="text-Mobile-C2 m-3"
>
<a
class="flex"
class="flex hover:text-primary3 focus:text-primary3 transition"
href="https://www.ecrins-parcnational.fr/"
rel="noopener noreferrer"
target="_blank"
Expand Down Expand Up @@ -1155,7 +1155,7 @@ Object {
class="text-Mobile-C2 m-3"
>
<a
class="flex"
class="flex hover:text-primary3 focus:text-primary3 transition"
href="https://www.ecrins-parcnational.fr/"
rel="noopener noreferrer"
target="_blank"
Expand Down Expand Up @@ -1195,7 +1195,7 @@ Object {
class="text-Mobile-C2 m-3"
>
<a
class="flex"
class="flex hover:text-primary3 focus:text-primary3 transition"
href="https://www.ecrins-parcnational.fr/"
rel="noopener noreferrer"
target="_blank"
Expand Down Expand Up @@ -1293,13 +1293,13 @@ Object {
id="accordion__panel-:r1:"
>
<a
class="hover:text-primary3 focus:text-primary3 transition-colors block text-Mobile-C2 py-2 text-greyDarkColored"
class="block text-Mobile-C2 py-2 text-greyDarkColored hover:text-primary3 focus:text-primary3 transition"
href="/"
>
FR
</a>
<a
class="hover:text-primary3 focus:text-primary3 transition-colors block text-Mobile-C2 py-2 text-greyDarkColored"
class="block text-Mobile-C2 py-2 text-greyDarkColored hover:text-primary3 focus:text-primary3 transition"
href="/"
>
EN
Expand Down
30 changes: 21 additions & 9 deletions frontend/src/components/Header/BurgerMenuSection/BurgerMenuSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@ import {
AccordionItemPanel,
} from 'react-accessible-accordion';
import { MenuItem } from 'modules/menuItems/interface';
import NextLink from 'next/link';
import { Link } from 'components/Link';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { cn } from 'services/utils/cn';
import Image from 'next/image';
Expand All @@ -22,9 +21,15 @@ export interface Props {
title: string;
items?: Array<MenuItem>;
languages?: string[];
handleCloseMenu: () => void;
}

export const BurgerMenuSection: React.FC<Props> = ({ title, items, languages }) => {
export const BurgerMenuSection: React.FC<Props> = ({
title,
items,
languages,
handleCloseMenu,
}) => {
const router = useRouter();
const classNameTitle = 'flex items-center pt-4 pb-4 font-bold';
const classNameBorder = 'border-b border-solid border-greySoft';
Expand All @@ -49,16 +54,19 @@ export const BurgerMenuSection: React.FC<Props> = ({ title, items, languages })
<AccordionItemPanel className={cn(openState === 'OPENED' && 'pb-2')}>
{items
?.sort((a, b) => (a.thumbnail ? 1 : -1) - (b.thumbnail ? 1 : -1))
.map((item, index) => <MobileMenuItem key={index} {...item} />)}
.map((item, index) => (
<MobileMenuItem key={index} handleCloseMenu={handleCloseMenu} {...item} />
))}
{languages?.map(language => (
<Link
className="block text-Mobile-C2 py-2 text-greyDarkColored"
className="block text-Mobile-C2 py-2 text-greyDarkColored hover:text-primary3 focus:text-primary3 transition"
key={language}
href={{
pathname: router.pathname,
query: router.query,
}}
locale={language}
onClick={handleCloseMenu}
>
{language.toUpperCase()}
</Link>
Expand All @@ -76,11 +84,12 @@ const MobileMenuItem = ({
thumbnail,
children,
pictogram,
}: MenuItem) => {
handleCloseMenu,
}: MenuItem & { handleCloseMenu: () => void }) => {
const intl = useIntl();
const hasThumbnail = thumbnail !== null;
const href = url || undefined;
const Item = href ? NextLink : 'span';
const Item = href ? Link : 'span';
return (
<div className="text-Mobile-C2 m-3">
<Item
Expand All @@ -91,10 +100,11 @@ const MobileMenuItem = ({
rel: 'noopener noreferrer',
})}
className={cn(
'flex',
'flex hover:text-primary3 focus:text-primary3 transition',
hasThumbnail &&
"relative rounded-xl overflow-hidden group after:absolute after:inset-0 after:content-[''] after:bg-black/25",
)}
onClick={handleCloseMenu}
>
{hasThumbnail && (
<Image
Expand Down Expand Up @@ -126,7 +136,9 @@ const MobileMenuItem = ({
</Item>
{children
?.sort((a, b) => (a.thumbnail ? 1 : -1) - (b.thumbnail ? 1 : -1))
.map((child, childIndex) => <MobileMenuItem key={childIndex} {...child} />)}
.map((child, childIndex) => (
<MobileMenuItem key={childIndex} handleCloseMenu={handleCloseMenu} {...child} />
))}
</div>
);
};

0 comments on commit 7e1e153

Please sign in to comment.