120 lines
3.3 KiB
TypeScript
120 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { AnimatePresence, motion } from "motion/react";
|
|
import Image from "next/image";
|
|
import { type ReactNode, useRef, useState } from "react";
|
|
import { FALLBACK_HOTEL_NAME } from "@/lib/brand";
|
|
import { mobileMenuVariants } from "@/lib/motion";
|
|
|
|
interface MobileNavProps {
|
|
children: ReactNode;
|
|
menuLabel?: string;
|
|
closeLabel?: string;
|
|
brandLabel?: string;
|
|
}
|
|
|
|
export function MobileNav({
|
|
children,
|
|
menuLabel = "Open menu",
|
|
closeLabel = "Close menu",
|
|
brandLabel = FALLBACK_HOTEL_NAME,
|
|
}: MobileNavProps) {
|
|
const [open, setOpen] = useState(false);
|
|
const detailsRef = useRef<HTMLDivElement>(null);
|
|
|
|
return (
|
|
<div ref={detailsRef} className="group relative md:hidden">
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen((o) => !o)}
|
|
className="list-none cursor-pointer flex items-center justify-center w-11 h-11 rounded-xl shrink-0
|
|
transition-colors duration-150
|
|
hover:bg-[color-mix(in_srgb,var(--color-primary)_12%,transparent)]
|
|
active:scale-[0.96]
|
|
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary-readable,var(--color-primary))] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-navbar)]"
|
|
aria-label={open ? closeLabel : menuLabel}
|
|
aria-expanded={open}
|
|
>
|
|
<motion.svg
|
|
className="w-6 h-6"
|
|
animate={{ rotate: open ? 90 : 0 }}
|
|
transition={{ duration: 0.2 }}
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
{open ? (
|
|
<>
|
|
<line x1="18" y1="6" x2="6" y2="18" />
|
|
<line x1="6" y1="6" x2="18" y2="18" />
|
|
</>
|
|
) : (
|
|
<>
|
|
<line x1="4" y1="7" x2="20" y2="7" />
|
|
<line x1="4" y1="12" x2="20" y2="12" />
|
|
<line x1="4" y1="17" x2="20" y2="17" />
|
|
</>
|
|
)}
|
|
</motion.svg>
|
|
</button>
|
|
|
|
<AnimatePresence>
|
|
{open && (
|
|
<motion.div
|
|
className="absolute left-0 top-full mt-2 w-[min(86vw,320px)] z-50 origin-top-left"
|
|
style={{ backgroundColor: "transparent" }}
|
|
variants={mobileMenuVariants}
|
|
initial="hidden"
|
|
animate="visible"
|
|
exit="exit"
|
|
>
|
|
<div
|
|
className="flex flex-col gap-y-1 p-2 rounded-2xl border shadow-xl
|
|
bg-[var(--color-dropdown,var(--color-surface,#fff))]"
|
|
style={{
|
|
borderColor:
|
|
"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
|
|
boxShadow:
|
|
"0 12px 40px color-mix(in srgb, rgb(0 0 0) 22%, transparent)",
|
|
}}
|
|
>
|
|
<div
|
|
className="flex items-center gap-2 px-3 py-2 mb-1 rounded-xl"
|
|
style={{
|
|
backgroundColor:
|
|
"color-mix(in srgb, var(--color-primary) 12%, transparent)",
|
|
}}
|
|
>
|
|
<Image
|
|
src="/assets/images/icons/navigation/home.png"
|
|
alt=""
|
|
width={22}
|
|
height={22}
|
|
className="shrink-0"
|
|
/>
|
|
<span
|
|
className="text-sm font-extrabold uppercase tracking-wide"
|
|
style={{
|
|
color:
|
|
"var(--color-navbar-text-readable, var(--color-text))",
|
|
}}
|
|
>
|
|
{brandLabel}
|
|
</span>
|
|
<span className="ml-auto text-[11px] font-semibold uppercase tracking-wider opacity-75">
|
|
{closeLabel}
|
|
</span>
|
|
</div>
|
|
|
|
{children}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
}
|