From e42f7b611395c5f196e382cb93aee1031e0925aa Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Thu, 22 Feb 2024 19:13:53 +0100
Subject: [PATCH] introducing fdull screen nav

---
 src/assets/css/components/layout/Nav.scss | 55 +++++++++++++++++-
 src/components/ui/Nav.jsx                 | 70 ++++++++++++++++++++++-
 2 files changed, 120 insertions(+), 5 deletions(-)

diff --git a/src/assets/css/components/layout/Nav.scss b/src/assets/css/components/layout/Nav.scss
index ba40651..d09413a 100644
--- a/src/assets/css/components/layout/Nav.scss
+++ b/src/assets/css/components/layout/Nav.scss
@@ -1,4 +1,55 @@
 nav.main-menu {
-	@apply absolute top-0 py-3 w-full flex justify-end;
-	z-index: 2;
+	@apply absolute top-0 py-3 pr-12 w-full flex gap-6 justify-end;
+	z-index: 48;
+}
+
+.nav-menu-toggle {
+	@apply w-16 h-16 bg-transparent  bg-no-repeat bg-center;
+	background-image: url("../../../img/shapes-background/menu-toggle-background.svg");
+	img {
+		@apply w-8 h-8;
+		box-sizing: border-box;
+	}
+}
+
+.menu {
+	@apply bg-lhoist w-full h-screen fixed  bottom-0 left-0;
+	height: 100dvh;
+	// &[open] {
+	// 	@apply block;
+	// }
+	.cta--close {
+		@apply absolute top-8 right-8 p-8;
+	}
+
+	&__main-links {
+		@apply list-none flex flex-col gap-6 h-full justify-center w-fit  pl-32;
+		li {
+			a {
+				@apply text-white text-9xl text-zuume font-bold block;
+				text-decoration: none;
+
+				&:hover {
+					@apply text-lhoistdark;
+				}
+			}
+		}
+	}
+	&__legal-mentions {
+		@apply absolute bottom-8 right-8 flex gap-6 list-none;
+		a {
+			@apply text-white text-xl font-semibold;
+			text-decoration: none;
+			&:hover {
+				@apply text-lhoistdark;
+			}
+		}
+	}
+}
+
+.page-container:has(.menu[open]) {
+	transform: none !important;
+	.main-menu .nav-menu-toggle {
+		pointer-events: none;
+	}
 }
diff --git a/src/components/ui/Nav.jsx b/src/components/ui/Nav.jsx
index 4aa6fca..e342657 100644
--- a/src/components/ui/Nav.jsx
+++ b/src/components/ui/Nav.jsx
@@ -1,14 +1,58 @@
-import { NavLink } from "react-router-dom";
+import { Link, NavLink } from "react-router-dom";
 import { useLocation } from "react-router-dom";
 import { useUser } from "../../hooks/useUser";
 import LanguageSelect from "./LanguageSelect";
+import menuToggleIcon from "../../assets/img/icons/icon-bars-menu-toggle.svg";
+import { useEffect, useState } from "react";
+import { motion } from "framer-motion";
+
 export default function Nav() {
 	let location = useLocation();
 	const { language, changeLanguage } = useUser();
+	const [isMenuOpen, setIsMenuOpen] = useState(false);
 
+	const handleMenuOpen = () => {
+		setIsMenuOpen(!isMenuOpen);
+	};
+
+	const handleEscape = (e) => {
+		if (e.key === "Escape") {
+			setIsMenuOpen(false);
+		}
+	};
+
+	useEffect(() => {
+		document.addEventListener("keydown", handleEscape);
+		return () => {
+			document.removeEventListener("keydown", handleEscape);
+		};
+	}, []);
+
+	const animationParameters = {
+		initial: { y: "-100%" },
+		animate: { y: "0" },
+		exit: { y: "-100%" },
+	};
 	return (
 		<nav className='main-menu'>
-			{/* <ul className='navlist'>
+			<LanguageSelect />
+			<button className='nav-menu-toggle cta cta--button cta--button-icon' onClick={handleMenuOpen}>
+				<img className='' src={menuToggleIcon} alt='' />
+			</button>
+			{isMenuOpen && (
+				<motion.div
+					key={location.pathname + "menu"}
+					className='menu'
+					open={isMenuOpen}
+					initial={animationParameters.initial}
+					animate={animationParameters.animate}
+					exit={animationParameters.exit}
+					transition={{ duration: 0.4, ease: "easeOut" }}>
+					<button
+						className='cta cta--construction cta--button-icon cta--close'
+						onClick={handleMenuOpen}></button>
+
+					{/* <ul className='navlist'>
 				<NavLink to='/'>Welcome</NavLink>
 				<NavLink to='/Home'>Home</NavLink>
 				<NavLink to='/select-profile'>Profile</NavLink>
@@ -16,8 +60,28 @@ export default function Nav() {
 				<NavLink to='/play'>Play</NavLink>
 				<NavLink to='/results'>Results</NavLink>
 			</ul> */}
+					<ul className='menu__main-links'>
+						<li>
+							<Link to='/thematiques'>Thématiques</Link>
+						</li>
+						<li>
+							<Link to='/about'>À propos</Link>
+						</li>
+					</ul>
 
-			<LanguageSelect />
+					<ul className='menu__legal-mentions'>
+						<li>
+							<Link to='/confidentiality'>Politique de confidentialité</Link>
+						</li>
+						<li>
+							<Link to='/conditions-of-use'> Conditions d'utilisation</Link>
+						</li>
+						<li>
+							<Link to='/Cookies'> Cookies</Link>
+						</li>
+					</ul>
+				</motion.div>
+			)}
 		</nav>
 	);
 }