Header — Transparent Over Hero

Installation

Variants

Files installed (1)

• components/blocks/HeaderTransparentScroll.tsx3.4 kB

  Copy

  'use client'
  
  import { useEffect, useState } from 'react'
  import { Menu, Layers } from 'lucide-react'
  import { Button } from '@/components/ui/button'
  import { Separator } from '@/components/ui/separator'
  import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'
  
  const links = [
    { label: 'Product', href: '#product' },
    { label: 'Solutions', href: '#solutions' },
    { label: 'Pricing', href: '#pricing' },
    { label: 'Docs', href: '#docs' },
  ]
  
  export function HeaderTransparentScroll() {
    // Starts unscrolled so server and first client paint agree; the listener is
    // the only thing that swaps in the solid surface.
    const [scrolled, setScrolled] = useState(false)
    const [open, setOpen] = useState(false)
  
    useEffect(() => {
      const onScroll = () => setScrolled(window.scrollY > 24)
      onScroll()
      window.addEventListener('scroll', onScroll, { passive: true })
      return () => window.removeEventListener('scroll', onScroll)
    }, [])
  
    return (
      <header
        data-slot="header-transparent-scroll"
        className={`fixed inset-x-0 top-0 z-40 transition-colors duration-200 ${
          scrolled ? 'border-border bg-background/85 border-b backdrop-blur' : 'border-b border-transparent'
        }`}
      >
        <div className="mx-auto flex h-16 max-w-6xl items-center gap-6 px-6">
          <a href="#top" className="flex items-center gap-2 font-semibold tracking-tight">
            <Layers className="text-primary size-5" aria-hidden="true" />
            Northwind
          </a>
  
          <nav className="hidden items-center gap-1 md:flex" aria-label="Primary">
            {links.map((link) => (
              <a
                key={link.href}
                href={link.href}
                className="text-muted-foreground hover:text-foreground hover:bg-muted focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none"
              >
                {link.label}
              </a>
            ))}
          </nav>
  
          <div className="ml-auto hidden items-center gap-2 md:flex">
            <Button variant="ghost" size="sm">
              Sign in
            </Button>
            <Button size="sm">Start free</Button>
          </div>
  
          <Sheet open={open} onOpenChange={setOpen}>
            <SheetTrigger asChild>
              <Button variant="ghost" size="icon" className="ml-auto md:hidden" aria-label="Open navigation menu">
                <Menu className="size-5" aria-hidden="true" />
              </Button>
            </SheetTrigger>
            <SheetContent side="right" className="w-72">
              <SheetHeader>
                <SheetTitle>Menu</SheetTitle>
              </SheetHeader>
              <nav className="mt-6 grid gap-1" aria-label="Mobile">
                {links.map((link) => (
                  <a
                    key={link.href}
                    href={link.href}
                    className="hover:bg-muted rounded-md px-3 py-2 text-sm font-medium transition-colors"
                    onClick={() => setOpen(false)}
                  >
                    {link.label}
                  </a>
                ))}
              </nav>
              <Separator className="my-5" />
              <div className="grid gap-2">
                <Button variant="outline">Sign in</Button>
                <Button>Start free</Button>
              </div>
            </SheetContent>
          </Sheet>
        </div>
      </header>
    )
  }
  

Raw manifest:https://uipkge.dev/r/react/header-transparent-scroll.json