80 lines
3.1 KiB
JavaScript
80 lines
3.1 KiB
JavaScript
// © XlXi 2021
|
|
// Graphictoria 5
|
|
|
|
import React from 'react';
|
|
import { Link, NavLink } from 'react-router-dom';
|
|
import SearchBar from './SearchBar.js';
|
|
|
|
const Navbar = (props) => {
|
|
return (
|
|
<>
|
|
<nav className="navbar graphictoria-navbar fixed-top navbar-expand-md shadow-sm">
|
|
<div className="container-md">
|
|
<NavLink className="navbar-brand" to={props.user? `/home` : `/`}>
|
|
<img src="/images/logo.png" alt="Graphictoria" width="43" height="43" draggable="false"/>
|
|
</NavLink>
|
|
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#graphictoria-nav" aria-controls="graphictoria-nav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span className="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div className="collapse navbar-collapse" id="graphictoria-nav">
|
|
<ul className="navbar-nav me-auto">
|
|
{
|
|
!props.maintenanceEnabled ?
|
|
<>
|
|
<li className="nav-item">
|
|
<NavLink className="nav-link" to="/games">Games</NavLink>
|
|
</li>
|
|
<li className="nav-item">
|
|
<NavLink className="nav-link" to="/catalog">Catalog</NavLink>
|
|
</li>
|
|
<li className="nav-item">
|
|
<NavLink className="nav-link" to="/forum">Forum</NavLink>
|
|
</li>
|
|
<li className="nav-item dropdown">
|
|
{/* eslint-disable-next-line */}
|
|
<a className="nav-link dropdown-toggle" href="#" id="graphictoria-nav-dropdown" role="button" data-bs-toggle="dropdown" area-expanded="false">More</a>
|
|
<ul className="dropdown-menu graphictoria-nav-dropdown" area-labelledby="graphictoria-nav-dropdown">
|
|
<li><NavLink className="dropdown-item" to="/users">Users</NavLink></li>
|
|
<li><a className="dropdown-item" href="https://discord.gg/q666a2sF6d" target="_blank" rel="noreferrer">Discord</a></li>
|
|
</ul>
|
|
</li>
|
|
</>
|
|
:
|
|
<li className="nav-item">
|
|
<a className="nav-link" href="https://discord.gg/q666a2sF6d" target="_blank" rel="noreferrer">Discord</a>
|
|
</li>
|
|
}
|
|
</ul>
|
|
|
|
{
|
|
!props.maintenanceEnabled ?
|
|
<>
|
|
<SearchBar />
|
|
{props.user?
|
|
<div className='flex'>
|
|
<p className='my-auto me-3 text-muted'>
|
|
<img src='/images/symbols/token.svg' height='20' width='20' className='img-fluid me-1' />
|
|
${props.user.bank}
|
|
</p>
|
|
<li className="nav-item dropdown col flex alc">
|
|
<button className="btn btn-secondary nav-link dropdown-toggle" href="#" id="graphictoria-nav-dropdown" role="button" data-bs-toggle="dropdown" area-expanded="false">{props.user.username}</button>
|
|
<ul className="dropdown-menu graphictoria-nav-dropdown" area-labelledby="graphictoria-nav-dropdown">
|
|
<li><NavLink className="dropdown-item" to="/auth/settings">Settings</NavLink></li>
|
|
<li><a className="dropdown-item" href={`/account/logout`}>Logout</a></li>
|
|
</ul>
|
|
</li>
|
|
</div> : <Link className="btn btn-success" to="/login">Login / Sign up</Link>}
|
|
</>
|
|
:
|
|
null
|
|
}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div className="graphictoria-nav-margin">
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Navbar; |