'use client'; import { ButtonGroup, Button, Page, Spacer, useBodyScroll, useMediaQuery } from "@geist-ui/core" import { useCallback, useEffect, useMemo, useState } from "react" import styles from "./header.module.css" import useSignedIn from "../../lib/hooks/use-signed-in" import HomeIcon from "@geist-ui/icons/home" import MenuIcon from "@geist-ui/icons/menu" import GitHubIcon from "@geist-ui/icons/github" import SignOutIcon from "@geist-ui/icons/userX" import SignInIcon from "@geist-ui/icons/user" import SignUpIcon from "@geist-ui/icons/userPlus" import NewIcon from "@geist-ui/icons/plusCircle" import YourIcon from "@geist-ui/icons/list" import MoonIcon from "@geist-ui/icons/moon" import SettingsIcon from "@geist-ui/icons/settings" import SunIcon from "@geist-ui/icons/sun" import { useTheme } from "next-themes" import useUserData from "@lib/hooks/use-user-data" import Link from "next/link" import { useRouter } from "next/router" type Tab = { name: string icon: JSX.Element value: string onClick?: () => void href?: string } const Header = () => { const router = useRouter() const [expanded, setExpanded] = useState(false) const [, setBodyHidden] = useBodyScroll(null, { scrollLayer: true }) const isMobile = useMediaQuery("xs", { match: "down" }) const { signedIn: isSignedIn } = useSignedIn() const userData = useUserData() const [pages, setPages] = useState([]) const { setTheme, resolvedTheme } = useTheme() useEffect(() => { setBodyHidden(expanded) }, [expanded, setBodyHidden]) useEffect(() => { if (!isMobile) { setExpanded(false) } }, [isMobile]) useEffect(() => { const defaultPages: Tab[] = [ { name: isMobile ? "GitHub" : "", href: "https://github.com/maxleiter/drift", icon: , value: "github" }, { name: isMobile ? "Change theme" : "", onClick: function () { if (typeof window !== "undefined") setTheme(resolvedTheme === "light" ? "dark" : "light") }, icon: resolvedTheme === "light" ? : , value: "theme" } ] if (isSignedIn) setPages([ { name: "new", icon: , value: "new", href: "/new" }, { name: "yours", icon: , value: "yours", href: "/mine" }, { name: "settings", icon: , value: "settings", href: "/settings" }, { name: "sign out", icon: , value: "signout", href: "/signout" }, ...defaultPages ]) else setPages([ { name: "home", icon: , value: "home", href: "/" }, { name: "Sign in", icon: , value: "signin", href: "/signin" }, { name: "Sign up", icon: , value: "signup", href: "/signup" }, ...defaultPages ]) if (userData?.role === "admin") { setPages((pages) => [ ...pages, { name: "admin", icon: , value: "admin", href: "/admin" } ]) } // TODO: investigate deps causing infinite loop // eslint-disable-next-line react-hooks/exhaustive-deps }, [isMobile, isSignedIn, resolvedTheme, userData]) const onTabChange = useCallback( (tab: string) => { if (typeof window === "undefined") return const match = pages.find((page) => page.value === tab) if (match?.onClick) { match.onClick() } }, [pages] ) const getButton = useCallback( (tab: Tab) => { const activeStyle = router.pathname === tab.href ? styles.active : "" if (tab.onClick) { return ( ) } else if (tab.href) { return ( ( ) ); } }, [isMobile, onTabChange, router.pathname] ) const buttons = useMemo(() => pages.map(getButton), [pages, getButton]) return (
{buttons}
{/* setExpanded should occur elsewhere; we don't want to close if they change themes */} {isMobile && expanded && (
setExpanded(!expanded)}> {buttons}
)}
) } export default Header