CoastalCommitsPastes/client/components/header/index.tsx

193 lines
6.3 KiB
TypeScript
Raw Normal View History

2022-03-10 22:51:10 -05:00
import { Page, ButtonGroup, Button, useBodyScroll, useMediaQuery, Tabs, Spacer } from "@geist-ui/core";
2022-03-09 05:06:03 -05:00
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";
2022-03-06 19:46:59 -05:00
import { DriftProps } from "../../pages/_app";
2022-03-07 19:42:47 -05:00
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
}
2022-03-07 19:54:33 -05:00
const Header = ({ changeTheme, theme }: DriftProps) => {
2022-03-07 19:42:47 -05:00
const router = useRouter();
const [selectedTab, setSelectedTab] = useState<string>(router.pathname === '/' ? 'home' : router.pathname.split('/')[1]);
2022-03-07 19:42:47 -05:00
const [expanded, setExpanded] = useState<boolean>(false)
const [, setBodyHidden] = useBodyScroll(null, { scrollLayer: true })
const isMobile = useMediaQuery('xs', { match: 'down' })
const isSignedIn = useSignedIn()
const [pages, setPages] = useState<Tab[]>([])
2022-03-07 19:42:47 -05:00
useEffect(() => {
setBodyHidden(expanded)
}, [expanded, setBodyHidden])
useEffect(() => {
if (!isMobile) {
setExpanded(false)
}
}, [isMobile])
useEffect(() => {
const pageList: Tab[] = [
{
name: "Home",
href: "/",
icon: <HomeIcon />,
condition: !isSignedIn,
value: "home"
2022-03-07 19:42:47 -05:00
},
{
name: "New",
href: "/new",
icon: <NewIcon />,
condition: isSignedIn,
value: "new"
2022-03-09 05:06:03 -05:00
},
{
name: "Yours",
href: "/mine",
icon: <YourIcon />,
condition: isSignedIn,
value: "mine"
},
{
name: "Sign out",
href: "/signout",
icon: <SignoutIcon />,
condition: isSignedIn,
value: "signout"
},
{
name: "Sign in",
href: "/signin",
icon: <SignInIcon />,
condition: !isSignedIn,
value: "signin"
},
{
name: "Sign up",
href: "/signup",
icon: <SignUpIcon />,
condition: !isSignedIn,
value: "signup"
},
{
name: isMobile ? "GitHub" : "",
href: "https://github.com/maxleiter/drift",
icon: <GitHubIcon />,
condition: true,
value: "github"
},
{
name: isMobile ? "Change theme" : "",
onClick: function () {
if (typeof window !== 'undefined') {
changeTheme();
setSelectedTab('');
}
},
icon: theme === 'light' ? <Moon /> : <Sun />,
condition: true,
value: "theme",
2022-03-07 19:42:47 -05:00
}
]
setPages(pageList.filter(page => page.condition))
}, [changeTheme, isMobile, isSignedIn, theme])
// useEffect(() => {
// setSelectedTab(pages.find((page) => {
2022-03-10 22:51:10 -05:00
// 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}`)
}
}
2022-03-07 19:42:47 -05:00
return (
2022-03-07 21:36:36 -05:00
<Page.Header height={'var(--page-nav-height)'} margin={0} paddingBottom={0} paddingTop={"var(--gap)"}>
<div className={styles.tabs}>
2022-03-07 19:42:47 -05:00
<Tabs
value={selectedTab}
leftSpace={0}
align="center"
hideDivider
hideBorder
onChange={onTabChange}>
{pages.map((tab) => {
return <Tabs.Item
font="14px"
label={<>{tab.icon} {tab.name}</>}
value={tab.value}
key={`${tab.value}`}
/>
2022-03-07 19:42:47 -05:00
})}
</Tabs>
</div>
<div className={styles.controls}>
<Button
auto
type="abort"
2022-03-09 04:50:55 -05:00
onClick={() => setExpanded(!expanded)}
aria-label="Menu"
2022-03-09 04:50:55 -05:00
>
<Spacer height={5 / 6} width={0} />
2022-03-09 05:06:03 -05:00
<MenuIcon />
</Button>
2022-03-07 19:42:47 -05:00
</div>
2022-03-07 21:36:36 -05:00
{isMobile && expanded && (<div className={styles.mobile}>
<ButtonGroup vertical>
{pages.map((tab, index) => {
return <Button
key={`${tab.name}-${index}`}
onClick={() => onTabChange(tab.value)}
icon={tab.icon}
>
{tab.name}
</Button>
2022-03-07 21:36:36 -05:00
})}
</ButtonGroup>
</div>)}
2022-03-06 19:46:59 -05:00
</Page.Header >
)
}
2022-03-07 19:42:47 -05:00
export default Header
// {/* {/* <ButtonGroup>
// <Button onClick={() => {
// }}><Link href="/signin">Sign out</Link></Button>
// <Button>
// <Link href="/mine">
// Yours
// </Link>
// </Button>
// <Button>
// {/* TODO: Link outside Button, but seems to break ButtonGroup */}
// <Link href="/new">
// New
// </Link>
// </Button >
// <Button onClick={() => changeTheme()}>
// <ShiftBy y={6}>{theme.type === 'light' ? <Moon /> : <Sun />}</ShiftBy>
// </Button>
// </ButtonGroup > * /}