Update web/index.html

web/index.html

@@ -21,11 +21,18 @@
     <link rel="stylesheet" href="css/daterangepicker.css">
 <style id="themeBlock">html{visibility:hidden}</style>
 <style>
-.circle {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-}
+  .circle {
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+  }
+  
+  #leftSidebar.collapsed #sidebarLogo,
+  body.collapsed #leftSidebar #sidebarLogo,
+  #leftSidebar[style*="width: 0"] #sidebarLogo {
+      max-width: 36px !important;
+      width: 36px !important;
+  }
 </style>
 <script>
   (function(){
@@ -76,7 +83,7 @@
             <!-- 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">
+                    <img src="assets/images/LOGO.png" alt="Logo" id="sidebarLogo" style="max-width:140px; transition: all 0.3s ease;">
                 </a>
             </div>
 
@@ -1067,6 +1074,9 @@
 
     setTimeout(() => {
         try {
+            const isDark = localStorage.getItem('theme') === 'dark';
+            const axisColor = isDark ? '#ffffff' : '#212529';
+
             const options = {
                 chart: {
                     type: 'area',
@@ -1119,7 +1129,7 @@
                         style: {
                             fontSize: '12px',
                             fontFamily: 'inherit',
-                            colors: '#ffffff'
+                            colors: axisColor
                         }
                     },
                     title: {
@@ -1127,7 +1137,7 @@
                         style: {
                             fontSize: '14px',
                             fontFamily: 'inherit',
-                            color: '#ffffff'
+                            color: axisColor
                         }
                     }
                 },
@@ -1137,7 +1147,7 @@
                         style: {
                             fontSize: '14px',
                             fontFamily: 'inherit',
-                            color: '#ffffff'
+                            color: axisColor
                         }
                     },
                     min: 0,
@@ -1147,7 +1157,7 @@
                         style: {
                             fontSize: '12px',
                             fontFamily: 'inherit',
-                            colors: '#ffffff'
+                            colors: axisColor
                         }
                     }
                 },
@@ -2083,7 +2093,35 @@
     });
   });
 })();
+
+
+
+
+
+
+
+  (function() {
+    var sidebar = document.getElementById('leftSidebar');
+    var logo = document.getElementById('sidebarLogo');
+    if (!sidebar || !logo) 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' : '';
+    }
+
+    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
+})();
 </script>
- 
+
+  
 </body>
 </html>