🐛 Wrong links in submenu

src/front/Components/DesignSystem/Header/HeaderLink/index.tsx

@@ -10,7 +10,7 @@ type IProps = {
 	text: string | JSX.Element;
 	path: string;
 	isActive?: boolean;
-	routesActive: string[];
+	routesActive?: string[];
 };
 
 type IPropsClass = IProps;
@@ -44,9 +44,11 @@ export default function HeaderLink(props: IProps) {
 	const router = useRouter();
 	const { pathname } = router;
 	let isActive = props.path === pathname;
-	for (const routeActive of props.routesActive) {
-		if (isActive) break;
-		isActive = pathname.includes(routeActive);
+	if(props.routesActive){
+		for (const routeActive of props.routesActive) {
+			if (isActive) break;
+			isActive = pathname.includes(routeActive);
+		}
 	}
 	return <HeaderLinkClass {...props} isActive={isActive} />;
 }

src/front/Components/DesignSystem/Header/NavigationLink/index.tsx

@@ -2,18 +2,19 @@ import React from "react";
 import classes from "./classes.module.scss";
 import Link from "next/link";
 import classNames from "classnames";
-import router from "next/router";
-import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
 import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
 
-type IPropsClass = {
+type IProps = {
 	text: string | JSX.Element;
 	path?: string;
 	onClick?: () => void;
 	isEnabled?: boolean;
 	isActive?: boolean;
+	routesActive?: string[];
 };
 
+type IPropsClass = IProps;
 type IStateClass = {};
 
 class NavigationLinkClass extends React.Component<IPropsClass, IStateClass> {
@@ -33,9 +34,15 @@ class NavigationLinkClass extends React.Component<IPropsClass, IStateClass> {
 	}
 }
 
-export default function NavigationLink(props: IPropsClass) {
-	const [url, setUrl] = useState("");
-	useEffect(() => setUrl(router?.asPath), []);
-	const isActive = url === props.path;
+export default function NavigationLink(props: IProps) {
+	const router = useRouter();
+	const { pathname } = router;
+	let isActive = props.path === pathname;
+	if(props.routesActive){
+		for (const routeActive of props.routesActive) {
+			if (isActive) break;
+			isActive = pathname.includes(routeActive);
+		}
+	}
 	return <NavigationLinkClass {...props} isActive={isActive} />;
 }

src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import classes from "./classes.module.scss";
 import NavigationLink from "../../NavigationLink";
 import LogOutButton from "@Front/Components/DesignSystem/LogOutButton";
+import Module from "@Front/Config/Module";
 
 type IProps = {
 	isOpen: boolean;
@@ -17,12 +18,9 @@ export default class ProfileModal extends React.Component<IProps, IState> {
 			<>
 				<div className={classes["background"]} onClick={this.props.closeModal} />
 				<div className={classes["root"]}>
-					<NavigationLink text="Mon compte" />
-					<NavigationLink text="Gestion des utilisateurs" />
-					<NavigationLink text="Gestion des offices" />
+					<NavigationLink path={Module.getInstance().get().modules.pages.MyAccount.props.path} text="Mon compte" />
 					<NavigationLink text="CGU" />
-					<NavigationLink path={"/design-system"} text="Design System" />
-					<NavigationLink path={"/"} text="Home" />
+					<NavigationLink path={Module.getInstance().get().modules.pages.Home.props.path} text="Home" />
 					<div className={classes["separator"]} />
 					<LogOutButton />
 				</div>