[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 %}>
</i>
<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 %}
type="button"
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">
<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>
<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" %}
</a>
</li>

View File

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