handlign translations

src/components/ui/Nav.jsx

@@ -6,11 +6,12 @@ import menuToggleIcon from "../../assets/img/icons/icon-bars-menu-toggle.svg";
 import { useEffect, useState } from "react";
 import { motion } from "framer-motion";
 import Logo from "./AppLogoVector.jsx";
+import Loading from "../animations/Loading";
 
 export default function Nav() {
 	let location = useLocation();
 
-	const { screensTranslations } = useUser();
+	const { language, screensTranslations } = useUser();
 
 	const [isMenuOpen, setIsMenuOpen] = useState(false);
 
@@ -37,8 +38,8 @@ export default function Nav() {
 		exit: { y: "-100%" },
 	};
 
-	if (!screensTranslations || !screensTranslations.ui || !screensTranslations.pagesName) return <p>loading</p>;
-	const uiTranslations = screensTranslations.ui;
+	if (!screensTranslations || !screensTranslations.ui || !screensTranslations.pagesName) return <Loading />;
+	const uiScreenTranslations = screensTranslations.ui;
 	const pagesNamesTranslations = screensTranslations.pagesName;
 
 	return (
@@ -46,7 +47,7 @@ export default function Nav() {
 			{location && location.pathname != "/Home" ? <Logo /> : null}
 			<LanguageSelect />
 			<button
-				title={uiTranslations.openMenu}
+				title={uiScreenTranslations.openMenu}
 				className='nav-menu-toggle cta cta--button cta--button-icon'
 				onClick={handleMenuOpen}>
 				<img className='' src={menuToggleIcon} alt='' />
@@ -61,7 +62,7 @@ export default function Nav() {
 					exit={animationParameters.exit}
 					transition={{ duration: 0.4, ease: "easeOut" }}>
 					<button
-						title={uiTranslations.closeMenu}
+						title={uiScreenTranslations.closeMenu}
 						className='cta cta--construction cta--button-icon cta--close'
 						onClick={handleMenuOpen}></button>
 
@@ -79,13 +80,17 @@ export default function Nav() {
 
 					<ul className='menu__legal-mentions'>
 						<li>
-							<Link to='/confidentiality'>Politique de confidentialité</Link>
+							<Link to='/confidentiality'>
+								{pagesNamesTranslations.confidentiality}
+							</Link>
 						</li>
 						<li>
-							<Link to='/conditions'> Conditions d'utilisation</Link>
+							<Link to='/conditions'>
+								{pagesNamesTranslations.conditions}
+							</Link>
 						</li>
 						<li>
-							<Link to='/cookies'> Cookies</Link>
+							<Link to='/data'>{pagesNamesTranslations.cookies}</Link>
 						</li>
 					</ul>
 				</motion.div>