server/assets/js/react/components/Header.tsx

58 lines
1.4 KiB
TypeScript

import * as React from "react"
import clsx from "clsx"
import MenuIcon from "../icons/Menu"
import XIcon from "../icons/X"
import { Container } from "./Container"
import { Logo } from "./Logo"
type HeaderProps = {
panelId: string
expanded: boolean
onToggle: () => void
toggleRef: React.RefObject<HTMLButtonElement>
invert?: boolean
}
export function Header({
panelId,
expanded,
onToggle,
toggleRef,
invert = false,
}: HeaderProps) {
const Icon = expanded ? XIcon : MenuIcon
const iconClasses = clsx(
"h-6 w-6",
invert
? "fill-white group-hover:fill-neutral-200"
: "fill-neutral-950 group-hover:fill-neutral-700"
)
return (
<Container>
<div className="flex items-center justify-between">
<a href="/" aria-label="Home">
<Logo className="h-8" invert={invert} />
</a>
<div className="flex items-center gap-x-8">
<button
ref={toggleRef}
type="button"
onClick={onToggle}
aria-expanded={expanded ? "true" : "false"}
aria-controls={panelId}
className={clsx(
"group -m-2.5 rounded-full p-2.5 transition",
invert ? "hover:bg-white/10" : "hover:bg-neutral-950/10"
)}
aria-label="Toggle navigation"
>
<Icon className={iconClasses} />
</button>
</div>
</div>
</Container>
)
}