Made page more responsive

frontend/assets/css/dashboard.css

@@ -13,7 +13,6 @@ h1 {
     margin-bottom: 2rem;
 }
 
-/* Navigation Header */
 header {
     width: 100%;
     border-bottom: 1px solid var(--border);
@@ -74,7 +73,6 @@ nav a:hover, nav a.active {
     border-color: var(--accent);
 }
 
-/* Profile Dropdown Component */
 .profile-dropdown {
     position: relative;
     display: inline-block;
@@ -133,7 +131,6 @@ nav a:hover, nav a.active {
     z-index: 100;
 }
 
-/* Show menu on hover OR when active via click class */
 .profile-dropdown:hover .dropdown-menu,
 .dropdown-menu.show {
     display: flex;
@@ -174,7 +171,6 @@ nav a:hover, nav a.active {
     color: #f87171;
 }
 
-/* Stats Cards Grid */
 .stats-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
@@ -207,7 +203,6 @@ nav a:hover, nav a.active {
     letter-spacing: 0.05em;
 }
 
-/* Controls & Search */
 .action-bar {
     display: flex;
     justify-content: space-between;
@@ -220,7 +215,6 @@ nav a:hover, nav a.active {
     max-width: 320px;
 }
 
-/* Data Tables */
 .table-container {
     width: 100%;
     background: var(--card);
@@ -262,41 +256,52 @@ tr:hover td {
     background: rgba(255, 255, 255, 0.01);
 }
 
-/* Modals & Placeholders */
 #modal {
     position: fixed;
     z-index: 100;
 }
 
-@media (max-width: 768px) {
-    .nav-container {
-        flex-direction: column;
-        height: auto;
-        padding: 1rem;
-        gap: 1rem;
-    }
-    .nav-left {
-        flex-direction: column;
-        gap: 1rem;
-    }
-    nav {
-        gap: 1rem;
-    }
-    .profile-dropdown {
-        width: 100%;
-        justify-content: center;
-    }
-    .dropdown-menu {
-        position: static;
-        width: 100%;
-        box-shadow: none;
-        margin-top: 0.5rem;
-    }
-    .action-bar {
-        flex-direction: column;
-        align-items: stretch;
-    }
-    .search-input {
-        max-width: 100%;
-    }
+.dropdown-menu {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    width: 200px;
+    background: #1f2937;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
+    display: none;
+    flex-direction: column;
+    z-index: 1000;
+}
+
+.dropdown-menu.show {
+    display: flex !important;
+}
+
+#main-nav {
+    z-index: 900;
+}
+
+@media (max-width: 768px) {
+    .menu-trigger { display: block; background: none; border: 1px solid var(--border); color: var(--text); padding: 0.4rem 0.8rem; border-radius: 6px; }
+
+    #main-nav {
+        display: none;
+        flex-direction: column;
+        position: absolute;
+        top: 4rem;
+        left: 0;
+        width: 100%;
+        background: #111827;
+        padding: 1rem;
+        z-index: 100;
+        border-bottom: 1px solid var(--border);
+    }
+
+    #main-nav.show { display: flex; }
+}
+
+@media (min-width: 769px) {
+    .menu-trigger { display: none; }
 }

frontend/htmx/contents/dash/base.html

@@ -14,6 +14,9 @@
     <div class="nav-container">
         <div class="nav-left">
             <div class="brand">Miau<span>Inv</span></div>
+
+            <button class="menu-trigger" id="menu-btn" aria-label="Menu">Menu</button>
+
             <nav id="main-nav">
                 <a href="/dashboard">Dashboard</a>
                 <a href="/inventory">Inventory</a>
@@ -25,7 +28,6 @@
         <div class="profile-dropdown">
             <button class="profile-trigger" id="profile-btn">
                 <div class="avatar">M</div>
-                <span class="username">Profile</span>
             </button>
             <div class="dropdown-menu" id="dropdown-menu">
                 <a href="/profile/settings">Account Settings</a>
@@ -33,18 +35,7 @@
                 <hr class="dropdown-divider">
                 <button class="logout-btn"
                         hx-post="/api/logout"
-                        hx-trigger="click"
-                        hx-on::after-request="
-            if (event.detail.successful) {
-                localStorage.removeItem('access_token');
-                localStorage.removeItem('refresh_token');
-                document.cookie = 'access_token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC;';
-                document.cookie = 'refresh_token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC;';
-                window.location.href = '/login';
-            } else {
-                alert('Logout failed. Please try again.');
-            }
-        ">
+                        hx-on::after-request="window.location.href='/login'">
                     Log Out
                 </button>
             </div>
@@ -57,24 +48,31 @@
 </main>
 
 <script>
-    document.querySelectorAll('#main-nav a').forEach(link => {
-        if (link.getAttribute('href') === window.location.pathname) {
-            link.classList.add('active');
-        }
-    });
-
     const profileBtn = document.getElementById('profile-btn');
     const dropdownMenu = document.getElementById('dropdown-menu');
+    const menuBtn = document.getElementById('menu-btn');
+    const mainNav = document.getElementById('main-nav');
 
+    // Profil-Menü Toggle
     profileBtn.addEventListener('click', (e) => {
         e.stopPropagation();
         dropdownMenu.classList.toggle('show');
+        mainNav.classList.remove('show'); // Mobile Nav schließen
     });
 
-    document.addEventListener('click', () => {
-        if (dropdownMenu.classList.contains('show')) {
-            dropdownMenu.classList.remove('show');
-        }
+    // Mobile Nav Toggle
+    menuBtn.addEventListener('click', (e) => {
+        console.log("Button wurde geklickt!"); // Wird das im Browser angezeigt?
+        e.stopPropagation();
+        e.preventDefault(); // Verhindert Standard-Browser-Aktionen
+        mainNav.classList.toggle('show');
+        dropdownMenu.classList.remove('show');
+    });
+
+    // Alles schließen bei Klick in den Body
+    window.addEventListener('click', () => {
+        dropdownMenu.classList.remove('show');
+        mainNav.classList.remove('show');
     });
 </script>
 </body>