Fix: sidebar options disappearing

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

@@ -16,12 +16,44 @@
     </div>
 </nav>
 
+<style>
+    /* Style for collapsed sidebar */
+    #sidebar.collapsed {
+        width: 70px;
+    }
+    
+    #sidebar.collapsed .sidebar-text {
+        display: none;
+    }
+    
+    /* Add smooth transition for collapse */
+    .collapse {
+        transition: all 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;
+    }
+</style>
+
 <script>
     document.addEventListener('DOMContentLoaded', function () {
         const sidebarCollapseButton = document.getElementById('sidebarCollapse');
         const sidebarIcon = document.getElementById('sidebarIcon');
         const sidebar = document.getElementById('sidebar');
 
+        // Handle main sidebar collapse
         sidebarCollapseButton.addEventListener('click', function () {
             sidebar.classList.toggle('collapsed');
             if (sidebar.classList.contains('collapsed')) {
@@ -32,5 +64,42 @@
                 sidebarIcon.classList.add('fa-arrow-left');
             }
         });
+
+        // Handle the dropdown icons
+        document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(function(collapseToggle) {
+            // Get the target collapse element ID
+            const targetId = collapseToggle.getAttribute('href');
+            const targetElement = document.querySelector(targetId);
+            const iconElement = collapseToggle.querySelector('.fa-chevron-down');
+            
+            if (iconElement && targetElement) {
+                // Create a MutationObserver to watch for changes to the collapse element
+                const observer = new MutationObserver(function(mutations) {
+                    mutations.forEach(function(mutation) {
+                        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                            // Check if the collapse is shown
+                            if (targetElement.classList.contains('show')) {
+                                iconElement.classList.remove('fa-chevron-down');
+                                iconElement.classList.add('fa-chevron-up');
+                            } else {
+                                iconElement.classList.remove('fa-chevron-up');
+                                iconElement.classList.add('fa-chevron-down');
+                            }
+                        }
+                    });
+                });
+
+                // Start observing the target element
+                observer.observe(targetElement, { 
+                    attributes: true
+                });
+                
+                // Handle initial click on the toggle
+                collapseToggle.addEventListener('click', function(e) {
+                    // This is just for the initial click if needed
+                    // Bootstrap will handle the actual collapsing
+                });
+            }
+        });
     });
 </script>