From 04489344fd0774846ced9b565e95d39c72615380 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Tue, 9 Apr 2024 16:12:13 +0200
Subject: [PATCH] :sparkles: adding rules

---
 .../Header/HeaderSubmenu/index.tsx            | 31 +++++++++++--------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/front/Components/DesignSystem/Header/HeaderSubmenu/index.tsx b/src/front/Components/DesignSystem/Header/HeaderSubmenu/index.tsx
index 017cfe61..9a0c4c4a 100644
--- a/src/front/Components/DesignSystem/Header/HeaderSubmenu/index.tsx
+++ b/src/front/Components/DesignSystem/Header/HeaderSubmenu/index.tsx
@@ -8,6 +8,7 @@ import classes from "./classes.module.scss";
 import useHoverable from "@Front/Hooks/useHoverable";
 import HeaderSubmenuLink from "./HeaderSubmenuLink";
 import { IAppRule } from "@Front/Api/Entities/rule";
+import Rules, { RulesMode } from "@Front/Components/Elements/Rules";
 
 type IProps = {
 	text: string | JSX.Element;
@@ -29,20 +30,24 @@ export default function HeaderSubmenu(props: IProps) {
 	}, [isActive, pathname, props.links]);
 
 	return (
-		<div className={classes["container"]} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-			<div className={classNames(classes["root"], (isActive || isHovered) && classes["active"])}>
-				<div className={classes["content"]}>
-					<Typography typo={isActive || isHovered ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{props.text}</Typography>
-				</div>
-				<div className={classes["underline"]} data-active={(isActive || isHovered).toString()} />
-				{isHovered && (
-					<div className={classes["sub-menu"]}>
-						{props.links.map((link) => (
-							<HeaderSubmenuLink key={link.path} {...link} />
-						))}
+		<Rules mode={RulesMode.OPTIONAL} rules={props.links.flatMap((link) => link.rules ?? [])}>
+			<div className={classes["container"]} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+				<div className={classNames(classes["root"], (isActive || isHovered) && classes["active"])}>
+					<div className={classes["content"]}>
+						<Typography typo={isActive || isHovered ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{props.text}</Typography>
 					</div>
-				)}
+					<div className={classes["underline"]} data-active={(isActive || isHovered).toString()} />
+					{isHovered && (
+						<div className={classes["sub-menu"]}>
+							{props.links.map((link) => (
+								<Rules mode={RulesMode.NECESSARY} rules={link.rules ?? []} key={link.path}>
+									<HeaderSubmenuLink {...link} />
+								</Rules>
+							))}
+						</div>
+					)}
+				</div>
 			</div>
-		</div>
+		</Rules>
 	);
 }