import React from 'react'

import '../Css/Navbar.css'

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

function Navbar() {
    return (
        <header>
            <div className="logo"><a className="logo" href="/"><img src={logo} className="imageNav" alt="Logo"/><p className="logo">Upload your Project Images</p></a></div>
            <nav>
                <ul className="nav__links">
                    <li><a href="/groups">Groups</a></li>
                    <li><a href="/slideshow">Slideshow</a></li>
                    <li><a href="/moderation"><LockIcon style={{ fontSize: 18, verticalAlign: 'text-bottom', marginRight: 6 }} aria-hidden="true" />Moderation</a></li>
                    <li><a href="https://www.hobbyhimmel.de/ueber-uns/konzept/">About</a></li>
                </ul>
            </nav>
            <a className="cta" href="/">Upload</a>
        </header>
    )
}

export default Navbar