import { forwardRef } from 'react' import Link from 'next/link' import clsx from 'clsx' import { motion, useScroll, useTransform } from 'framer-motion' import { Button } from '@/components/Button' import { Logo } from '@/components/Logo' import { MobileNavigation, useIsInsideMobileNavigation, } from '@/components/MobileNavigation' import { useMobileNavigationStore } from '@/components/MobileNavigation' import { ModeToggle } from '@/components/ModeToggle' function TopLevelNavItem({ href, children }) { return (
  • {children}
  • ) } export const Header = forwardRef(function Header({ className }, ref) { let { isOpen: mobileNavIsOpen } = useMobileNavigationStore() let isInsideMobileNavigation = useIsInsideMobileNavigation() let { scrollY } = useScroll() let bgOpacityLight = useTransform(scrollY, [0, 72], [0.5, 0.9]) let bgOpacityDark = useTransform(scrollY, [0, 72], [0.2, 0.8]) return (
    ) })