77 lines
3.6 KiB
JavaScript
77 lines
3.6 KiB
JavaScript
import React, { useEffect, useState } from 'react'
|
|
import { NavLink, useLocation } from 'react-router-dom'
|
|
|
|
import '../Css/Navbar.css'
|
|
|
|
import logo from '../../../Images/logo.png'
|
|
import { Lock as LockIcon } from '@mui/icons-material';
|
|
|
|
function Navbar() {
|
|
const location = useLocation();
|
|
const isManagementPage = location.pathname.startsWith('/manage/');
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMenuOpen(false);
|
|
}, [location.pathname]);
|
|
|
|
const toggleMenu = () => setMenuOpen(prev => !prev);
|
|
const closeMenu = () => setMenuOpen(false);
|
|
|
|
return (
|
|
<>
|
|
<header>
|
|
<div className="logo">
|
|
<NavLink className="logo" exact to="/">
|
|
<img src={logo} className="imageNav" alt="Logo" />
|
|
<p className="logo">Upload your Project Images</p>
|
|
</NavLink>
|
|
</div>
|
|
<nav aria-label="Hauptnavigation">
|
|
<ul className="nav__links">
|
|
<li><NavLink to="/groups" activeClassName="active">Groups</NavLink></li>
|
|
<li><NavLink to="/moderation" activeClassName="active"><LockIcon style={{ fontSize: 18, verticalAlign: 'text-bottom', marginRight: 6 }} aria-hidden="true" />Moderation</NavLink></li>
|
|
<li><NavLink className="cta" exact to="/" activeClassName="active">Upload</NavLink></li>
|
|
{isManagementPage && (
|
|
<li><NavLink className="cta" to={location.pathname} activeClassName="active">Mein Upload</NavLink></li>
|
|
)}
|
|
<li><a href="https://gitea.lan.hobbyhimmel.de/hobbyhimmel/Project-Image-Uploader" target="_blank" rel="noopener noreferrer">About</a></li>
|
|
</ul>
|
|
<button
|
|
type="button"
|
|
className={`menu${menuOpen ? ' menu--open' : ''}`}
|
|
onClick={toggleMenu}
|
|
aria-label="Navigation umschalten"
|
|
aria-expanded={menuOpen}
|
|
aria-controls="mobile-nav"
|
|
>
|
|
<span />
|
|
<span />
|
|
<span />
|
|
</button>
|
|
</nav>
|
|
</header>
|
|
<div
|
|
id="mobile-nav"
|
|
className={`overlay${menuOpen ? ' overlay--active' : ''}`}
|
|
aria-hidden={!menuOpen}
|
|
>
|
|
<button type="button" className="close" onClick={closeMenu} aria-label="Navigation schließen">×</button>
|
|
<div className="overlay__content">
|
|
<NavLink to="/groups" activeClassName="active" onClick={closeMenu}>Groups</NavLink>
|
|
<NavLink to="/moderation" activeClassName="active" onClick={closeMenu}>
|
|
<LockIcon style={{ fontSize: 24, verticalAlign: 'text-bottom', marginRight: 12 }} aria-hidden="true" />Moderation
|
|
</NavLink>
|
|
<NavLink exact to="/" activeClassName="active" onClick={closeMenu}>Upload</NavLink>
|
|
{isManagementPage && (
|
|
<NavLink to={location.pathname} activeClassName="active" onClick={closeMenu}>Mein Upload</NavLink>
|
|
)}
|
|
<a href="https://gitea.lan.hobbyhimmel.de/hobbyhimmel/Project-Image-Uploader" target="_blank" rel="noopener noreferrer" onClick={closeMenu}>About</a>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Navbar
|