feat(ui): implement premium mobile-first reader layout with three-tab bottom navigation and assistant FAB

2026-05-27 09:36:02 +02:00
parent a9a670d776
commit e42546d82f
9 changed files with 947 additions and 111 deletions
@@ -190,4 +190,157 @@
    to { transform: rotate(360deg); }
 }

+/* Mobile Styles */
+.nexus-mobile-topbar {
+    display: none;
+}
+
+@media (max-width: 768px) {
+    .nexus-mobile-topbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 60px;
+        background: rgba(18, 18, 18, 0.85);
+        backdrop-filter: blur(20px);
+        -webkit-backdrop-filter: blur(20px);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        padding: 0 1.25rem;
+        z-index: 150;
+    }
+
+    .hamburger-btn {
+        background: transparent;
+        border: none;
+        color: #e0e0e0;
+        cursor: pointer;
+        padding: 0.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 8px;
+        transition: background-color 0.2s;
+        min-height: 48px;
+        min-width: 48px;
+        touch-action: manipulation;
+    }
+
+    .hamburger-btn:hover {
+        background: rgba(255, 255, 255, 0.05);
+    }
+
+    .mobile-logo {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .pulsing-logo {
+        animation: pulse-glow 2s infinite ease-in-out;
+    }
+
+    @keyframes pulse-glow {
+        0%, 100% {
+            filter: drop-shadow(0 0 5px rgba(0, 255, 153, 0.4));
+            opacity: 0.8;
+        }
+        50% {
+            filter: drop-shadow(0 0 12px rgba(0, 255, 153, 0.8));
+            opacity: 1;
+        }
+    }
+
+    .mobile-user-pill {
+        display: flex;
+        align-items: center;
+    }
+
+    .user-avatar-mini {
+        width: 32px;
+        height: 32px;
+        background: linear-gradient(135deg, var(--nexus-neon) 0%, #0099ff 100%);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.85rem;
+        font-weight: 700;
+        color: #121212;
+        box-shadow: 0 0 10px rgba(0, 255, 153, 0.2);
+    }
+
+    .mobile-sidebar-backdrop {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.6);
+        backdrop-filter: blur(4px);
+        -webkit-backdrop-filter: blur(4px);
+        z-index: 190;
+        animation: fade-in 0.2s ease-out;
+    }
+
+    @keyframes fade-in {
+        from { opacity: 0; }
+        to { opacity: 1; }
+    }
+
+    ::deep .hub-sidebar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: 280px;
+        height: 100%;
+        background: #141414;
+        z-index: 200;
+        transform: translateX(-100%);
+        will-change: transform;
+        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: none;
+    }
+
+    .mobile-menu-open ::deep .hub-sidebar {
+        transform: translateX(0);
+        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
+    }
+
+    .hub-container {
+        flex-direction: column;
+    }
+
+    .hub-main {
+        margin-top: 60px;
+        width: 100%;
+        height: calc(100vh - 60px);
+    }
+
+    .hub-content {
+        padding: 1.25rem;
+    }
+
+    ::deep .sidebar-header {
+        padding: 1.5rem 1.25rem;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    }
+
+    ::deep .sidebar-nav {
+        padding: 1rem 0;
+    }
+
+    ::deep .nav-item {
+        padding: 0.9rem 1.25rem;
+        font-size: 0.95rem;
+        min-height: 48px; /* Touch target */
+    }
+
+    ::deep .sidebar-footer {
+        padding: 1rem 1.25rem;
+    }
+}
+