✨ new menu

package.json

@@ -3,7 +3,7 @@
 	"version": "0.1.0",
 	"private": true,
 	"scripts": {
-		"dev": "next dev",
+		"dev": "next dev -p 5005",
 		"build": "next build",
 		"start": "next start",
 		"lint": "next lint",

src/front/Components/DesignSystem/Header/HeaderLink/classes.module.scss

@@ -14,13 +14,17 @@
 	.underline {
 		width: 100%;
 		height: 3px;
-		background-color: $black;
+		background-color: $white;
 		position: absolute;
 		bottom: 0;
 		left: 0;
+
+		&[data-active="true"] {
+			background-color: $black;
+		}
 	}
 
-	&.desactivated{
+	&.desactivated {
 		cursor: not-allowed;
 	}
 }

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

@@ -1,54 +1,55 @@
 import classNames from "classnames";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React from "react";
+import React, { useEffect } from "react";
 
 import Typography, { ITypo } from "../../Typography";
 import classes from "./classes.module.scss";
+import useHoverable from "@Front/Hooks/useHoverable";
 
-type IProps = {
+export type IHeaderLinkProps = {
 	text: string | JSX.Element;
 	path: string;
-	isActive?: boolean;
 	routesActive?: string[];
 };
 
-type IPropsClass = IProps;
+export default function HeaderLink(props: IHeaderLinkProps) {
+	const router = useRouter();
+	const { pathname } = router;
+	const [isActive, setIsActive] = React.useState(props.path === pathname);
+	const { handleMouseLeave, handleMouseEnter, isHovered } = useHoverable();
 
-type IStateClass = {};
+	useEffect(() => {
+		setIsActive(false);
+		if (props.path === pathname) setIsActive(true);
+		if (props.routesActive) {
+			for (const routeActive of props.routesActive) {
+				if (isActive) break;
+				if (pathname.includes(routeActive)) setIsActive(true);
+			}
+		}
+	}, [isActive, pathname, props.path, props.routesActive]);
 
-class HeaderLinkClass extends React.Component<IPropsClass, IStateClass> {
+	if (props.path !== "" && props.path !== undefined) {
-	public override render(): JSX.Element {
-		if (this.props.path !== "" && this.props.path !== undefined) {
 		return (
-				<Link href={this.props.path} className={classNames(classes["root"], this.props.isActive && classes["active"])}>
+			<Link
+				href={props.path}
+				className={classNames(classes["root"], isActive && classes["active"])}
+				onMouseEnter={handleMouseEnter}
+				onMouseLeave={handleMouseLeave}>
 				<div className={classes["content"]}>
-						<Typography typo={this.props.isActive ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{this.props.text}</Typography>
+					<Typography typo={isActive || isHovered ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{props.text}</Typography>
 				</div>
-					{this.props.isActive && <div className={classes["underline"]} />}
+				<div className={classes["underline"]} data-active={(isActive || isHovered).toString()} />
 			</Link>
 		);
 	} else {
 		return (
 			<div className={classNames(classes["root"], classes["desactivated"])}>
 				<div className={classes["content"]}>
-						<Typography typo={ITypo.NAV_HEADER_18}>{this.props.text}</Typography>
+					<Typography typo={ITypo.NAV_HEADER_18}>{props.text}</Typography>
 				</div>
 			</div>
 		);
 	}
-	}
-}
-
-export default function HeaderLink(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 <HeaderLinkClass {...props} isActive={isActive} />;
 }

src/front/Components/DesignSystem/Header/HeaderSubmenu/HeaderSubmenuLink/index.tsx

@@ -0,0 +1,35 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import React, { useEffect } from "react";
+
+import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+import useHoverable from "@Front/Hooks/useHoverable";
+
+export type IHeaderLinkProps = {
+	text: string | JSX.Element;
+	path: string;
+	routesActive?: string[];
+};
+
+export default function HeaderSubmenuLink(props: IHeaderLinkProps) {
+	const router = useRouter();
+	const { pathname } = router;
+	const [isActive, setIsActive] = React.useState(props.path === pathname);
+	const { handleMouseLeave, handleMouseEnter, isHovered } = useHoverable();
+
+	useEffect(() => {
+		if (props.path === pathname) setIsActive(true);
+		if (props.routesActive) {
+			for (const routeActive of props.routesActive) {
+				if (isActive) break;
+				if (pathname.includes(routeActive)) setIsActive(true);
+			}
+		}
+	}, [isActive, pathname, props.path, props.routesActive]);
+
+	return (
+		<Link href={props.path} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+			<Typography typo={isActive || isHovered ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{props.text}</Typography>
+		</Link>
+	);
+}

src/front/Components/DesignSystem/Header/HeaderSubmenu/classes.module.scss

@@ -0,0 +1,44 @@
+@import "@Themes/constants.scss";
+
+.root {
+	display: flex;
+	position: relative;
+	width: fit-content;
+	margin: auto;
+	height: 83px;
+	padding: 10px 16px;
+	.content {
+		margin: auto;
+	}
+	.underline {
+		width: 100%;
+		height: 3px;
+		background-color: $white;
+		position: absolute;
+		bottom: 0;
+		left: 0;
+
+		&[data-active="true"] {
+			background-color: $black;
+		}
+	}
+
+	&.desactivated {
+		cursor: not-allowed;
+	}
+
+	.sub-menu {
+		box-shadow: 0px 8px 10px 0px #00000012;
+		padding: 24px;
+		text-align: center;
+		gap: 24px;
+		left: 0;
+		transform: translateX(-25%);
+		width: 300px;
+		top: 112px;
+		display: flex;
+		flex-direction: column;
+		background: white;
+		position: absolute;
+	}
+}

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

@@ -0,0 +1,48 @@
+import classNames from "classnames";
+import { useRouter } from "next/router";
+import React, { useEffect, useState } from "react";
+import { IHeaderLinkProps } from "../HeaderLink";
+
+import Typography, { ITypo } from "../../Typography";
+import classes from "./classes.module.scss";
+import useHoverable from "@Front/Hooks/useHoverable";
+import HeaderSubmenuLink from "./HeaderSubmenuLink";
+import { IAppRule } from "@Front/Api/Entities/rule";
+
+type IProps = {
+	text: string | JSX.Element;
+	links: (IHeaderLinkProps & {
+		rules?: IAppRule[];
+	})[];
+};
+
+export default function HeaderSubmenu(props: IProps) {
+	const router = useRouter();
+	const { pathname } = router;
+	const [isActive, setIsActive] = useState(false);
+	const { handleMouseLeave, handleMouseEnter, isHovered } = useHoverable(100);
+
+	useEffect(() => {
+		setIsActive(false);
+		if (props.links.some((link) => link.path === pathname)) setIsActive(true);
+		if (props.links.some((link) => link.routesActive?.some((routeActive) => pathname.includes(routeActive)))) setIsActive(true);
+	}, [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} />
+						))}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}

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

@@ -9,6 +9,7 @@ import { usePathname } from "next/navigation";
 import Notifications from "@Front/Api/LeCoffreApi/Notary/Notifications/Notifications";
 import Toasts from "@Front/Stores/Toasts";
 import OfficeFolderAnchors from "@Front/Api/LeCoffreApi/Notary/OfficeFolderAnchors/OfficeFolderAnchors";
+import HeaderSubmenu from "../HeaderSubmenu";
 export default function Navigation() {
 	const pathname = usePathname();
 
@@ -83,25 +84,125 @@ export default function Navigation() {
 						name: AppRuleNames.officeRoles,
 					},
 				]}>
-				<HeaderLink
+				<HeaderSubmenu
-					text={"Collaborateurs"}
+					text={"Espace office"}
-					path={Module.getInstance().get().modules.pages.Collaborators.props.path}
+					links={[
-					routesActive={[Module.getInstance().get().modules.pages.Collaborators.props.path]}
+						{
-				/>
+							text: "Collaborateurs",
-			</Rules>
+							path: Module.getInstance().get().modules.pages.Collaborators.props.path,
-			<HeaderLink
+							routesActive: [
-				text={"Abonnement"}
+								Module.getInstance().get().modules.pages.Collaborators.pages.CollaboratorInformations.props.path,
-				path={Module.getInstance().get().modules.pages.Subscription.pages.Manage.props.path}
+								Module.getInstance().get().modules.pages.Collaborators.props.path,
-				routesActive={[
+							],
-					Module.getInstance().get().modules.pages.Subscription.pages.Manage.props.path,
+							rules: [
-					Module.getInstance().get().modules.pages.Subscription.pages.Invite.props.path,
+								{
-					Module.getInstance().get().modules.pages.Subscription.pages.Success.props.path,
+									action: AppRuleActions.read,
+									name: AppRuleNames.users,
+								},
+							],
+						},
+						{
+							text: "Gestion des rôles",
+							path: Module.getInstance().get().modules.pages.Roles.props.path,
+							routesActive: [
+								Module.getInstance().get().modules.pages.Roles.pages.Create.props.path,
+								Module.getInstance().get().modules.pages.Roles.pages.RolesInformations.props.path,
+								Module.getInstance().get().modules.pages.Roles.props.path,
+							],
+							rules: [
+								{
+									action: AppRuleActions.update,
+									name: AppRuleNames.officeRoles,
+								},
+							],
+						},
+						{
+							text: "Paramétrage types d'actes",
+							path: Module.getInstance().get().modules.pages.DeedTypes.props.path,
+							routesActive: [
+								Module.getInstance().get().modules.pages.DeedTypes.pages.Create.props.path,
+								Module.getInstance().get().modules.pages.DeedTypes.pages.Edit.props.path,
+								Module.getInstance().get().modules.pages.DeedTypes.props.path,
+								Module.getInstance().get().modules.pages.DocumentTypes.props.path,
+								Module.getInstance().get().modules.pages.DocumentTypes.pages.Create.props.path,
+								Module.getInstance().get().modules.pages.DocumentTypes.pages.Edit.props.path,
+								Module.getInstance().get().modules.pages.DocumentTypes.pages.DocumentTypesInformations.props.path,
+							],
+							rules: [
+								{
+									action: AppRuleActions.update,
+									name: AppRuleNames.deedTypes,
+								},
+							],
+						},
+						{
+							text: "RIB Office",
+							path: Module.getInstance().get().modules.pages.OfficesRib.props.path,
+							rules: [
+								{
+									action: AppRuleActions.update,
+									name: AppRuleNames.rib,
+								},
+							],
+						},
+						{
+							text: "Abonnement",
+							path: Module.getInstance().get().modules.pages.Subscription.pages.Manage.props.path,
+							routesActive: [
 								Module.getInstance().get().modules.pages.Subscription.pages.Error.props.path,
+								Module.getInstance().get().modules.pages.Subscription.pages.Success.props.path,
+								Module.getInstance().get().modules.pages.Subscription.pages.Invite.props.path,
+								Module.getInstance().get().modules.pages.Subscription.pages.Manage.props.path,
+								Module.getInstance().get().modules.pages.Subscription.pages.ManageCollaborators.props.path,
 								Module.getInstance().get().modules.pages.Subscription.pages.New.props.path,
-					Module.getInstance().get().modules.pages.Subscription.pages.Subscribe.pages.Standard.props.path,
+								Module.getInstance().get().modules.pages.Subscription.pages.Subscribe.props.path,
-					Module.getInstance().get().modules.pages.Subscription.pages.Subscribe.pages.Illimity.props.path,
+							],
+						},
 					]}
 				/>
+			</Rules>
+			<Rules
+				mode={RulesMode.NECESSARY}
+				rules={[
+					{
+						action: AppRuleActions.update,
+						name: AppRuleNames.officeRoles,
+					},
+				]}>
+				<HeaderSubmenu
+					text={"Espace super admin"}
+					links={[
+						{
+							text: "Gestion des utilisateurs",
+							path: Module.getInstance().get().modules.pages.Users.props.path,
+							routesActive: [
+								Module.getInstance().get().modules.pages.Users.pages.UsersInformations.props.path,
+								Module.getInstance().get().modules.pages.Users.props.path,
+							],
+							rules: [
+								{
+									action: AppRuleActions.update,
+									name: AppRuleNames.offices,
+								},
+							],
+						},
+						{
+							text: "Gestion des offices",
+							path: Module.getInstance().get().modules.pages.Offices.props.path,
+							routesActive: [
+								Module.getInstance().get().modules.pages.Offices.pages.OfficesInformations.props.path,
+								Module.getInstance().get().modules.pages.Offices.props.path,
+							],
+							rules: [
+								{
+									action: AppRuleActions.update,
+									name: AppRuleNames.offices,
+								},
+							],
+						},
+					]}
+				/>
+			</Rules>
 		</div>
 	);
 }

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

@@ -4,8 +4,6 @@ import React from "react";
 
 import NavigationLink from "../../NavigationLink";
 import classes from "./classes.module.scss";
-import Rules, { RulesMode } from "@Front/Components/Elements/Rules";
-import { AppRuleActions, AppRuleNames } from "@Front/Api/Entities/rule";
 
 type IProps = {
 	isOpen: boolean;
@@ -22,94 +20,6 @@ export default class ProfileModal extends React.Component<IProps, IState> {
 				<div className={classes["background"]} onClick={this.props.closeModal} />
 				<div className={classes["root"]}>
 					<NavigationLink path={Module.getInstance().get().modules.pages.MyAccount.props.path} text="Mon compte" />
-					<Rules
-						mode={RulesMode.NECESSARY}
-						rules={[
-							{
-								action: AppRuleActions.update,
-								name: AppRuleNames.officeRoles,
-							},
-						]}>
-						<NavigationLink
-							path={Module.getInstance().get().modules.pages.Roles.props.path}
-							text="Gestion des rôles"
-							routesActive={[
-								Module.getInstance().get().modules.pages.Roles.props.path,
-								Module.getInstance().get().modules.pages.Roles.pages.RolesInformations.props.path,
-							]}
-						/>
-					</Rules>
-					<Rules
-						mode={RulesMode.NECESSARY}
-						rules={[
-							{
-								action: AppRuleActions.update,
-								name: AppRuleNames.deedTypes,
-							},
-						]}>
-						<NavigationLink
-							path={Module.getInstance().get().modules.pages.DeedTypes.props.path}
-							text="Paramétrage des listes de pièces"
-							routesActive={[
-								Module.getInstance().get().modules.pages.DeedTypes.props.path,
-								Module.getInstance().get().modules.pages.DeedTypes.pages.Create.props.path,
-								Module.getInstance().get().modules.pages.DeedTypes.pages.DeedTypesInformations.props.path,
-								Module.getInstance().get().modules.pages.DeedTypes.pages.Edit.props.path,
-								Module.getInstance().get().modules.pages.DocumentTypes.pages.Edit.props.path,
-								Module.getInstance().get().modules.pages.DocumentTypes.pages.Create.props.path,
-								Module.getInstance().get().modules.pages.DocumentTypes.pages.DocumentTypesInformations.props.path,
-								Module.getInstance().get().modules.pages.DocumentTypes.props.path,
-							]}
-						/>
-					</Rules>
-					<Rules
-						mode={RulesMode.NECESSARY}
-						rules={[
-							{
-								action: AppRuleActions.update,
-								name: AppRuleNames.offices,
-							},
-						]}>
-						<NavigationLink
-							path={Module.getInstance().get().modules.pages.Users.props.path}
-							text="Gestion des utilisateurs"
-							routesActive={[
-								Module.getInstance().get().modules.pages.Users.props.path,
-								Module.getInstance().get().modules.pages.Users.pages.UsersInformations.props.path,
-							]}
-						/>
-					</Rules>
-					<Rules
-						mode={RulesMode.NECESSARY}
-						rules={[
-							{
-								action: AppRuleActions.update,
-								name: AppRuleNames.offices,
-							},
-						]}>
-						<NavigationLink
-							path={Module.getInstance().get().modules.pages.Offices.props.path}
-							text="Gestion des offices"
-							routesActive={[
-								Module.getInstance().get().modules.pages.Offices.props.path,
-								Module.getInstance().get().modules.pages.Offices.pages.OfficesInformations.props.path,
-							]}
-						/>
-					</Rules>
-					<Rules
-						mode={RulesMode.NECESSARY}
-						rules={[
-							{
-								action: AppRuleActions.update,
-								name: AppRuleNames.rib,
-							},
-						]}>
-						<NavigationLink
-							path={Module.getInstance().get().modules.pages.OfficesRib.props.path}
-							text="Gestion du RIB"
-							routesActive={[Module.getInstance().get().modules.pages.OfficesRib.props.path]}
-						/>
-					</Rules>
 					<NavigationLink target="_blank" path="/CGU_LeCoffre_io.pdf" text="CGU" />
 					<div className={classes["separator"]} />
 					<LogOutButton />

src/front/Hooks/useHoverable.ts

@@ -0,0 +1,26 @@
+import { useState } from "react";
+
+export default function useHoverable(delay: number = 0) {
+	const [isHovered, setIsHovered] = useState(false);
+
+	const [stateTimeout, setStateTimeout] = useState<NodeJS.Timeout | null>(null);
+
+	const handleMouseEnter = () => {
+		if (stateTimeout) clearTimeout(stateTimeout);
+		setIsHovered(true);
+	};
+
+	const handleMouseLeave = () => {
+		setStateTimeout(
+			setTimeout(() => {
+				setIsHovered(false);
+			}, delay),
+		);
+	};
+
+	return {
+		isHovered,
+		handleMouseEnter,
+		handleMouseLeave,
+	};
+}