60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
import { Menu, Transition } from "@headlessui/react"
|
|
import { MenuAlt4Icon } from "@heroicons/react/outline"
|
|
import clsx from "clsx"
|
|
import { useGuideLinksContext } from "~/modules/navigation/guide-links-context"
|
|
import { Popper } from "~/modules/ui/popper"
|
|
import { AppLink } from "./app-link"
|
|
import { mainLinks } from "./main-links"
|
|
|
|
export function MainNavigationMenu() {
|
|
const guideLinks = useGuideLinksContext()
|
|
return (
|
|
<Menu>
|
|
<Popper
|
|
renderReference={(reference) => (
|
|
<Menu.Button {...reference}>
|
|
<MenuAlt4Icon className="w-6" />
|
|
<span className="sr-only">Menu</span>
|
|
</Menu.Button>
|
|
)}
|
|
renderPopover={() => (
|
|
<Transition
|
|
enter="transition"
|
|
enterFrom="translate-y-4 opacity-0"
|
|
enterTo="translate-y-0 opacity-100"
|
|
leave="transition"
|
|
leaveFrom="translate-y-0 opacity-100"
|
|
leaveTo="translate-y-4 opacity-0"
|
|
>
|
|
<Menu.Items className="w-48 max-h-[calc(100vh-5rem)] bg-slate-800 shadow rounded-lg overflow-hidden overflow-y-auto focus:outline-none">
|
|
{mainLinks.map((link) => (
|
|
<Menu.Item key={link.to}>
|
|
{({ active }) => (
|
|
<AppLink {...link} className={menuItemClass({ active })} />
|
|
)}
|
|
</Menu.Item>
|
|
))}
|
|
<Menu.Item disabled>
|
|
<hr className="border-0 h-[2px] bg-black/50" />
|
|
</Menu.Item>
|
|
{guideLinks.map(({ link }) => (
|
|
<Menu.Item key={link.to}>
|
|
{({ active }) => (
|
|
<AppLink {...link} className={menuItemClass({ active })} />
|
|
)}
|
|
</Menu.Item>
|
|
))}
|
|
</Menu.Items>
|
|
</Transition>
|
|
)}
|
|
/>
|
|
</Menu>
|
|
)
|
|
}
|
|
|
|
const menuItemClass = ({ active = false }) =>
|
|
clsx(
|
|
clsx`px-3 py-2 transition text-left font-medium block opacity-50`,
|
|
active && clsx`opacity-100 bg-black/75 text-emerald-400`,
|
|
)
|