[Enhancement] Keep menu folders open when a sub item is active

This commit is contained in:
Aaron Kable 2024-03-16 04:00:06 +00:00 committed by Ariel Rin
parent 7fe3db8017
commit dbfcf5d87a
3 changed files with 13 additions and 9 deletions

View File

@ -14,7 +14,7 @@
{% endif %}> {% endif %}>
</i> </i>
<a <a
class="nav-link flex-fill align-self-center me-auto" class="nav-link flex-fill align-self-center me-auto {% if item.navactive %}{% navactive request item.navactive|join:' ' %}{% endif %}"
{% if item.is_folder %} {% if item.is_folder %}
type="button" type="button"
data-bs-toggle="collapse" data-bs-toggle="collapse"

View File

@ -10,7 +10,7 @@
<ul id="sidebar-menu" class="navbar-nav flex-column mb-auto overflow-auto pt-2"> <ul id="sidebar-menu" class="navbar-nav flex-column mb-auto overflow-auto pt-2">
<li class="d-flex flex-wrap m-2 p-2 pt-0 pb-0 mt-0 mb-0 me-0 pe-0"> <li class="d-flex flex-wrap m-2 p-2 pt-0 pb-0 mt-0 mb-0 me-0 pe-0">
<i class="nav-link fas fa-tachometer-alt fa-fw align-self-center me-3 {% navactive request 'authentication:dashboard' %}"></i> <i class="nav-link fas fa-tachometer-alt fa-fw align-self-center me-3 {% navactive request 'authentication:dashboard' %}"></i>
<a class="nav-link flex-fill align-self-center" href="{% url 'authentication:dashboard' %}"> <a class="nav-link flex-fill align-self-center {% navactive request 'authentication:dashboard' %}" href="{% url 'authentication:dashboard' %}">
{% translate "Dashboard" %} {% translate "Dashboard" %}
</a> </a>
</li> </li>

View File

@ -98,23 +98,27 @@
<script> <script>
(() => { (() => {
// TODO Extend this to the groups in the sidebar too.
// TODO Move to own JS file // TODO Move to own JS file
const sidebar = document.getElementById('sidebar'); const sidebar = document.getElementById('sidebar');
sidebar.addEventListener("shown.bs.collapse", () => { sidebar.addEventListener('shown.bs.collapse', () => {
localStorage.removeItem("sidebar_" + sidebar.id); localStorage.removeItem('sidebar_' + sidebar.id);
}); });
sidebar.addEventListener("hidden.bs.collapse", () => { sidebar.addEventListener('hidden.bs.collapse', () => {
localStorage.setItem("sidebar_" + sidebar.id, true); localStorage.setItem('sidebar_' + sidebar.id, 'closed');
}); });
if (localStorage.getItem("sidebar_" + sidebar.id) === "true") { if (localStorage.getItem('sidebar_' + sidebar.id) === 'closed') {
sidebar.classList.remove("show") sidebar.classList.remove('show')
} else { } else {
sidebar.classList.add("show") sidebar.classList.add("show")
} }
const activeChildMenuItem = document.querySelector('#sidebar-menu li ul li a.active');
if (activeChildMenuItem) {
activeChildMenuItem.parentElement.parentElement.classList.add('show');
}
})(); })();
</script> </script>