1import { forwardRef } from 'react'
 2import Link from 'next/link'
 3import clsx from 'clsx'
 4import { motion, useScroll, useTransform } from 'framer-motion'
 5
 6import { Button } from '@/components/Button'
 7import { Logo } from '@/components/Logo'
 8import {
 9  MobileNavigation,
10  useIsInsideMobileNavigation,
11} from '@/components/MobileNavigation'
12import { useMobileNavigationStore } from '@/components/MobileNavigation'
13import { ModeToggle } from '@/components/ModeToggle'
14
15function TopLevelNavItem({ href, children }) {
16  return (
17    <li>
18      <Link
19        href={href}
20        className="text-sm leading-5 text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"
21      >
22        {children}
23      </Link>
24    </li>
25  )
26}
27
28export const Header = forwardRef(function Header({ className }, ref) {
29  let { isOpen: mobileNavIsOpen } = useMobileNavigationStore()
30  let isInsideMobileNavigation = useIsInsideMobileNavigation()
31
32  let { scrollY } = useScroll()
33  let bgOpacityLight = useTransform(scrollY, [0, 72], [0.5, 0.9])
34  let bgOpacityDark = useTransform(scrollY, [0, 72], [0.2, 0.8])
35
36  return (
37    <motion.div
38      ref={ref}
39      className={clsx(
40        className,
41        'fixed inset-x-0 top-0 z-50 flex h-14 items-center justify-between gap-12 px-4 transition sm:px-6 lg:left-72 lg:z-30 lg:px-8 xl:left-80',
42        !isInsideMobileNavigation &&
43          'backdrop-blur-sm dark:backdrop-blur lg:left-72 xl:left-80',
44        isInsideMobileNavigation
45          ? 'bg-white dark:bg-zinc-900'
46          : 'bg-white/[var(--bg-opacity-light)] dark:bg-zinc-900/[var(--bg-opacity-dark)]'
47      )}
48      style={{
49        '--bg-opacity-light': bgOpacityLight,
50        '--bg-opacity-dark': bgOpacityDark,
51      }}
52    >
53      <div
54        className={clsx(
55          'absolute inset-x-0 top-full h-px transition',
56          (isInsideMobileNavigation || !mobileNavIsOpen) &&
57            'bg-zinc-900/7.5 dark:bg-white/7.5'
58        )}
59      />
60      <div className="flex items-center gap-5 lg:hidden">
61        <MobileNavigation />
62        <Link href="/" aria-label="Home">
63          <Logo className="h-6" />
64        </Link>
65      </div>
66      <div className="flex items-center gap-5">
67        <nav className="hidden md:block">
68          <ul role="list" className="flex items-center gap-8">
69            <TopLevelNavItem href="/">API</TopLevelNavItem>
70            <TopLevelNavItem href="#">Documentation</TopLevelNavItem>
71            <TopLevelNavItem href="#">Support</TopLevelNavItem>
72          </ul>
73        </nav>
74        <div className="hidden md:block md:h-5 md:w-px md:bg-zinc-900/10 md:dark:bg-white/15" />
75        <div className="flex gap-4">
76          <ModeToggle />
77        </div>
78        <div className="hidden min-[416px]:contents">
79          <Button href="#">Sign in</Button>
80        </div>
81      </div>
82    </motion.div>
83  )
84})