header-1

1"use client";
2import React from "react";
3import { createPortal } from "react-dom";
4import { Logo } 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      document.body.style.overflow = "hidden";
32    } else {
33      document.body.style.overflow = "";
34    }
35    return () => {
36      document.body.style.overflow = "";
37    };
38  }, [open]);
39 
40  return (
41    <header
42      className={cn("sticky top-0 z-50 w-full border-transparent border-b", {
43        "border-border bg-background/95 backdrop-blur-lg supports-[backdrop-filter]:bg-background/50":
44          scrolled,
45      })}
46    >
47      <nav className="mx-auto flex h-14 w-full max-w-5xl items-center justify-between px-4">
48        <div className="rounded-md p-2 hover:bg-accent">
49          <Logo className="h-4" />
50        </div>
51        <div className="hidden items-center gap-2 md:flex">
52          {links.map((link, i) => (
53            <a
54              className={buttonVariants({ variant: "ghost" })}
55              href={link.href}
56              key={i}
57            >
58              {link.label}
59            </a>
60          ))}
61          <Button variant="outline">Sign In</Button>
62          <Button>Get Started</Button>
63        </div>
64        <Button
65          aria-controls="mobile-menu"
66          aria-expanded={open}
67          aria-label="Toggle menu"
68          className="md:hidden"
69          onClick={() => setOpen(!open)}
70          size="icon"
71          variant="outline"
72        >
73          <MenuToggleIcon className="size-5" duration={300} open={open} />
74        </Button>
75      </nav>
76      <MobileMenu className="flex flex-col justify-between gap-2" open={open}>
77        <div className="grid gap-y-2">
78          {links.map((link) => (
79            <a
80              className={buttonVariants({
81                variant: "ghost",
82                className: "justify-start",
83              })}
84              href={link.href}
85              key={link.label}
86            >
87              {link.label}
88            </a>
89// … truncated