From 2e80cd9b0e998c53b6268e066df533c2cadd52cb Mon Sep 17 00:00:00 2001
From: Thomas Peetz <thomas.peetz@cimt-ag.de>
Date: Wed, 14 Oct 2026 23:08:49 +0200
Subject: [PATCH] refactor layout

---
 kontor-gin/templates/layouts/footer.html |   8 +-
 kontor-gin/templates/layouts/navbar.html |  49 +++++++++-
 kontor-gin/templates/pages/home.html     |  19 +++-
 kontor-gin/templates/pages/lofi.html     | 112 +++++++++++++----------
 4 files changed, 133 insertions(+), 55 deletions(-)

diff --git a/kontor-gin/templates/layouts/footer.html b/kontor-gin/templates/layouts/footer.html
index 905b05c..c386b75 100644
--- a/kontor-gin/templates/layouts/footer.html
+++ b/kontor-gin/templates/layouts/footer.html
@@ -1,3 +1,9 @@
 {{ define "footer" }}
-    <div class="footer">{{ .version }}</div>
+    <footer class="mt-auto py-3 bg-light fixed-bottom">
+        <div class="container text-center">
+            <span class="text-muted">{{ .version }}</span>
+        </div>
+    </footer>
+    <!-- Bootstrap JS einbinden -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 {{ end }}
diff --git a/kontor-gin/templates/layouts/navbar.html b/kontor-gin/templates/layouts/navbar.html
index 1c81f99..da5744b 100644
--- a/kontor-gin/templates/layouts/navbar.html
+++ b/kontor-gin/templates/layouts/navbar.html
@@ -1,5 +1,50 @@
 {{ define "navbar" }}
-<nav class="navbar fixed-top navbar-expand-lg navbar-dark" style="background-color: darkgrey;">
+    <!-- 1. Kopfzeile & Navigation -->
+    <header>
+        <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="/comics/comics">Comics</a>
+                                <a class="dropdown-item" href="/comics/publishers">Publisher</a>
+                                <a class="dropdown-item" href="/comics/artists">Artist</a>
+                                <a class="dropdown-item" href="/comics/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="/web/media-files">Media Files</a>
+                                <a class="dropdown-item" href="/web/actors">Media Actors</a>
+                                <a class="dropdown-item" href="/web/media-lofis">Lofi</a>
+                                <a class="dropdown-item" href="/web/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>
+                        {{ end }}
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </header>
+
+
+
+<!-- <nav class="navbar fixed-top navbar-expand-lg navbar-dark" style="background-color: darkgrey;">
     <a class="navbar-brand" href="/">Kontor</a>
     <ul class="navbar-nav">
         <li class="nav-item">
@@ -37,5 +82,5 @@
             <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
         </form>
     </ul>
-</nav>
+</nav> -->
 {{ end }}
diff --git a/kontor-gin/templates/pages/home.html b/kontor-gin/templates/pages/home.html
index ab9df1e..efef156 100644
--- a/kontor-gin/templates/pages/home.html
+++ b/kontor-gin/templates/pages/home.html
@@ -3,9 +3,24 @@
 <html lang="de">
     {{ template "head" . }}
 
-    <body>
+    <body class="d-flex flex-column h-100">
         {{ template "navbar" . }}
-        <h1>{{ .message }}</h1>
+        <main class="flex-shrink-0">
+            <div class="container my-4">
+                <div class="row">
+                    <div class="col-md-8">
+                        <h1>Hauptinhalt</h1>
+                        <p>{{ .message }}</p>
+                    </div>
+                    <div class="col-md-4">
+                        <aside class="bg-light p-3">
+                            <h3>Seitenbereich</h3>
+                            <p>Optionale Sidebar oder Zusatzinformationen.</p>
+                        </aside>
+                    </div>
+                </div>
+            </div>
+        </main>
         {{ template "footer" . }}
     </body>
 </html>
diff --git a/kontor-gin/templates/pages/lofi.html b/kontor-gin/templates/pages/lofi.html
index 620407d..d102f97 100644
--- a/kontor-gin/templates/pages/lofi.html
+++ b/kontor-gin/templates/pages/lofi.html
@@ -3,59 +3,71 @@
 <html lang="de">
     {{ template "head" . }}
 
-    <body>
+    <body class="d-flex flex-column h-100">
         {{ template "navbar" . }}
