58 lines
2.1 KiB
TypeScript
58 lines
2.1 KiB
TypeScript
import classNames from "classnames";
|
|
import { useRouter } from "next/router";
|
|
import React, { useEffect, useState } from "react";
|
|
import { IHeaderLinkProps } from "../HeaderLink";
|
|
|
|
import Typography, { ITypo, ITypoColor } 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";
|
|
import Rules, { RulesMode } from "@Front/Components/Elements/Rules";
|
|
|
|
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 (
|
|
<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.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}
|
|
color={isActive || isHovered ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}>
|
|
{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>
|
|
</Rules>
|
|
);
|
|
}
|