Updates

layouts/main/(sections)/MobileMenu.tsx

@@ -2,13 +2,13 @@ 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";
+import LinkList from "@/components/lib/elements/LinkList";
 
 type Props = {
     menuOpen: boolean;
@@ -19,12 +19,13 @@ 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",
+                "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)}
@@ -33,19 +34,15 @@ export default function MobileMenu({ menuOpen, setMenuOpen }: Props) {
             </Button>
             <Stack className="w-full h-full">
                 <Logo size={40} />
-                <Divider />
+                <Divider dashed className="border-[2px] mt-4 mb-2" />
                 <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>
-                        );
-                    })}
+                    <LinkList
+                        links={HeaderLinks}
+                        className="flex-col items-stretch"
+                    />
                 </Stack>
-                <Divider />
-                <Row className="items-center w-full py-6 mt-auto gap-10 mt-auto">
+                <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} />;
                     })}