refactor layout

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 }}

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 }}

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>

kontor-gin/templates/pages/lofi.html

@@ -3,15 +3,27 @@
 <html lang="de">
     {{ template "head" . }}
 
-    <body>
+    <body class="d-flex flex-column h-100">
         {{ template "navbar" . }}
+        <!-- 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">
-                <input>
+                        <label>
                             <input type="checkbox" name="review" {{ if .Review }}checked{{ end }}>Review
                         </label>
                         <label>
@@ -22,7 +34,6 @@
                     </form>
                 </div>
                 <div class="row">
-            <div class="maincolumn">
                     <table class="table table-hover">
                         <thead>
                             <tr>
@@ -56,6 +67,7 @@
                     </table>
                 </div>
             </div>
+        </main>
         {{ template "footer" . }}
     </body>
 </html>