"use client"; import * as React from "react"; import { Dialog as DialogPrimitive } from "radix-ui"; import { motion } from "motion/react"; import { cn } from "@kineticui/core"; export type MobileMenuProps = { links: { label: string; href: string; active?: boolean }[]; /** Buttons at the bottom of the menu. */ actions?: React.ReactNode; /** Shown top-left inside the open menu. */ logo?: React.ReactNode; className?: string; }; /** Hamburger that morphs into ✕ and opens a full-screen menu with staggered links. */ export function MobileMenu({ links, actions, logo, className }: MobileMenuProps) { const [open, setOpen] = React.useState(false); return ( Menu

{logo} ✕

{links.map((l, i) => ( setOpen(false)} initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.05 + i * 0.05, type: "spring", stiffness: 300, damping: 26 }} aria-current={l.active ? "page" : undefined} className={cn("font-display text-4xl font-semibold tracking-tight", l.active ? "text-foreground" : "text-subtle hover:text-foreground")} > {l.label} ))}

{actions ? ( {actions} ) : null} ); }

Mobile Menu

Installation

Exports