Merge pull request #171 from Laravel-Backpack/improve-sidebar-javascript

improve dropdowns javascript
Laravel-Backpack · Mar 7, 2024 · ce96dc6 · ce96dc6
2 parents 35adf7f + 1305b6c
commit ce96dc6
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 9 deletions.
diff --git a/resources/views/components/menu-dropdown.blade.php b/resources/views/components/menu-dropdown.blade.php
@@ -33,6 +33,7 @@
         'data-bs-toggle'=> 'dropdown',
         'role' => 'button',
         'data-bs-auto-close' => 'false',
+        'id' => $dropdownId,
     ]) }}>
 
         @if($icon)<i class="nav-icon {{ $icon }} d-block d-lg-none d-xl-block"></i>@endif

diff --git a/resources/views/inc/sidebar_content.blade.php b/resources/views/inc/sidebar_content.blade.php
@@ -4,27 +4,72 @@
 @bassetBlock('tabler-menu-javascript.js')
 <script type="text/javascript">
     document.addEventListener("DOMContentLoaded", function() {
-        [...document.querySelectorAll('aside .dropdown-toggle.active, header.top .dropdown-toggle.active')].forEach(el => {
+        [...document.querySelectorAll('aside .dropdown-toggle.active')].forEach(el => { 
             let bsDropdown = bootstrap.Dropdown.getInstance(el);
             if(typeof bsDropdown !== 'undefined' && bsDropdown !== null) {
                 bsDropdown.show();
+                el.blur();                 
             }
-            el.blur();            
         });
 
-        [...document.querySelectorAll('header.top .nav-item.dropdown')].forEach(el => {
-            let bsDropdown = bootstrap.Dropdown.getInstance(el.firstElementChild);
+        // this is used to close only "main menus" when navigating in the sidebar. 
+        // in topbar we can use `click outside` to close the menu, but here we don't want
+        // the menu closing while we interact with the page, only when another main menu is clicked
+        [...document.querySelectorAll('aside .nav-item.dropdown')].forEach(el => {
+        let bsDropdown = bootstrap.Dropdown.getInstance(el.firstElementChild);
+        if(typeof bsDropdown !== 'undefined' && bsDropdown !== null) {
+            bsDropdown._config.autoClose = false;
+            bsDropdown.update();
+            
+            bsDropdown._element.addEventListener('show.bs.dropdown', function(e) {
+                let openDropdownInstance = document.querySelector('aside .nav-link.dropdown-toggle.show');
+                if(openDropdownInstance !== null) {
+                    let openDropdown = bootstrap.Dropdown.getInstance(openDropdownInstance);
+                    openDropdown.hide();
+                }
+            });
+            
+        }
+        });
+
+        [...document.querySelectorAll('header.top .dropdown-toggle, aside .dropdown-toggle')].forEach(el => {
+            let bsDropdown = bootstrap.Dropdown.getInstance(el);
             if(typeof bsDropdown !== 'undefined' && bsDropdown !== null) {
-                bsDropdown._config.autoClose = 'outside';
-                bsDropdown.update();
-            }
+                if(!bsDropdown._element.classList.contains('nav-link')) {
+                    bsDropdown._element.addEventListener('show.bs.dropdown', function(e) {
+                        // whenever a dropdown is shown, we close all other nested dropdowns
+                        let targetParent = e.target.parentElement.classList.contains('dropend') ? e.target.parentElement.parentElement : e.target.parentElement.parentElement.parentElement;
+                        let openDropdownInstances = targetParent.querySelectorAll('.dropdown-toggle.show');
+                        if(openDropdownInstances !== null) {
+                           openDropdownInstances.forEach(function(openDropdownInstance) {
+                                let openDropdown = bootstrap.Dropdown.getInstance(openDropdownInstance);
+                                openDropdown.hide();
+                            });
+                        }
+                    });
+                }else{
+                    // when nav-link is active we re-open the complete active menu
+                    bsDropdown._element.addEventListener('show.bs.dropdown', function(e) {
+                        if(e.target.parentElement.classList.contains('active') || e.target.classList.contains('active')) {
+                            e.target.parentElement.querySelectorAll('.dropdown-toggle.active').forEach(function(openDropdownInstance) {
+                                if(openDropdownInstance !== e.target) {
+                                    let openDropdown = bootstrap.Dropdown.getInstance(openDropdownInstance);
+                                    openDropdown.show();
+                                }
+                            });
+                        }
+                    });
+                }
                 
+            }
+                         
         });
 
-        [...document.querySelectorAll('aside .nav-item.dropdown')].forEach(el => {
+        // closes the main dropdown when clicking outside
+        [...document.querySelectorAll('header.top .nav-item.dropdown')].forEach(el => {
             let bsDropdown = bootstrap.Dropdown.getInstance(el.firstElementChild);
             if(typeof bsDropdown !== 'undefined' && bsDropdown !== null) {
-                bsDropdown._config.autoClose = false;
+                bsDropdown._config.autoClose = 'outside';
                 bsDropdown.update();
             }