94 lines
4.0 KiB
TypeScript
94 lines
4.0 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
|
|
import { faUpload } from "@fortawesome/free-solid-svg-icons";
|
|
import Link from 'next/link'
|
|
import { LoginButton, ProfileButton } from './auth-buttons';
|
|
import { Spinner } from './spinner';
|
|
import ProtectedRoute from "../components/protected-route";
|
|
|
|
export default function Navbar() {
|
|
const [isExpanded, setExpanded] = useState(false);
|
|
|
|
|
|
|
|
const handleBurgerClick = () => {
|
|
setExpanded(!isExpanded);
|
|
};
|
|
|
|
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">
|
|
<ProtectedRoute
|
|
requiredUserRole='patron'
|
|
accessDenied={<></>}
|
|
>
|
|
<Link className="button " href="/upload">
|
|
<span className="mr-1">Upload</span>
|
|
<FontAwesomeIcon
|
|
icon={faUpload}
|
|
className="fas fa-upload"
|
|
></FontAwesomeIcon>
|
|
</Link>
|
|
</ProtectedRoute>
|
|
</div>
|
|
|
|
<div className='navbar-item'>
|
|
<ProtectedRoute
|
|
requiredUserRole="default-roles-futureporn"
|
|
accessDenied={<LoginButton></LoginButton>}
|
|
loading={<button disabled className="button"><Spinner></Spinner></button>}
|
|
>
|
|
<ProfileButton></ProfileButton>
|
|
</ProtectedRoute>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</>
|
|
)
|
|
} |