From 0df9ee80e5d406c32658c938f2fde6f8bd3572b2 Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Thu, 4 Feb 2021 14:16:00 +0100
Subject: [PATCH 1/3] Test menu vertical sur mobile

---
 App.js           | 94 ++++++++++++++++++++++++++----------------------
 Nav.js           | 43 ++++++++++------------
 pages/Accueil.js |  6 +++-
 3 files changed, 74 insertions(+), 69 deletions(-)

diff --git a/App.js b/App.js
index 8f6bea19..0471ff6f 100644
--- a/App.js
+++ b/App.js
@@ -39,49 +39,57 @@ const Container = () => (
 		<Router>
 			<Nav />
 
-			<Switch>
-				<Route path="/france">
-					<France />
-				</Route>
-				<Route path="/en/france">
-					<FranceEn />
-				</Route>
-				<Route path="/québec">
-					<Québec />
-				</Route>
-				<Route path="/en/québec">
-					<QuébecEn />
-				</Route>
-				<Route path="/sidewalks">
-					<Sidewalks />
-				</Route>
-				<Route path="/en/">
-					<AccueilEn />
-				</Route>
-				<Route path="/blog">
-					<Blog />
-				</Route>
-				{/* Pour la migration vers le nouveau site*/}
-				<UtmFriendlyRedirect from="/articles/:id" to="/blog/:id" />
-				<Route path="/communs">
-					<Communs />
-				</Route>
-				<Route path="/ecosystem">
-					<Ecosystem />
-				</Route>
-				<route path="/participer">
-					<Participer />
-				</route>
-				<route path="/a-propos">
-					<About />
-				</route>
-				<route path="/événements">
-					<Événéments />
-				</route>
-				<Route path="/">
-					<Accueil />
-				</Route>
-			</Switch>
+			<div
+				css={`
+					@media (max-width: 800px) {
+						width: 80%;
+					}
+				`}
+			>
+				<Switch>
+					<Route path="/france">
+						<France />
+					</Route>
+					<Route path="/en/france">
+						<FranceEn />
+					</Route>
+					<Route path="/québec">
+						<Québec />
+					</Route>
+					<Route path="/en/québec">
+						<QuébecEn />
+					</Route>
+					<Route path="/sidewalks">
+						<Sidewalks />
+					</Route>
+					<Route path="/en/">
+						<AccueilEn />
+					</Route>
+					<Route path="/blog">
+						<Blog />
+					</Route>
+					{/* Pour la migration vers le nouveau site*/}
+					<UtmFriendlyRedirect from="/articles/:id" to="/blog/:id" />
+					<Route path="/communs">
+						<Communs />
+					</Route>
+					<Route path="/ecosystem">
+						<Ecosystem />
+					</Route>
+					<route path="/participer">
+						<Participer />
+					</route>
+					<route path="/a-propos">
+						<About />
+					</route>
+					<route path="/événements">
+						<Événéments />
+					</route>
+					<Route path="/">
+						<Accueil />
+					</Route>
+				</Switch>
+			</div>
 		</Router>
 	</div>
 )
