78 lines
2.9 KiB
TypeScript
78 lines
2.9 KiB
TypeScript
import React from "react";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/router";
|
|
import { Icon } from "../util/icon";
|
|
import { tinaField } from "tinacms/dist/react";
|
|
import { GlobalHeader } from "../../tina/__generated__/types";
|
|
|
|
export const Header = ({ data }: { data: GlobalHeader }) => {
|
|
const router = useRouter();
|
|
|
|
const [isClient, setIsClient] = React.useState(false);
|
|
React.useEffect(() => {
|
|
setIsClient(true);
|
|
}, []);
|
|
|
|
return (
|
|
<nav className="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
|
|
<div className="container d-flex flex-column flex-md-row justify-content-between">
|
|
<div className="flex">
|
|
<Link
|
|
href="/"
|
|
className="navbar-brand container d-flex align-items-md-center"
|
|
>
|
|
<Icon
|
|
tinaField={tinaField(data, "icon")}
|
|
parentColor={data.color}
|
|
data={{
|
|
name: data.icon.name,
|
|
color: data.icon.color,
|
|
style: data.icon.style,
|
|
}}
|
|
/>
|
|
<span data-tina-field={tinaField(data, "name")}>{data.name}</span>
|
|
</Link>
|
|
</div>
|
|
<button className="navbar-toggler" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
|
|
aria-label="Toggle navigation">
|
|
<span className="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div className="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
|
|
<ul className="navbar-nav d-flex flex-column flex-md-row">
|
|
{data.nav &&
|
|
data.nav.map((item, i) => {
|
|
/*const activeItem =
|
|
(item.href === ""
|
|
? router.asPath === "/"
|
|
: router.asPath.includes(item.href)) && isClient;*/
|
|
return (
|
|
<li
|
|
key={`${item.label}-${i}`}
|
|
className="nav-item"
|
|
>
|
|
<Link
|
|
data-tina-field={tinaField(item, "label")}
|
|
href={`/${item.href}`}
|
|
className="nav-link p-2"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
</li>
|
|
);
|
|
})}
|
|
<li className="nav-item">
|
|
<a id="redirecting" className="nav-link p-2 pe-4" href="https://www.rdv360.com/psychartherapie">Rendez-vous</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div
|
|
className={`absolute h-1 bg-gradient-to-r from-transparent ${
|
|
data.color === "primary" ? `via-white` : `via-black dark:via-white`
|
|
} to-transparent bottom-0 left-4 right-4 -z-1 opacity-5`}
|
|
/>
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|