34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import { cx } from "./styles";
|
|
|
|
/* The Figma menu icon (20:224) is three 20x2 rectangles in a 24x24 box with a
|
|
5px gap - not an exported asset, so it is drawn with the same geometry here.
|
|
`open` folds the outer two into a cross and fades the middle one, which is
|
|
what the drawer's close control needs. */
|
|
const BAR = "block h-[2px] w-[20px] rounded-pill bg-[var(--text-primary)]";
|
|
|
|
const BAR_MOTION =
|
|
"transition-[transform,opacity] duration-[var(--motion-duration-fast)] " +
|
|
"ease-[var(--motion-ease-standard)]";
|
|
|
|
export interface MenuBarsProps {
|
|
/** true renders the cross (close), false the hamburger. */
|
|
open?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export function MenuBars({ open = false, className }: MenuBarsProps) {
|
|
return (
|
|
<span
|
|
aria-hidden="true"
|
|
className={cx(
|
|
"flex size-lg flex-col items-center justify-center gap-[5px]",
|
|
className,
|
|
)}
|
|
>
|
|
<span className={cx(BAR, BAR_MOTION, open && "translate-y-[7px] rotate-45")} />
|
|
<span className={cx(BAR, BAR_MOTION, open && "opacity-0")} />
|
|
<span className={cx(BAR, BAR_MOTION, open && "-translate-y-[7px] -rotate-45")} />
|
|
</span>
|
|
);
|
|
}
|