import { Page, ButtonGroup, Button, useBodyScroll, useMediaQuery, Tabs, Spacer } from "@geist-ui/core"; import { Github as GitHubIcon, UserPlus as SignUpIcon, User as SignInIcon, Home as HomeIcon, Menu as MenuIcon, Tool as SettingsIcon, UserX as SignoutIcon, PlusCircle as NewIcon, List as YourIcon, Moon, Sun } from "@geist-ui/icons"; import { DriftProps } from "../../pages/_app"; import { useEffect, useMemo, useState } from "react"; import styles from './header.module.css'; import { useRouter } from "next/router"; import useSignedIn from "../../lib/hooks/use-signed-in"; type Tab = { name: string icon: JSX.Element condition?: boolean value: string onClick?: () => void href?: string } const Header = ({ changeTheme, theme }: DriftProps) => { const router = useRouter(); const [selectedTab, setSelectedTab] = useState(router.pathname === '/' ? 'home' : router.pathname.split('/')[1]); const [expanded, setExpanded] = useState(false) const [, setBodyHidden] = useBodyScroll(null, { scrollLayer: true }) const isMobile = useMediaQuery('xs', { match: 'down' }) const isSignedIn = useSignedIn() const [pages, setPages] = useState([]) useEffect(() => { setBodyHidden(expanded) }, [expanded, setBodyHidden]) useEffect(() => { if (!isMobile) { setExpanded(false) } }, [isMobile]) useEffect(() => { const pageList: Tab[] = [ { name: "Home", href: "/", icon: , condition: !isSignedIn, value: "home" }, { name: "New", href: "/new", icon: , condition: isSignedIn, value: "new" }, { name: "Yours", href: "/mine", icon: , condition: isSignedIn, value: "mine" }, { name: "Sign out", href: "/signout", icon: , condition: isSignedIn, value: "signout" }, { name: "Sign in", href: "/signin", icon: , condition: !isSignedIn, value: "signin" }, { name: "Sign up", href: "/signup", icon: , condition: !isSignedIn, value: "signup" }, { name: isMobile ? "GitHub" : "", href: "https://github.com/maxleiter/drift", icon: , condition: true, value: "github" }, { name: isMobile ? "Change theme" : "", onClick: function () { if (typeof window !== 'undefined') { changeTheme(); setSelectedTab(''); } }, icon: theme === 'light' ? : , condition: true, value: "theme", } ] setPages(pageList.filter(page => page.condition)) }, [changeTheme, isMobile, isSignedIn, theme]) // useEffect(() => { // setSelectedTab(pages.find((page) => { // console.log(page.href, router.asPath) // if (page.href && page.href === router.asPath) { // return true // } // })?.href) // }, [pages, router, router.pathname]) const onTabChange = (tab: string) => { const match = pages.find(page => page.value === tab) if (match?.onClick) { match.onClick() } else if (match?.href) { router.push(`${match.href}`) } } return (
{pages.map((tab) => { return {tab.icon} {tab.name}} value={tab.value} key={`${tab.value}`} /> })}
{isMobile && expanded && (
{pages.map((tab, index) => { return })}
)}
) } export default Header // {/* {/* // // // // // * /}