Merge pull request #342 from plexguide/dev

Dev

frontend/templates/components/topbar.html

@@ -57,11 +57,13 @@
     }
     
     .topbar-section.center {
-        flex: 2;
+        flex: 1;
         justify-content: center;
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
+        align-items: center;
+        display: flex;
+        position: static;
+        left: unset;
+        transform: unset;
         width: auto;
     }
     
@@ -123,7 +125,88 @@
     /* Responsive styling */
     @media (max-width: 768px) {
         .version-bar {
-            display: none;
+            display: flex !important;
+            gap: 8px !important;
+        }
+        .version-item {
+            display: none !important;
+        }
+        .version-item:nth-child(1),
+        .version-item:nth-child(3) {
+            display: flex !important;
+            font-size: 14px !important;
+        }
+        .version-divider {
+            display: none !important;
+        }
+        .version-divider:nth-child(2) {
+            display: block !important;
+        }
+        .sidebar {
+            display: flex !important;
+            flex-direction: column !important;
+            justify-content: center !important;
+            align-items: center !important;
+            height: 100vh !important;
+        }
+        .nav-menu {
+            flex-direction: column !important;
+            align-items: center !important;
+            width: 100%;
+        }
+        .nav-item {
+            display: flex !important;
+            justify-content: center !important;
+            align-items: center !important;
+            width: 60px !important;
+            margin: 0 auto 8px auto !important;
+            padding: 0 !important;
+        }
+        .nav-icon-wrapper {
+            margin: 0 !important;
+            width: 32px !important;
+            height: 32px !important;
+            display: flex !important;
+            justify-content: center !important;
+            align-items: center !important;
+        }
+    }
+    @media (max-width: 1024px) {
+        /* Sidebar: icons only */
+        .sidebar .nav-item span {
+            display: none !important;
+        }
+        .sidebar {
+            width: 60px !important;
+            min-width: 60px !important;
+            max-width: 60px !important;
+        }
+        .sidebar .logo-container h1 {
+            display: none !important;
+        }
+        .logo-large {
+            display: none !important;
+        }
+        .logo-small {
+            display: block !important;
+            width: 32px !important;
+            height: 32px !important;
+            margin: 0 !important;
+        }
+        /* Top bar: only Version and Latest */
+        .version-item {
+            display: none !important;
+        }
+        .version-item:nth-child(1),
+        .version-item:nth-child(3) {
+            display: flex !important;
+            font-size: 14px !important;
+        }
+        .version-divider {
+            display: none !important;
+        }
+        .version-divider:nth-child(2) {
+            display: block !important;
         }
     }
 </style>

version.txt

@@ -1 +1 @@
-6.2.22
+6.2.23