'use client'; import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'; import Link from 'next-intl/link'; import { useState } from 'react'; import OpenMobileMenu from './open-mobile-menu'; interface MobileMenuModalProps { items: []; } export default function MobileMenuModal({ items }: MobileMenuModalProps) { const [isOpen, setIsOpen] = useState(false); return ( <> <Sheet open={isOpen} onOpenChange={() => setIsOpen(!isOpen)}> <SheetTrigger aria-label="Open menu"> <OpenMobileMenu /> </SheetTrigger> <SheetContent side="left" className="bg-app"> <SheetHeader> <SheetTitle className="text-lg font-semibold">Menu</SheetTitle> </SheetHeader> <div className="mt-4"> <ul className="flex flex-col gap-2"> {items.map((item: { title: string; slug: string }, i: number) => { return ( <li key={i}> <Link onClick={() => setIsOpen(false)} href={`/category/${item.slug}`}> {item.title} </Link> </li> ); })} </ul> </div> </SheetContent> </Sheet> </> ); }