-        <div class="row">
-            <h1>Media Lofi</h1>
-        </div>
-        <div class="row">
-            <form class="form-inline" action="/media/lofis">
-                <input type="text" placeholder="Search" name="query">
-                <input>
-                    <input type="checkbox" name="review" {{ if .Review }}checked{{ end }}>Review
-                </label>
-                <label>
-                    <input type="checkbox" name="should_download" {{ if .ShouldDownload }}checked{{ end }}>Download
-                </label>
-                <button type="submit">Search</button>
-                <div class="pill-nav"><a href="/media/lofis/add">Add Lofi</a></div>
-            </form>
-        </div>
-        <div class="row">
-            <div class="maincolumn">
-                <table class="table table-hover">
-                    <thead>
-                        <tr>
-                            <th scope="col">Title</th>
-                            <th scope="col">Weblink</th>
-                            <th scope="col">Review</th>
-                            <th colspan="2">Actions</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {{ range .lofis }}
-                        <tr>
-                            <th scope="row"><a href="/web/media-lofis/{{.ID}}/edit">{{.Title}}</a></th>
-                            {{ if .WebLink }}
-                            <td><a href="{{.WebLink}}">{{.WebLink}}</a></td>
-                            {{ else }}
-                            <td>WebLink not set</td>
+        <!-- 2. Hauptbereich -->
+        <main class="flex-shrink-0">
+            <div class="container my-4">
+                <div class="row">
+                    <div class="col-md-8">
+                        <h1>Media Lofi</h1>
+                        <p>Hier steht der wesentliche Inhalt der Seite.</p>
+                    </div>
+                    <div class="col-md-4">
+                        <aside class="bg-light p-3">
+                            <h3>Seitenbereich</h3>
+                            <p>Optionale Sidebar oder Zusatzinformationen.</p>
+                        </aside>
+                    </div>
+                </div>
+                <div class="row">
+                    <form class="form-inline" action="/media/lofis">
+                        <input type="text" placeholder="Search" name="query">
+                        <label>
+                            <input type="checkbox" name="review" {{ if .Review }}checked{{ end }}>Review
+                        </label>
+                        <label>
+                            <input type="checkbox" name="should_download" {{ if .ShouldDownload }}checked{{ end }}>Download
+                        </label>
+                        <button type="submit">Search</button>
+                        <div class="pill-nav"><a href="/media/lofis/add">Add Lofi</a></div>
+                    </form>
+                </div>
+                <div class="row">
+                    <table class="table table-hover">
+                        <thead>
+                            <tr>
+                                <th scope="col">Title</th>
+                                <th scope="col">Weblink</th>
+                                <th scope="col">Review</th>
+                                <th colspan="2">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {{ range .lofis }}
+                            <tr>
+                                <th scope="row"><a href="/web/media-lofis/{{.ID}}/edit">{{.Title}}</a></th>
+                                {{ if .WebLink }}
+                                <td><a href="{{.WebLink}}">{{.WebLink}}</a></td>
+                                {{ else }}
+                                <td>WebLink not set</td>
+                                {{ end }}
+                                <td>
+		                        {{ if .Review }}
+                                <a href="/web/media-lofis/{{.ID}}/change-review"><img src="/public/icons/tick.png" alt="true" width="24" height="24"></a>
+    		                    {{ else }}
+                                <a href="/web/media-lofis/{{.ID}}/change-review"><img src="/public/icons/cross.png" alt="true" width="24" height="24"></a>
+                                {{ end }}
+    		                    </td>
+                                <td><a href="/web/media-lofis/{{.ID}}/edit" class="btn btn-outline-primary btn-sm active" role="button" aria-pressed="true">Edit</a></td>
+                                <td><a href="/web/media-lofis/{{.ID}}/delete" class="btn btn-outline-danger btn-sm active" role="button" aria-pressed="true">Delete</a></td>
+                            </tr>
                             {{ end }}
-                            <td>
-		                    {{ if .Review }}
-                            <a href="/web/media-lofis/{{.ID}}/change-review"><img src="/public/icons/tick.png" alt="true" width="24" height="24"></a>
-		                    {{ else }}
-                            <a href="/web/media-lofis/{{.ID}}/change-review"><img src="/public/icons/cross.png" alt="true" width="24" height="24"></a>
-                            {{ end }}
-    		                </td>
-                            <td><a href="/web/media-lofis/{{.ID}}/edit" class="btn btn-outline-primary btn-sm active" role="button" aria-pressed="true">Edit</a></td>
-                            <td><a href="/web/media-lofis/{{.ID}}/delete" class="btn btn-outline-danger btn-sm active" role="button" aria-pressed="true">Delete</a></td>
-                        </tr>
-                        {{ end }}
-                    </tbody>
-                </table>
+                        </tbody>
+                    </table>
+                </div>
             </div>
-        </div>
+        </main>
         {{ template "footer" . }}
     </body>
 </html>