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

'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>
        </>
    )
}