From b4ec1d4556369b6beedbe3babe2b66f2357745af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Rialland?= <wiinxt@gmail.com>
Date: Thu, 27 Apr 2023 14:42:57 +0200
Subject: [PATCH] Ajoute le menu

---
 site/source/components/layout/Header.tsx | 20 +++---
 site/source/components/layout/Menu.tsx   | 89 ++++++++++++++++++++++++
 2 files changed, 98 insertions(+), 11 deletions(-)
 create mode 100644 site/source/components/layout/Menu.tsx

diff --git a/site/source/components/layout/Header.tsx b/site/source/components/layout/Header.tsx
index ad928650a..a710a4ac7 100644
--- a/site/source/components/layout/Header.tsx
+++ b/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>
 	)
diff --git a/site/source/components/layout/Menu.tsx b/site/source/components/layout/Menu.tsx
new file mode 100644
index 000000000..b407b5341
--- /dev/null
+++ b/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};
+		}
+	}
+`