upgrade bootstrap to v5.0, fix #826 dropdown on sidebar closes on any…

… click, fix #852 submenu does not open
tabler · May 9, 2021 · 191ea5b · 191ea5b
1 parent db02d14
commit 191ea5b
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 35 deletions.
diff --git a/package.json b/package.json
@@ -84,7 +84,7 @@
     "@tabler/icons": "^1.41.1",
     "apexcharts": "^3.26.1",
     "autosize": "^4.0.2",
-    "bootstrap": "twbs/bootstrap#232e392c9126fcb1dbe13c963e7edcdbd62cfeb8",
+    "bootstrap": "5.0.0",
     "choices.js": "^9.0.1",
     "countup.js": "^2.0.7",
     "flatpickr": "^4.6.9",

diff --git a/src/js/src/dropdown.js b/src/js/src/dropdown.js
@@ -5,36 +5,6 @@ Core dropdowns
  */
 let dropdownTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="dropdown"]'));
 dropdownTriggerList.map(function (dropdownTriggerEl) {
+	console.log(dropdownTriggerEl.dataset);
 	return new Dropdown(dropdownTriggerEl);
-});
-
-
-/*
-Nested dropdowns
- */
-const selectors = '.dropdown, .dropup, .dropend, .dropstart',
-	dropdowns = document.querySelectorAll(selectors);
-
-let currentTarget = undefined;
-
-dropdowns.forEach(dropdown => {
-	dropdown.addEventListener('mousedown', (e) => {
-		e.stopPropagation();
-
-		if (e.target.dataset.bsToggle && e.target.dataset.bsToggle === 'dropdown') {
-			currentTarget = e.currentTarget;
-		}
-	});
-
-	dropdown.addEventListener('hide.bs.dropdown', (e) => {
-		e.stopPropagation();
-
-		const parent = currentTarget ? currentTarget.parentElement.closest(selectors) : undefined;
-
-		if (parent && parent === dropdown) {
-			e.preventDefault();
-		}
-
-		currentTarget = undefined;
-	});
 });
diff --git a/src/pages/_includes/layout/navbar-menu.html b/src/pages/_includes/layout/navbar-menu.html
@@ -11,7 +11,7 @@
 	{% for level-1 in menu %}
 		{% assign icon = level-1[1].icon %}
 		<li class="nav-item{% if level-1[0] == current-page[0] or level-1[1].active %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
-			<a class="nav-link{% if level-1[1].children %} dropdown-toggle{% endif %}{% if level-1[1].disabled %} disabled{% endif %}" {% if level-1[1].children %}href="#navbar-{{ level-1[0] }}" data-bs-toggle="dropdown" role="button" aria-expanded="{% if include.auto-open and level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% else %}href="{{ site.base }}/{{ level-1[1].url }}" {% endif %}>
+			<a class="nav-link{% if level-1[1].children %} dropdown-toggle{% endif %}{% if level-1[1].disabled %} disabled{% endif %}" {% if level-1[1].children %}href="#navbar-{{ level-1[0] }}" data-bs-toggle="dropdown" data-bs-auto-close="{% if include.keep-open %}false{% else %}outside{% endif %}" role="button" aria-expanded="{% if include.auto-open and level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% else %}href="{{ site.base }}/{{ level-1[1].url }}" {% endif %}>
 				{% unless hide-icons %}
 				<span class="nav-link-icon d-md-none d-lg-inline-block">{% include ui/icon.html icon=icon %}</span>
 				{% endunless %}
@@ -47,7 +47,7 @@
 
 					{% if level-2[1].children %}<div class="dropend">{% endif %}
 
-					<a class="dropdown-item{% if level-2[1].children %} dropdown-toggle{% endif %}{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-bs-toggle="dropdown" role="button" aria-expanded="false" {% else %}href="{{ site.base }}/{{ level-2[1].url }}" {% endif %}>
+					<a class="dropdown-item{% if level-2[1].children %} dropdown-toggle{% endif %}{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-bs-toggle="dropdown" data-bs-auto-close="{% if include.keep-open %}false{% else %}outside{% endif %}" role="button" aria-expanded="false" {% else %}href="{{ site.base }}/{{ level-2[1].url }}" {% endif %}>
 						{{ level-2[1].title }}
 					</a>
 

diff --git a/src/pages/_includes/layout/sidebar.html b/src/pages/_includes/layout/sidebar.html
@@ -11,7 +11,7 @@
 		{% include layout/navbar-side.html class="d-lg-none" hide-username=include.hide-username person-id=include.person-id %}
 
 		<div class="collapse navbar-collapse" id="navbar-menu">
-			{% include layout/navbar-menu.html auto-open=true class="pt-lg-3" %}
+			{% include layout/navbar-menu.html auto-open=true class="pt-lg-3" keep-open=true %}
 		</div>
 	</div>
 </aside>