From 39cba4981f2bbd1a5ccf0cfd0c03d248ef959577 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Thu, 27 Apr 2023 10:42:30 +0200
Subject: [PATCH] :sparkles: Fixing active link in header

---
 .../DesignSystem/Header/HeaderLink/index.tsx  | 20 ++++++++++---------
 .../DesignSystem/Header/Navigation/index.tsx  |  9 +++++++--
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/front/Components/DesignSystem/Header/HeaderLink/index.tsx b/src/front/Components/DesignSystem/Header/HeaderLink/index.tsx
index a2af0095..d8db1a7e 100644
--- a/src/front/Components/DesignSystem/Header/HeaderLink/index.tsx
+++ b/src/front/Components/DesignSystem/Header/HeaderLink/index.tsx
@@ -6,12 +6,15 @@ import React from "react";
 import Typography, { ITypo } from "../../Typography";
 import classes from "./classes.module.scss";
 
-type IPropsClass = {
+type IProps = {
 	text: string | JSX.Element;
-	path?: string;
+	path: string;
 	isActive?: boolean;
+	routesActive: string[];
 };
 
+type IPropsClass = IProps;
+
 type IStateClass = {};
 
 class HeaderLinkClass extends React.Component<IPropsClass, IStateClass> {
@@ -37,14 +40,13 @@ class HeaderLinkClass extends React.Component<IPropsClass, IStateClass> {
 	}
 }
 
-export default function HeaderLink(props: IPropsClass) {
-	/**
-	 * TODO: We need to fix the check and include subPathName
-	 * BUT
-	 * `/folder/archived` and `/folder/xxx` should be differenciated
-	 */
+export default function HeaderLink(props: IProps) {
 	const router = useRouter();
 	const { pathname } = router;
-	const isActive = pathname === props.path;
+	let isActive = props.path === pathname;
+	for (const routeActive of props.routesActive) {
+		if (isActive) break;
+		isActive = pathname.includes(routeActive);
+	}
 	return <HeaderLinkClass {...props} isActive={isActive} />;
 }
diff --git a/src/front/Components/DesignSystem/Header/Navigation/index.tsx b/src/front/Components/DesignSystem/Header/Navigation/index.tsx
index 0319b1a3..0a1427a5 100644
--- a/src/front/Components/DesignSystem/Header/Navigation/index.tsx
+++ b/src/front/Components/DesignSystem/Header/Navigation/index.tsx
@@ -1,8 +1,8 @@
+import Module from "@Front/Config/Module";
 import React from "react";
 
 import HeaderLink from "../HeaderLink";
 import classes from "./classes.module.scss";
-import Module from "@Front/Config/Module";
 
 type IProps = {};
 type IState = {};
@@ -11,10 +11,15 @@ export default class Navigation extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
 		return (
 			<div className={classes["root"]}>
-				<HeaderLink text={"Dossiers en cours"} path={Module.getInstance().get().modules.pages.Folder.props.path} />
+				<HeaderLink
+					text={"Dossiers en cours"}
+					path={Module.getInstance().get().modules.pages.Folder.props.path}
+					routesActive={[Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path]}
+				/>
 				<HeaderLink
 					text={"Dossiers archivés"}
 					path={Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.props.path}
+					routesActive={[Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.props.path]}
 				/>
 			</div>
 		);