You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
3.2 KiB
102 lines
3.2 KiB
2 years ago
|
import { useState } from "react"
|
||
|
import PropTypes from "prop-types"
|
||
|
import Link from "next/link"
|
||
|
import { useRouter } from "next/router"
|
||
|
|
||
|
import { getButtonAppearance } from "utils/button"
|
||
|
import { mediaPropTypes, linkPropTypes, buttonLinkPropTypes } from "utils/types"
|
||
|
import { MdMenu } from "react-icons/md"
|
||
|
import MobileNavMenu from "./mobile-nav-menu"
|
||
|
import ButtonLink from "./button-link"
|
||
|
import NextImage from "./image"
|
||
|
import CustomLink from "./custom-link"
|
||
|
import LocaleSwitch from "../locale-switch"
|
||
|
|
||
|
const Navbar = ({ navbar, pageContext }) => {
|
||
|
const router = useRouter()
|
||
|
const [mobileMenuIsShown, setMobileMenuIsShown] = useState(false)
|
||
|
|
||
|
return (
|
||
|
<>
|
||
|
{/* The actual navbar */}
|
||
|
<nav className="border-gray-200 border-b-2 py-6 sm:py-2">
|
||
|
<div className="container flex flex-row items-center justify-between">
|
||
|
{/* Content aligned to the left */}
|
||
|
<div className="flex flex-row items-center">
|
||
|
<Link href="/">
|
||
|
<a className="h-8 w-32">
|
||
|
<NextImage width="120" height="33" media={navbar.logo} />
|
||
|
</a>
|
||
|
</Link>
|
||
|
{/* List of links on desktop */}
|
||
|
<ul className="hidden list-none md:flex flex-row gap-4 items-baseline ml-10">
|
||
|
{navbar.links.map((navLink) => (
|
||
|
<li key={navLink.id}>
|
||
|
<CustomLink link={navLink} locale={router.locale}>
|
||
|
<div className="hover:text-gray-900 px-2 py-1">
|
||
|
{navLink.text}
|
||
|
</div>
|
||
|
</CustomLink>
|
||
|
</li>
|
||
|
))}
|
||
|
</ul>
|
||
|
</div>
|
||
|
<div className="flex">
|
||
|
{/* Locale Switch Mobile */}
|
||
|
{pageContext.localizedPaths && (
|
||
|
<div className="md:hidden">
|
||
|
<LocaleSwitch pageContext={pageContext} />
|
||
|
</div>
|
||
|
)}
|
||
|
{/* Hamburger menu on mobile */}
|
||
|
<button
|
||
|
onClick={() => setMobileMenuIsShown(true)}
|
||
|
className="p-1 block md:hidden"
|
||
|
>
|
||
|
<MdMenu className="h-8 w-auto" />
|
||
|
</button>
|
||
|
{/* CTA button on desktop */}
|
||
|
{navbar.button && (
|
||
|
<div className="hidden md:block">
|
||
|
<ButtonLink
|
||
|
button={navbar.button}
|
||
|
appearance={getButtonAppearance(navbar.button.type, "light")}
|
||
|
compact
|
||
|
/>
|
||
|
</div>
|
||
|
)}
|
||
|
{/* Locale Switch Desktop */}
|
||
|
{pageContext.localizedPaths && (
|
||
|
<div className="hidden md:block">
|
||
|
<LocaleSwitch pageContext={pageContext} />
|
||
|
</div>
|
||
|
)}
|
||
|
</div>
|
||
|
</div>
|
||
|
</nav>
|
||
|
|
||
|
{/* Mobile navigation menu panel */}
|
||
|
{mobileMenuIsShown && (
|
||
|
<MobileNavMenu
|
||
|
navbar={navbar}
|
||
|
closeSelf={() => setMobileMenuIsShown(false)}
|
||
|
/>
|
||
|
)}
|
||
|
</>
|
||
|
)
|
||
|
}
|
||
|
|
||
|
Navbar.propTypes = {
|
||
|
navbar: PropTypes.shape({
|
||
|
logo: PropTypes.shape({
|
||
|
image: mediaPropTypes,
|
||
|
url: PropTypes.string,
|
||
|
}),
|
||
|
links: PropTypes.arrayOf(linkPropTypes),
|
||
|
button: buttonLinkPropTypes,
|
||
|
}),
|
||
|
initialLocale: PropTypes.string,
|
||
|
}
|
||
|
|
||
|
export default Navbar
|