54 lines
1.9 KiB
TypeScript
54 lines
1.9 KiB
TypeScript
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 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";
|
|
import LinkList from "@/components/lib/elements/LinkList";
|
|
|
|
type Props = {
|
|
menuOpen: boolean;
|
|
setMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
|
};
|
|
|
|
export default function MobileMenu({ menuOpen, setMenuOpen }: Props) {
|
|
return (
|
|
<div
|
|
className={twMerge(
|
|
"fixed top-0 w-full h-full overflow-y-auto",
|
|
"z-[100] p-10 bg-background dark:bg-background-dark",
|
|
menuOpen ? "right-0" : "right-[100vw]"
|
|
)}
|
|
>
|
|
<Button
|
|
title="Close Mobile Menu"
|
|
variant="ghost"
|
|
className="absolute top-10 right-10"
|
|
onClick={() => setMenuOpen(false)}
|
|
>
|
|
<X />
|
|
</Button>
|
|
<Stack className="w-full h-full">
|
|
<Logo size={40} />
|
|
<Divider dashed className="border-[2px] mt-4 mb-2" />
|
|
<Stack className="w-full items-stretch">
|
|
<LinkList
|
|
links={HeaderLinks}
|
|
className="flex-col items-stretch"
|
|
/>
|
|
</Stack>
|
|
<Divider dashed className="border-[2px] my-4" />
|
|
<Row className="items-center w-full py-6 gap-10 mt-auto">
|
|
{SocialLinks.map((link, index) => {
|
|
return <SocialLink key={index} link={link} />;
|
|
})}
|
|
</Row>
|
|
</Stack>
|
|
</div>
|
|
);
|
|
}
|