import React from "react";
import { Navbar, Nav, NavDropdown } from "react-bootstrap";

function Navigation() {
  return (
    <div className="navigation">
      <Navbar bg="light" expand="lg" className="py-0">
        <Navbar.Brand href="/" className="my-name">Simon Altsch&auml;ffl</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse
          id="basic-navbar-nav"
          className="justify-content-between"
        >
          <Nav className="mr-auto">
            <Nav.Link href="/">Startseite</Nav.Link>
            <Nav.Link href="/about-me">&Uuml;ber mich</Nav.Link>
            <Nav.Link href="/goals">Ziele</Nav.Link>
            <Nav.Link href="/contact">Kontakt</Nav.Link>
            <NavDropdown title="Projekte" id="basic-nav-dropdown">
              <NavDropdown.ItemText>Fertige Projekte</NavDropdown.ItemText>
              <NavDropdown.Item href="/projects/languagestudy">
                Sprachstudie Wikipedia
              </NavDropdown.Item>
              <NavDropdown.Item href="/projects/server">
                Server Architektur
              </NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.ItemText>In Arbeit</NavDropdown.ItemText>
              <NavDropdown.Item href="/projects/crime-dinner">
                Krimi Dinner mit KI
              </NavDropdown.Item>
              <NavDropdown.ItemText>Abschlussprojekte in Arbeit</NavDropdown.ItemText>
              <NavDropdown.Item href="/finalprojects/wufg">
                Wohnungssuche und Fahrgemeinschaften
              </NavDropdown.Item>
              <NavDropdown.Item href="/finalprojects/onlineCasino">
                Online Casino
              </NavDropdown.Item>
            </NavDropdown>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    </div>
  );
}

export default Navigation;