your meaningful message here

resources/views/layouts/partials/sidebar.blade.php

@@ -17,34 +17,39 @@
 </nav>
 
 <style>
-    /* Style for collapsed sidebar */
-    #sidebar.collapsed {
-        width: 70px;
-    }
-    
-    #sidebar.collapsed .sidebar-text {
-        display: none;
-    }
+    /* 1 – make the bar skinny when you click the arrow */
+        #sidebar.collapsed           { width: 70px; }
+
+        /* 2 – hide ALL text while it’s skinny … */
+        #sidebar.collapsed .sidebar-text { display: none; }
+
+        /* 3 – …except the text that lives in the OPEN dropdown panel */
+        #sidebar.collapsed .collapse.show .sidebar-text {
+            display: block !important;        /* <-- the magic switch-back-on line   */
+        }
+
+
     
     /* Add smooth transition for collapse */
     .collapse {
-        transition: all 0.3s ease;
+        transition: height 0.3s ease;
     }
     
-    /* Fix for dropdown menu */
-    .collapse:not(.show) {
-        display: none;
-    }
     
-    /* Make sure .collapse.show is explicitly displayed */
-    .collapse.show {
-        display: block !important;
-    }
 
     /* Make collapse parent non-clickable on child elements */
     .collapse.show a {
         pointer-events: auto;
     }
+
+    /* …your existing rules… */
+
+    /* ← NEW override: when the panel is open, actually show it */
+    .collapse.show {
+        visibility: visible !important;
+    }
+
+
 </style>
 
 <script>
@@ -70,7 +75,7 @@
             // Get the target collapse element ID
             const targetId = collapseToggle.getAttribute('href');
             const targetElement = document.querySelector(targetId);
-            const iconElement = collapseToggle.querySelector('.fa-chevron-down');
+            const iconElement = collapseToggle.querySelector('.dropdown-arrow');
             
             if (iconElement && targetElement) {
                 // Create a MutationObserver to watch for changes to the collapse element
@@ -85,11 +90,14 @@
                                 iconElement.classList.remove('fa-chevron-up');
                                 iconElement.classList.add('fa-chevron-down');
                             }
+                            const isOpen = targetElement.classList.contains('show');
+                            iconElement.classList.toggle('fa-chevron-down', !isOpen);
+                            iconElement.classList.toggle('fa-chevron-up',   isOpen);
                         }
                     });
                 });
 
-                // Start observing the target element
+                // Start observing the target elementl
                 observer.observe(targetElement, { 
                     attributes: true
                 });