fp/packages/next/app/components/navbar.tsx

98 lines
4.4 KiB
TypeScript

'use client'
import { useEffect, useState } from 'react'
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
import { faUser, faUpload } from "@fortawesome/free-solid-svg-icons";
import Link from 'next/link'
import { LoginButton, useAuth } from '@/components/auth'
export default function Navbar() {
const [isExpanded, setExpanded] = useState(false);
const [isProfileButton, setIsProfileButton] = useState(false);
const handleBurgerClick = () => {
setExpanded(!isExpanded);
};
const { authData } = useAuth()
useEffect(() => {
if (!!authData?.accessToken && !!authData?.user?.username) setIsProfileButton(true)
else setIsProfileButton(false)
}, [authData])
return (
<>
<nav className="navbar" role="navigation" aria-label="main navigation">
<div className="navbar-brand">
<Link className="navbar-item" href="/">
<h1 className="title">🔞💦 Futureporn.net</h1>
</Link>
<button
className="navbar-burger"
onClick={handleBurgerClick}
>
<span></span>
<span></span>
<span></span>
</button>
</div>
<div className={`navbar-menu ${isExpanded ? 'is-active' : ''}`} id="navMenu">
<div className='navbar-start'>
<Link className="navbar-item is-expanded" href="/vt">Vtubers</Link>
<Link className="navbar-item is-expanded" href="/archive">Archive</Link>
<Link className="navbar-item is-expanded" href="/about">About</Link>
<Link className="navbar-item is-expanded" href="/faq">FAQ</Link>
<Link className="navbar-item is-expanded" href="/goals">Goals</Link>
<Link className="navbar-item is-expanded" href="/patrons">Patrons</Link>
<Link className="navbar-item is-expanded" href="/tags">Tags</Link>
<Link className="navbar-item is-expanded" href="/api">API</Link>
</div>
<div className='navbar-end'>
<div className="navbar-item is-expanded">
<Link target="_blank" href="https://status.futureporn.net">
<span>Status </span>
<FontAwesomeIcon
icon={faExternalLinkAlt}
className="fab fa-external-link-alt"
></FontAwesomeIcon>
</Link>
</div>
{/* <div className="navbar-item">
<Link className="button " href="/upload">
<span className="mr-1">Upload</span>
<FontAwesomeIcon
icon={faUpload}
className="fas fa-upload"
></FontAwesomeIcon>
</Link>
</div> */}
<div className="navbar-item fp-profile-button">
{/* show the login button if user is anon */}
{/* show the profile button if the user is authed */}
{
(isProfileButton) ? (
<Link className="button" href="/profile">
<FontAwesomeIcon
icon={faUser}
className="fas fa-user-large mr-1"
></FontAwesomeIcon>
<span>{ authData?.user?.username || 'profile' }</span>
</Link>
) : (
<LoginButton></LoginButton>
)
}
</div>
</div>
</div>
</nav>
</>
)
}