Update web/patients.html

web/patients.html

@@ -291,11 +291,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/RetinAILogo.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">
@@ -1444,6 +1443,29 @@ function createPatientCard(patient) {
     });
   });
 })();
+
+
+(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>