First Commit

2024-12-09 16:36:17 +01:00
parent f24b493566
commit b037cec100
128 changed files with 3281 additions and 193 deletions
@@ -0,0 +1,56 @@
+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>
+    );
+}