header-2

1"use client";
2import React from "react";
3import { createPortal } from "react-dom";
4import { LogoIcon } from "@/components/logo";
5import { MenuToggleIcon } from "@/components/menu-toggle-icon";
6import { Button, buttonVariants } from "@/components/ui/button";
7import { useScroll } from "@/hooks/use-scroll";
8import { cn } from "@/lib/utils";
9 
10export function Header() {
11  const [open, setOpen] = React.useState(false);
12  const scrolled = useScroll(10);
13 
14  const links = [
15    {
16      label: "Features",
17      href: "#",
18    },
19    {
20      label: "Pricing",
21      href: "#",
22    },
23    {
24      label: "About",
25      href: "#",
26    },
27  ];
28 
29  React.useEffect(() => {
30    if (open) {
31      // Disable scroll
32      document.body.style.overflow = "hidden";
33    } else {
34      // Re-enable scroll
35      document.body.style.overflow = "";
36    }
37 
38    // Cleanup when component unmounts (important for Next.js)
39    return () => {
40      document.body.style.overflow = "";
41    };
42  }, [open]);
43 
44  return (
45    <header
46      className={cn(
47        "sticky top-0 z-50 mx-auto w-full max-w-4xl border-transparent border-b md:rounded-md md:border md:transition-all md:ease-out",
48        {
49          "border-border bg-background/95 backdrop-blur-lg supports-backdrop-filter:bg-background/50 md:top-4 md:max-w-3xl md:shadow":
50            scrolled,
51        }
52      )}
53    >
54      <nav
55        className={cn(
56          "flex h-14 w-full items-center justify-between px-4 md:h-12 md:transition-all md:ease-out",
57          {
58            "md:px-2": scrolled,
59          }
60        )}
61      >
62        <a className="rounded-md p-2 hover:bg-accent" href="#">
63          <LogoIcon className="size-6" />
64        </a>
65        <div className="hidden items-center gap-2 md:flex">
66          {links.map((link, _i) => (
67            <a
68              className={buttonVariants({ variant: "ghost" })}
69              href={link.href}
70              key={link.label}
71            >
72              {link.label}
73            </a>
74          ))}
75          <Button variant="outline">Sign In</Button>
76          <Button>Get Started</Button>
77        </div>
78        <Button
79          className="md:hidden"
80          onClick={() => setOpen(!open)}
81          size="icon"
82          variant="outline"
83        >
84          <MenuToggleIcon className="size-5" duration={300} open={open} />
85        </Button>
86      </nav>
87 
88      <MobileMenu className="flex flex-col justify-between gap-2" open={open}>
89        <div className="grid gap-y-2">
90// … truncated