move kontor_model in kontor-api (#98)

Co-authored-by: Thomas Peetz <thomas.peetz@cimt-ag.de>
Reviewed-on: #98

kontor-api/src/templates/components/navbar.html

@@ -1,10 +1,49 @@
-<div class="topnav">
+<!-- <div class="topnav">
   <a href="/">Kontor</a>
   <a href="/comic/comics">Comics</a>
   <a href="/media/files">Media</a>
   <a style="float:right" href="/login/">Login</a></li>
+</div> -->
 
-</div>
+<nav class="navbar navbar-expand-lg navbar-dark" style="background-color:darkgrey;">
+  <div class="container-fluid">
+    <a class="navbar-brand" href="#">Kontor</a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarNav">
+      <ul class="navbar-nav">
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="navbarComicsMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Comics</a>
+          <div class="dropdown-menu" aria-labelledby="navbarComicsMenuLink">
+            <a class="dropdown-item" href="/comic/comics">Comics</a>
+            <a class="dropdown-item" href="/comic/publishers">Publisher</a>
+            <a class="dropdown-item" href="/comic/artists">Artist</a>
+            <a class="dropdown-item" href="/comic/issues">Issue</a>
+            </div>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="navbarWebMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Media</a>
+          <div class="dropdown-menu" aria-labelledby="navbarWebMenuLink">
+            <a class="dropdown-item" href="/media/files">Media Files</a>
+            <a class="dropdown-item" href="/media/actors">Media Actors</a>
+            <a class="dropdown-item" href="/media/lofis">Lofi</a>
+            <a class="dropdown-item" href="/media/articles">Artikel</a>
+          </div>
+        </li>
+        {% if user %}
+          <li class="nav-item">
+            <a class="nav-link" href="/logout">Logout</a>
+          </li>
+        {% else %}
+          <li class="nav-item">
+            <a class="nav-link" href="/login">Login</a>
+          </li>
+        {% endif %}
+      </ul>
+    </div>
+  </div>
+</nav>
 
 <!-- <nav class="navbar navbar-expand-lg navbar-light bg-light px-5">
   <div class="container-fluid">