57 lines
2.0 KiB
TypeScript
57 lines
2.0 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 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>
|
||
|
|
);
|
||
|
|
}
|