Ajoute le menu

site/source/components/layout/Header.tsx

@@ -12,6 +12,7 @@ import { useDarkMode } from '@/hooks/useDarkMode'
 import { useGetFullURL } from '@/hooks/useGetFullURL'
 import { useSitePaths } from '@/sitePaths'
 
+import { Menu } from './Menu'
 import NewsBanner from './NewsBanner'
 
 export default function Header() {
@@ -19,10 +20,7 @@ export default function Header() {
 
 	const fullURL = useGetFullURL()
 
-	const {
-		i18n: { language },
-		t,
-	} = useTranslation()
+	const { i18n, t } = useTranslation()
 
 	const [darkMode, setDarkMode] = useDarkMode()
 
@@ -41,11 +39,9 @@ export default function Header() {
 							<Logo />
 						</StyledLogo>
 					</Link>
-					<div
-						css={`
-							flex: 1;
-						`}
-					/>
+
+					<div style={{ flex: 1 }} />
+
 					<div
 						style={{
 							display: 'flex',
@@ -67,9 +63,11 @@ export default function Header() {
 						<Emoji emoji="🌙" aria-hidden />
 					</div>
 
-					{language === 'fr' && <SearchButton />}
+					{i18n.language === 'fr' && <SearchButton />}
+
+					<Menu />
 				</StyledHeader>
-				<BrowserOnly>{language === 'fr' && <NewsBanner />}</BrowserOnly>
+				<BrowserOnly>{i18n.language === 'fr' && <NewsBanner />}</BrowserOnly>
 			</Container>
 		</header>
 	)

site/source/components/layout/Menu.tsx

@@ -0,0 +1,89 @@
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+import { Button } from '@/design-system/buttons'
+import { Drawer } from '@/design-system/drawer'
+import { Li, Ul } from '@/design-system/typography/list'
+import { PlanContent } from '@/pages/Plan'
+
+export const Menu = () => {
+	const { t } = useTranslation()
+
+	return (
+		<Drawer
+			trigger={(buttonProps) => (
+				<div
+					style={{
+						display: 'flex',
+						alignItems: 'end',
+					}}
+				>
+					<StyledButton
+						size="XS"
+						className="print-hidden"
+						light
+						// eslint-disable-next-line react/jsx-props-no-spreading
+						{...buttonProps}
+						aria-haspopup="menu"
+						aria-label={t(
+							'Rechercher, ouvrir la boite de dialogue pour entrer vos termes de recherche.'
+						)}
+					>
+						<StyledSVG
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 96 960 960"
+							height="25"
+							width="25"
+							aria-hidden
+							role="img"
+						>
+							<path d="M120 816v-60h720v60H120Zm0-210v-60h720v60H120Zm0-210v-60h720v60H120Z" />
+						</StyledSVG>{' '}
+						Menu
+					</StyledButton>
+				</div>
+			)}
+		>
+			<Nav>
+				<StyledUl noMarker>
+					<PlanContent />
+				</StyledUl>
+			</Nav>
+		</Drawer>
+	)
+}
+
+const StyledButton = styled(Button)`
+	display: flex;
+	flex: 0;
+	align-items: center;
+	margin-right: ${({ theme }) => theme.spacings.md};
+`
+
+const StyledSVG = styled.svg`
+	margin-right: ${({ theme }) => theme.spacings.xs};
+	path {
+		fill: currentColor;
+	}
+`
+
+const Nav = styled.nav`
+	display: flex;
+	flex-direction: column;
+	margin: 0 -${({ theme }) => theme.spacings.xxl};
+`
+
+const StyledUl = styled(Ul)`
+	${Li} {
+		padding: 0 ${({ theme }) => theme.spacings.sm};
+		margin-bottom: ${({ theme }) => theme.spacings.md};
+
+		${Ul} {
+			margin-top: ${({ theme }) => theme.spacings.md};
+		}
+
+		${Li} {
+			padding: 0 ${({ theme }) => theme.spacings.xl};
+		}
+	}
+`