64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import React from "react"
|
|
import { useRouter } from "next/router"
|
|
import { DrupalMenuLinkContent } from "next-drupal"
|
|
import classNames from "classnames"
|
|
|
|
import { LocaleSwitcher } from "components/locale-switcher"
|
|
import Link from "next/link"
|
|
|
|
interface NavbarProps {
|
|
links: DrupalMenuLinkContent[]
|
|
}
|
|
|
|
export function Navbar({ links, ...props }: NavbarProps) {
|
|
const { locale } = useRouter()
|
|
|
|
return (
|
|
<header
|
|
className="static top-0 z-50 flex-shrink-0 py-4 bg-white md:sticky"
|
|
{...props}
|
|
>
|
|
<div className="container flex flex-col items-start justify-between px-6 mx-auto md:flex-row md:items-center">
|
|
<Link href="/" locale={locale} passHref>
|
|
<a className="text-lg font-bold">Marketing</a>
|
|
</Link>
|
|
{links ? <Menu items={links} /> : null}
|
|
<div className="absolute flex justify-end md:static top-2 right-4">
|
|
<LocaleSwitcher />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|
|
|
|
function Menu({ items }: { items: DrupalMenuLinkContent[] }) {
|
|
return (
|
|
<ul
|
|
className="grid grid-flow-col gap-4 mx-auto mt-6 md:mt-0 auto-cols-auto md:auto-rows-auto md:gap-8 lg:gap-12"
|
|
data-cy="navbar-menu"
|
|
>
|
|
{items.map((item) => (
|
|
<MenuLink link={item} key={item.id} />
|
|
))}
|
|
</ul>
|
|
)
|
|
}
|
|
|
|
function MenuLink({ link }: { link: DrupalMenuLinkContent }) {
|
|
const { asPath } = useRouter()
|
|
|
|
return (
|
|
<li>
|
|
<Link href={link.url} passHref>
|
|
<a
|
|
className={classNames(
|
|
"py-4 hover:underline text-sm md:text-base",
|
|
link.url === asPath ? "font-semibold" : "font-normal"
|
|
)}
|
|
>
|
|
{link.title}
|
|
</a>
|
|
</Link>
|
|
</li>
|
|
)
|
|
}
|