import { Fragment, useEffect, useRef } from 'react'
import Image from 'next/image'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { Popover, Transition } from '@headlessui/react'
import clsx from 'clsx'
import { Container } from '../components/Container'
function CloseIcon(props) {
return (
)
}
function ChevronDownIcon(props) {
return (
)
}
function SunIcon(props) {
return (
)
}
function MoonIcon(props) {
return (
)
}
function GithubIcon(props) {
return (
)
}
function MobileNavItem({ href, children }) {
return (
{children}
)
}
function MobileNavigation(props) {
return (
Menu
Navigation
)
}
function NavItem({ href, children }) {
let isActive = useRouter().pathname === href
return (
{children}
{isActive && (
)}
)
}
function DesktopNavigation(props) {
return (
)
}
function ModeToggle() {
function disableTransitionsTemporarily() {
document.documentElement.classList.add('[&_*]:!transition-none')
window.setTimeout(() => {
document.documentElement.classList.remove('[&_*]:!transition-none')
}, 0)
}
function toggleMode() {
disableTransitionsTemporarily()
let darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
let isSystemDarkMode = darkModeMediaQuery.matches
let isDarkMode = document.documentElement.classList.toggle('dark')
if (isDarkMode === isSystemDarkMode) {
delete window.localStorage.isDarkMode
} else {
window.localStorage.isDarkMode = isDarkMode
}
}
return (
)
}
function clamp(number, a, b) {
let min = Math.min(a, b)
let max = Math.max(a, b)
return Math.min(Math.max(number, min), max)
}
export function Header() {
return (
<>