import Logo from "@/components/general/Logo"; import Stack from "@/components/lib/layout/Stack"; import { twMerge } from "tailwind-merge"; import { HeaderLinks, SocialLinks } from "../(data)/links"; import HeaderLink from "../(partials)/HeaderLink"; import React from "react"; import Divider from "@/components/lib/layout/Divider"; import Button from "@/components/lib/layout/Button"; import { X } from "lucide-react"; import SocialLink from "../(partials)/SocialLink"; import Row from "@/components/lib/layout/Row"; type Props = { menuOpen: boolean; setMenuOpen: React.Dispatch<React.SetStateAction<boolean>>; }; export default function MobileMenu({ menuOpen, setMenuOpen }: Props) { return ( <div className={twMerge( "fixed top-0 bg-[var(--bg-color)] w-full h-full overflow-y-auto", "z-[100] p-10", menuOpen ? "right-0" : "right-[100vw]" )} > <Button variant="ghost" className="absolute top-10 right-10" onClick={() => setMenuOpen(false)} > <X /> </Button> <Stack className="w-full h-full"> <Logo size={40} /> <Divider /> <Stack className="w-full items-stretch"> {HeaderLinks.map((link, index) => { return ( <React.Fragment key={index}> <HeaderLink key={index} link={link} /> {index < HeaderLinks.length - 1 && <Divider />} </React.Fragment> ); })} </Stack> <Divider /> <Row className="items-center w-full py-6 mt-auto gap-10 mt-auto"> {SocialLinks.map((link, index) => { return <SocialLink key={index} link={link} />; })} </Row> </Stack> </div> ); }