Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update mobile menu #1010

Merged
merged 7 commits into from
Jan 2, 2024
Merged

Update mobile menu #1010

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
26c5e4c
Allows to forward props to Plus and Minus icon components
dtrucs Dec 29, 2023
6c069d2
Small improvments of BurgerMenuSection component
dtrucs Dec 29, 2023
eca3db8
Upgrade react-accessible-accordion package to 5.0.0
dtrucs Dec 29, 2023
4e8517e
Update BurgerMenu component following the upgrade of react-accessible…
dtrucs Dec 29, 2023
59c69b7
Move Burger menu in the header tag
dtrucs Dec 29, 2023
adf8632
Upgrade react-burger-menu package to 3.0.9
dtrucs Dec 29, 2023
d355a4d
Do not display language selector in mobile if there are no multilanguage
dtrucs Jan 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,8 @@
"postcss": "8.3.6",
"qs": "6.7.0",
"react": "^18.2.0",
"react-accessible-accordion": "3.3.5",
"react-burger-menu": "3.0.6",
"react-accessible-accordion": "^5.0.0",
"react-burger-menu": "^3.0.9",
"react-country-flag": "^3.0.2",
"react-dom": "^18.2.0",
"react-easyfullscreen": "^1.1.1",
Expand Down
13 changes: 8 additions & 5 deletions frontend/src/components/Header/BurgerMenu/BurgerMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// @ts-ignore Not official but useful to reduce bundle size

Check warning on line 1 in frontend/src/components/Header/BurgerMenu/BurgerMenu.tsx

View workflow job for this annotation

GitHub Actions / install-and-test 

Do not use "@ts-ignore" because it alters compilation errors
import Slide from 'react-burger-menu/lib/menus/slide';
import { MenuConfig, MenuItem } from 'modules/header/interface';
import { useIntl } from 'react-intl';
Expand Down Expand Up @@ -30,9 +30,10 @@
burgerButtonClassName={burgerButtonClassName}
burgerBarClassName="bg-white"
menuClassName="bg-white p-4"
// We use mt-2 because we can't easily override the default element style with tailwind (default is top: 8 and we would like top: 16)
crossButtonClassName="left-4 mt-2"
crossClassName="bg-greyDarkColored"
overlayClassName="top-0"
className="top-0"
>
<span
id="verticalMenu_title"
Expand All @@ -46,10 +47,12 @@
{config.shouldDisplayFavorite && (
<BurgerMenuSection title={intl.formatMessage({ id: 'header.favorites' })} />
)}
<BurgerMenuSection
title={intl.formatMessage({ id: 'header.language' })}
languages={config.supportedLanguages}
/>
{config.supportedLanguages.length > 1 && (
<BurgerMenuSection
title={intl.formatMessage({ id: 'header.language' })}
languages={config.supportedLanguages}
/>
)}
<NextLink
className="flex items-center pt-4 pb-4 font-bold outline-none cursor-pointer border-b border-solid border-greySoft"
href={routes.SEARCH}
Expand Down
77 changes: 44 additions & 33 deletions frontend/src/components/Header/BurgerMenu/__tests__/BurgerMenu.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,48 @@ import { render } from 'services/testing/reactTestingLibraryWrapper';

import { BurgerMenu } from '../';

test('AAU, I can see a BurgerMenu', () => {
const component = render(
<BurgerMenu
displayState="DISPLAYED"
config={{
primaryItemsNumber: 3,
shouldDisplayFavorite: true,
supportedLanguages: ['fr'],
defaultLanguage: 'fr',
}}
menuItems={[
{
title: 'NationalPark',
url: 'https://www.ecrins-parcnational.fr/',
order: 1,
id: 2,
},
{
title: 'Maisons du Parc',
url: 'https://www.ecrins-parcnational.fr/',
order: 2,
id: 1,
},
{
title: 'Informations utiles',
url: 'https://www.ecrins-parcnational.fr/',
order: 3,
id: 3,
},
]}
/>,
);
expect(component).toMatchSnapshot();
describe('AAU, I can see a BurgerMenu', () => {
const props = {
config: {
primaryItemsNumber: 3,
shouldDisplayFavorite: true,
supportedLanguages: ['fr', 'en'],
defaultLanguage: 'fr',
},
menuItems: [
{
title: 'NationalPark',
url: 'https://www.ecrins-parcnational.fr/',
order: 1,
id: 2,
},
{
title: 'Maisons du Parc',
url: 'https://www.ecrins-parcnational.fr/',
order: 2,
id: 1,
},
{
title: 'Informations utiles',
url: 'https://www.ecrins-parcnational.fr/',
order: 3,
id: 3,
},
],
};
it('with several languages', () => {
const component = render(<BurgerMenu displayState="DISPLAYED" {...props} />);
expect(component).toMatchSnapshot();
});

it('with only one language', () => {
const component = render(
<BurgerMenu
displayState="DISPLAYED"
{...props}
config={{ ...props.config, supportedLanguages: ['fr'] }}
/>,
);
expect(component).toMatchSnapshot();
});
});
Loading
Loading