91 lines
2.6 KiB
TypeScript
Executable File
91 lines
2.6 KiB
TypeScript
Executable File
import { useState, useEffect } from "react";
|
|
import { useNavigate, useLocation } from "react-router-dom";
|
|
import { useTranslation } from "react-i18next";
|
|
import routes, {
|
|
hasCrossButton,
|
|
hasNavigation,
|
|
isNotEntrypoint,
|
|
} from "@/routes";
|
|
import BackButton from "./BackButton";
|
|
import iconUrl from "./icon.png";
|
|
import menuUrl from "./menu.png";
|
|
import styles from "./styles.module.css";
|
|
|
|
type HeaderProps = {
|
|
openMenu?: () => void;
|
|
showBack?: boolean;
|
|
showCross?: boolean;
|
|
classCross?: CSSModuleClasses | string;
|
|
clickCross?: () => void;
|
|
};
|
|
|
|
function Header({
|
|
openMenu,
|
|
showBack,
|
|
showCross = true,
|
|
classCross,
|
|
clickCross = () => {
|
|
undefined;
|
|
},
|
|
...props
|
|
}: HeaderProps & React.HTMLAttributes<HTMLDivElement>): JSX.Element {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const [initialPath, setInitialPath] = useState<string | null>(null);
|
|
const [isNavigated, setIsNavigated] = useState<boolean>(false);
|
|
const showBackButton = isNotEntrypoint(location.pathname);
|
|
const showMenuButton = hasNavigation(location.pathname);
|
|
const showCrossButton = hasCrossButton(location.pathname);
|
|
|
|
useEffect(() => {
|
|
if (!initialPath) {
|
|
setInitialPath(location.pathname);
|
|
}
|
|
if (initialPath && location.pathname !== initialPath && !isNavigated) {
|
|
setIsNavigated(true);
|
|
}
|
|
}, [location.pathname, initialPath, isNavigated]);
|
|
|
|
const goBack = () => {
|
|
if (
|
|
location.pathname.includes("/questionnaire") ||
|
|
location.pathname.includes("/about-us") ||
|
|
location.pathname.includes("/payment/stripe")
|
|
) {
|
|
return navigate(-1);
|
|
}
|
|
if (initialPath && isNotEntrypoint(initialPath) && !isNavigated) {
|
|
return navigate(routes.client.root());
|
|
}
|
|
return navigate(-1);
|
|
};
|
|
|
|
return (
|
|
<header className={styles.header} {...props}>
|
|
{showBackButton || showBack ? (
|
|
<BackButton className="pa" onClick={goBack} />
|
|
) : null}
|
|
<div className={styles["header__logo-container"]}>
|
|
<img src={iconUrl} alt="logo" width="40" height="40" />
|
|
<span className={styles["header__title"]}>{t("app_name")}</span>
|
|
</div>
|
|
{showCrossButton && showCross ? (
|
|
<img
|
|
className={`${styles.cross} ${classCross || ""}`}
|
|
src="/cross.png"
|
|
alt="Cross"
|
|
onClick={clickCross}
|
|
/>
|
|
) : null}
|
|
{showMenuButton ? (
|
|
<div className={styles["header__menu-btn"]} onClick={openMenu}>
|
|
<img src={menuUrl} alt="menu" width="40" height="40" />
|
|
</div>
|
|
) : null}
|
|
</header>
|
|
);
|
|
}
|
|
|
|
export default Header;
|