Update web/users.html

web/users.html

@@ -120,11 +120,10 @@
         </a>
         <nav class="vertnav navbar navbar-light">
             <!-- nav bar -->
-            <div class="w-100 mb-4 d-flex">
-                <a class="navbar-brand mx-auto mt-2 flex-fill text-center">
-                    <img src="assets/images/LOGO.png" alt="Logo">
-                </a>
-            </div>
+            <a class="navbar-brand mx-auto mt-2 flex-fill text-center">
+                <img src="assets/images/LOGO.png"     alt="Logo"      id="sidebarLogo"     style="max-width:140px; transition: opacity 0.3s ease;">
+                <img src="assets/images/LogoMini.png" alt="Logo Mini" id="sidebarLogoMini" style="max-width:44px; display:none; transition: opacity 0.3s ease;">
+            </a>
 
             <ul class="navbar-nav flex-fill w-100 mb-2">
                 <li class="nav-item">
@@ -758,6 +757,28 @@
     });
   });
 })();
+
+  (function() {
+    var sidebar   = document.getElementById('leftSidebar');
+    var logo      = document.getElementById('sidebarLogo');
+    var logoMini  = document.getElementById('sidebarLogoMini');
+    if (!sidebar || !logo || !logoMini) return;
+
+    function updateLogo() {
+        var isCollapsed = sidebar.classList.contains('collapsed')
+                       || document.body.classList.contains('collapsed')
+                       || sidebar.offsetWidth < 100;
+
+        logo.style.display     = isCollapsed ? 'none'  : '';
+        logoMini.style.display = isCollapsed ? 'block' : 'none';
+    }
+
+    var observer = new MutationObserver(updateLogo);
+    observer.observe(sidebar,       { attributes: true, attributeFilter: ['class', 'style'] });
+    observer.observe(document.body, { attributes: true, attributeFilter: ['class'] });
+
+    updateLogo();
+})();
 </script>
 </body>
 </html>