new-personal-site/layouts/main/Header.tsx

38 lines
1.3 KiB
TypeScript
Raw Normal View History

2024-12-09 15:36:17 +00:00
import { twMerge } from "tailwind-merge";
import { HeaderLinks } from "./(data)/links";
import HeaderLink from "./(partials)/HeaderLink";
import Row from "@/components/lib/layout/Row";
import Logo from "@/components/general/Logo";
import { Menu } from "lucide-react";
import Button from "@/components/lib/layout/Button";
import React from "react";
type Props = {
menuOpen: boolean;
setMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
};
export default function Header({ menuOpen, setMenuOpen }: Props) {
return (
<header
className={twMerge(
"h-[var(--header-height)] border-0 border-b border-white/10",
"w-full flex flex-row items-center px-6 sticky top-0",
"bg-[var(--bg-color)] z-10"
)}
>
<Row className="gap-6 ml-auto hidden md:flex">
{HeaderLinks.map((link, index) => {
return <HeaderLink key={index} link={link} />;
})}
</Row>
<Row className="flex md:hidden w-full justify-between">
<Logo size={25} />
<Button variant="ghost" onClick={() => setMenuOpen(!menuOpen)}>
<Menu />
</Button>
</Row>
</header>
);
}