diff --git a/Nav.js b/Nav.js
index d2ead5f9..6e2e6ae4 100644
--- a/Nav.js
+++ b/Nav.js
@@ -7,7 +7,6 @@ import { useLocation } from 'react-router-dom'
 
 export default () => {
 	let location = useLocation()
-	const [open, setOpen] = useState(false)
 	return (
 		<nav
 			css={`
@@ -15,8 +14,10 @@ export default () => {
 				margin: 0 auto;
 				width: 100%;
 				padding: 0.6rem 0;
-				box-shadow: var(--box-shadow) var(--color-bg-secondary);
-				border-bottom: 1px solid var(--color-bg-secondary);
+				@media (min-width: 800px) {
+					box-shadow: var(--box-shadow) var(--color-bg-secondary);
+					border-bottom: 1px solid var(--color-bg-secondary);
+				}
 				display: flex;
 				align-items: center;
 				justify-content: center;
@@ -28,6 +29,7 @@ export default () => {
 					display: flex;
 					list-style: none;
 					padding: 0;
+					margin: 0;
 				}
 				ul > li {
 					display: inline-block;
@@ -63,8 +65,16 @@ export default () => {
 					}
 					ul {
 						flex-direction: column;
+						position: fixed;
+						z-index: 1000;
 						align-item: end;
-						${open ? 'display: flex' : 'display: none'}
+						right: 0rem;
+						top: 0;
+						width: 3rem;
+					}
+					ul li {
+						writing-mode: vertical-rl;
+						text-orientation: mixed;
 					}
 				}
 			`}
@@ -105,27 +115,6 @@ export default () => {
 					<LangSwitch />
 				</li>
 			</ul>
-			<div
-				title={open ? 'Fermer le menu' : 'Ouvrir le menu'}
-				css={`
-					cursor: pointer;
-					border: none;
-					padding: 0;
-					margin: 0;
-					svg {
-						width: 2rem;
-						height: 2rem;
-					}
-
-					display: none;
-					@media (max-width: 800px) {
-						display: block;
-					}
-				`}
-				onClick={() => setOpen(!open)}
-			>
-				{open ? <CloseMenuIcon /> : <MenuIcon />}
-			</div>
 		</nav>
 	)
 }
@@ -141,6 +130,10 @@ const Notifications = ({ count }) => (
 			font-size: 60%;
 			padding: 0.2rem 0.6rem;
 			position: relative;
+
+			@media (max-width: 800px) {
+				display: none;
+			}
 		`}
 	>
 		{count}
diff --git a/pages/Accueil.js b/pages/Accueil.js
index 03f1b45c..b039d8a1 100644
--- a/pages/Accueil.js
+++ b/pages/Accueil.js
@@ -14,7 +14,11 @@ export default () => {
 			<header
 				css={`
 					> section {
-						height: 65vh;
+						height: 75vh;
+						@media (max-width: 800px) {
+							height: 70vh;
+						}
+
 						display: flex;
 						flex-direction: column;
 						justify-content: center;

From ced0c2d9dc6199184f8c59e61041668b53b54153 Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Thu, 4 Feb 2021 14:32:56 +0100
Subject: [PATCH 2/3] Menu vertical propre

---
 App.js           |  2 +-
 Nav.js           | 41 +++++++++++++++++++++++++----------------
 pages/Accueil.js |  3 ++-
 3 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/App.js b/App.js
index 0471ff6f..b20522c9 100644
--- a/App.js
+++ b/App.js
@@ -42,7 +42,7 @@ const Container = () => (
 			<div
 				css={`
 					@media (max-width: 800px) {
-						width: 80%;
+						width: 90%;
 					}
 				`}
 			>
diff --git a/Nav.js b/Nav.js
index 6e2e6ae4..184fdcec 100644
--- a/Nav.js
+++ b/Nav.js
@@ -37,7 +37,6 @@ export default () => {
 					position: relative;
 					text-align: left;
 					text-transform: uppercase;
-					font-size: 110%;
 				}
 				/* Nav Dropdown */
 				ul li:hover ul {
@@ -60,9 +59,6 @@ export default () => {
 				@media (max-width: 800px) {
 					justify-content: space-evenly;
 
-					img {
-						width: 3rem;
-					}
 					ul {
 						flex-direction: column;
 						position: fixed;
@@ -71,10 +67,30 @@ export default () => {
 						right: 0rem;
 						top: 0;
 						width: 3rem;
+						height: 100vh;
 					}
 					ul li {
 						writing-mode: vertical-rl;
 						text-orientation: mixed;
+						background: grey;
+						margin: 0;
+						padding: 2rem 0.7rem;
+						flex-grow: 1;
+					}
+					li:nth-child(0) {
+						background: #e4e4e4;
+					}
+					li:nth-child(1) {
+						background: #c4c4c4;
+					}
+					li:nth-child(2) {
+						background: #a3a3a3;
+					}
+					li:nth-child(3) {
+						background: #aaa;
+					}
+					img.emoji {
+						vertical-align: 0;
 					}
 				}
 			`}
@@ -90,27 +106,20 @@ export default () => {
 				<li>
 					<Link to="/communs">Communs</Link>
 				</li>
-				<li>
-					<Link to="/ecosystem">Écosystème</Link>
-				</li>
-				<li>
-					<Link to="/événements">Événements</Link>
-					<Notifications count={2} />
-				</li>
-				<li>
-					<Link to="/blog">Blog</Link>
-					<Notifications count={2} />
-				</li>
 				<li
 					css={`
 						padding: 0.2rem 0.3rem;
 						a {
-							color: ${colors.bleu} !important;
+							color: yellow;
 						}
 					`}
 				>
 					<Link to="/participer">Participer</Link>
 				</li>
+				<li>
+					<Link to="/blog">Blog</Link>
+					<Notifications count={2} />
+				</li>
 				<li>
 					<LangSwitch />
 				</li>
diff --git a/pages/Accueil.js b/pages/Accueil.js
index b039d8a1..805755bc 100644
--- a/pages/Accueil.js
+++ b/pages/Accueil.js
@@ -16,7 +16,8 @@ export default () => {
 					> section {
 						height: 75vh;
 						@media (max-width: 800px) {
-							height: 70vh;
+							height: 65vh;
+							padding: 0 1rem;
 						}
 
 						display: flex;

From afc0cfa24ff853fc6aa0ba61de525ac08202ad0f Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Thu, 4 Feb 2021 14:43:06 +0100
Subject: [PATCH 3/3] =?UTF-8?q?Menu=20coll=C3=A9=20=C3=A0=20droite=20sur?=
 =?UTF-8?q?=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Nav.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Nav.js b/Nav.js
index 184fdcec..a7de4079 100644
--- a/Nav.js
+++ b/Nav.js
@@ -64,7 +64,7 @@ export default () => {
 						position: fixed;
 						z-index: 1000;
 						align-item: end;
-						right: 0rem;
+						right: -1px;
 						top: 0;
 						width: 3rem;
 						height: 100vh;