Update web/index.html

web/index.html

@@ -83,7 +83,8 @@
             <!-- 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/RetinAILogo.png" alt="Logo" id="sidebarLogo" style="max-width:140px; transition: all 0.3s ease;">
+                    <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>
             </div>
 
@@ -2107,25 +2108,26 @@
 
 
 
-  (function() {
-    var sidebar = document.getElementById('leftSidebar');
-    var logo = document.getElementById('sidebarLogo');
-    if (!sidebar || !logo) return;
+(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.maxWidth = isCollapsed ? '36px' : '140px';
-        logo.style.width    = isCollapsed ? '36px' : '';
+        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(); // aplicar estado inicial
+    updateLogo();
 })();
 </script>