56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
import classNames from "classnames";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/router";
|
|
import React, { useEffect } from "react";
|
|
|
|
import Typography, { ITypo } from "../../Typography";
|
|
import classes from "./classes.module.scss";
|
|
import useHoverable from "@Front/Hooks/useHoverable";
|
|
|
|
export type IHeaderLinkProps = {
|
|
text: string | JSX.Element;
|
|
path: string;
|
|
routesActive?: string[];
|
|
};
|
|
|
|
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();
|
|
|
|
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]);
|
|
|
|
if (props.path !== "" && props.path !== undefined) {
|
|
return (
|
|
<Link
|
|
href={props.path}
|
|
className={classNames(classes["root"], isActive && classes["active"])}
|
|
onMouseEnter={handleMouseEnter}
|
|
onMouseLeave={handleMouseLeave}>
|
|
<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()} />
|
|
</Link>
|
|
);
|
|
} else {
|
|
return (
|
|
<div className={classNames(classes["root"], classes["desactivated"])}>
|
|
<div className={classes["content"]}>
|
|
<Typography typo={ITypo.NAV_HEADER_18}>{props.text}</Typography>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|