import React from 'react'
import { NavLink } from 'react-router-dom'

import '../Css/Navbar.css'

import logo from '../../../Images/logo.png'
import { Lock as LockIcon } from '@mui/icons-material';

function Navbar() {
    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>
                <ul className="nav__links">
                    <li><NavLink to="/groups" activeClassName="active">Groups</NavLink></li>
                    <li><NavLink to="/slideshow" activeClassName="active">Slideshow</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="/">Upload</NavLink></li>
                    <li><a href="https://gitea.lan.hobbyhimmel.de/hobbyhimmel/Project-Image-Uploader" target="_blank" rel="noopener noreferrer">About</a></li>
                </ul>
            </nav>
        </header>
    )
}

export default Navbar
