new-personal-site/layouts/main/Aside.tsx
2024-12-09 16:36:17 +01:00

41 lines
1.3 KiB
TypeScript

import Logo from "@/components/general/Logo";
import Stack from "@/components/lib/layout/Stack";
import { PropsWithChildren } from "react";
import { twMerge } from "tailwind-merge";
import { SocialLinks } from "./(data)/links";
import SocialLink from "./(partials)/SocialLink";
type Props = {};
export default function Aside({}: Props) {
return (
<aside
className={twMerge(
"max-w-[100px] border-0 border-r max-h-[100vh]",
"border-white/10 border-solid flex flex-col",
"items-start hidden md:flex sticky top-0"
)}
>
<div
className={twMerge(
"px-6 py-4 h-[var(--header-height)] border-0",
"border-b border-white/10"
)}
>
<Logo size={28} />
</div>
<Stack className="items-center w-full py-6 mt-auto">
{SocialLinks.map((link, index) => {
return <SocialLink key={index} link={link} />;
})}
</Stack>
<div
className={twMerge(
"px-6 py-4 h-[var(--header-height)] border-0",
"border-t border-white/10 w-full"
)}
></div>
</aside>
);
}