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>

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

@@ -183,7 +183,7 @@
                 <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
             </div>
             <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Activities Attended</h6>
-            <i class="fas fa-chevron-down ms-auto small textWhite"></i>
+            <i class="fas fa-chevron-down ms-auto small textWhite collapse-icon"></i>
         </div>
     </a>
     <div class="collapse" id="activitiesAttendedCollapse">
@@ -208,10 +208,10 @@
                 <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
             </div>
             <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Activities Organised</h6>
-            <i class="fas fa-chevron-down ms-auto small textWhite"></i>
+            <i class="fas fa-chevron-down ms-auto small textWhite collapse-icon"></i>
         </div>
     </a>
-    <div class="collapse" id="activitiesOrganisedCollapse">
+    <div class="collapse multi-collapse" id="activitiesOrganisedCollapse">
         <div class="ps-4">
             <a class="nav-link py-1" href="{{ route('faculty.ActivitiesOrganisedForm') }}">
                 <div class="d-flex align-items-center">
@@ -232,11 +232,11 @@
             <div class="col-2">
                 <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
             </div>
-            <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Iv Organised</h6>
-            <i class="fas fa-chevron-down ms-auto small textWhite"></i>
+            <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">IV Organised</h6>
+            <i class="fas fa-chevron-down ms-auto small textWhite collapse-icon"></i>
         </div>
     </a>
-    <div class="collapse" id="ivOrganisedCollapse">
+    <div class="collapse multi-collapse" id="ivOrganisedCollapse">
         <div class="ps-4">
             <a class="nav-link py-1" href="{{ route('faculty.IvOrganisedForm') }}">
                 <div class="d-flex align-items-center">
@@ -258,10 +258,10 @@
                 <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
             </div>
             <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Publications</h6>
-            <i class="fas fa-chevron-down ms-auto small textWhite"></i>
+            <i class="fas fa-chevron-down ms-auto small textWhite collapse-icon"></i>
         </div>
     </a>
-    <div class="collapse" id="publicationsCollapse">
+    <div class="collapse multi-collapse" id="publicationsCollapse">
         <div class="ps-4">
             <a class="nav-link py-1" href="{{ route('faculty.PublicationsForm') }}">
                 <div class="d-flex align-items-center">
@@ -283,10 +283,10 @@
                 <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
             </div>
             <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Books Published</h6>
-            <i class="fas fa-chevron-down ms-auto small textWhite"></i>
+            <i class="fas fa-chevron-down ms-auto small textWhite collapse-icon"></i>
         </div>
     </a>
-    <div class="collapse" id="booksPublishedCollapse">
+    <div class="collapse multi-collapse" id="booksPublishedCollapse">
         <div class="ps-4">
             <a class="nav-link py-1" href="{{ route('faculty.BooksPublishedForm') }}">
                 <div class="d-flex align-items-center">
@@ -308,10 +308,10 @@
                 <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
             </div>
             <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">External Engagement</h6>
-            <i class="fas fa-chevron-down ms-auto small textWhite"></i>
+            <i class="fas fa-chevron-down ms-auto small textWhite collapse-icon"></i>
         </div>
     </a>
-    <div class="collapse" id="externalEngagementCollapse">
+    <div class="collapse multi-collapse" id="externalEngagementCollapse">
         <div class="ps-4">
             <a class="nav-link py-1" href="{{ route('faculty.ExternalEngagementForm') }}">
                 <div class="d-flex align-items-center">
@@ -333,10 +333,10 @@
                 <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
             </div>
             <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Online Courses</h6>
-            <i class="fas fa-chevron-down ms-auto small textWhite"></i>
+            <i class="fas fa-chevron-down ms-auto small textWhite collapse-icon"></i>
         </div>
     </a>
-    <div class="collapse" id="onlineCoursesCollapse">
+    <div class="collapse multi-collapse" id="onlineCoursesCollapse">
         <div class="ps-4">
             <a class="nav-link py-1" href="{{ route('faculty.OnlineCoursesForm') }}">
                 <div class="d-flex align-items-center">
@@ -358,10 +358,10 @@
                 <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
             </div>
             <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Patents/Copyrights</h6>
-            <i class="fas fa-chevron-down ms-auto small textWhite"></i>
+            <i class="fas fa-chevron-down ms-auto small textWhite collapse-icon"></i>
         </div>
     </a>
-    <div class="collapse" id="patentsCollapse">
+    <div class="collapse multi-collapse" id="patentsCollapse">
         <div class="ps-4">
             <a class="nav-link py-1" href="{{ route('faculty.PatentsForm') }}">
                 <div class="d-flex align-items-center">
@@ -376,7 +376,6 @@
         </div>
     </div>
 </li>
-<!-- Add other faculty links here -->
 @endif
 <li class="nav-item mt-auto mb-5">
     <form method="POST" action="{{ route('logout') }}" class="nav-link py-1">