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}
{isMobile && expanded && (
{buttons}
)}
) } export default Header