57 lines
2.2 KiB
TypeScript
57 lines
2.2 KiB
TypeScript
import React from "react";
|
|
import Link from "next/link";
|
|
import { tinaField } from "tinacms/dist/react";
|
|
import defaultLogo from "../../assets/img/logo.png";
|
|
import {GlobalHeader} from "../../tina/__generated__/types";
|
|
|
|
export const Header = ({ data }: { data: GlobalHeader }) => {
|
|
return (
|
|
<nav className="navbar flex flex-wrap content-between sticky top-0 py-2">
|
|
<div className="flex grow justify-between px-6">
|
|
<div className="flex navbar-brand">
|
|
<Link
|
|
href="/"
|
|
className="container flex items-center"
|
|
>
|
|
<img src={ data.logoSrc || defaultLogo.src }/>
|
|
<div className="flex flex-col">
|
|
<h3 className="title" data-tina-field={tinaField(data, "title")}>{data.title}</h3>
|
|
<div className="subtitle" data-tina-field={tinaField(data, "subtitle")}>{data.subtitle}</div>
|
|
</div>
|
|
</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={`flex items-center` } id="navbarSupportedContent">
|
|
<ul className="flex md:flex-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.external? "" : "/" }${ item.href }`}
|
|
className={`nav-link p-2 ${ item.external ? "external-link-icon" : ""}`}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|