[FIX] Active menu chevron

This commit is contained in:
Peter Pfeufer 2025-01-26 19:24:24 +01:00
parent e69444fe79
commit 81d9c41cf6
No known key found for this signature in database
3 changed files with 19 additions and 11 deletions

View File

@ -49,14 +49,14 @@
} }
/* Chevron icons */ /* Chevron icons */
#sidebar-menu [data-bs-toggle="collapse"] > i.fa-chevron-down, #sidebar-menu span[data-bs-toggle="collapse"][aria-expanded="true"] > i.fa-chevron-down,
#sidebar-menu [data-bs-toggle="collapse"].collapsed > i.fa-chevron-right { #sidebar-menu span[data-bs-toggle="collapse"][aria-expanded="false"] > i.fa-chevron-right {
display: block; display: block;
width: 16px; width: 16px;
} }
#sidebar-menu [data-bs-toggle="collapse"] > i.fa-chevron-right, #sidebar-menu span[data-bs-toggle="collapse"][aria-expanded="true"] > i.fa-chevron-right,
#sidebar-menu [data-bs-toggle="collapse"].collapsed > i.fa-chevron-down { #sidebar-menu span[data-bs-toggle="collapse"][aria-expanded="false"] > i.fa-chevron-down {
display: none; display: none;
} }
} }

View File

@ -11,8 +11,8 @@
data-bs-target="#{{ item.html_id }}" data-bs-target="#{{ item.html_id }}"
aria-expanded="false" aria-expanded="false"
aria-controls="" aria-controls=""
{% endif %}> {% endif %}
</i> ></i>
<a <a
class="nav-link flex-fill align-self-center me-auto {% if item.navactive %}{% navactive request item.navactive|join:' ' %}{% endif %}" 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 %}
@ -36,7 +36,7 @@
{% if item.is_folder %} {% if item.is_folder %}
<span <span
class="pill m-2 align-self-center collapsed" class="pill m-2 align-self-center"
type="button" type="button"
data-bs-toggle="collapse" data-bs-toggle="collapse"
data-bs-target="#{{ item.html_id }}" data-bs-target="#{{ item.html_id }}"

View File

@ -101,22 +101,30 @@
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, 'closed'); localStorage.setItem(`sidebar_${sidebar.id}`, 'closed');
}); });
if (localStorage.getItem('sidebar_' + sidebar.id) === 'closed') { 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'); const activeChildMenuItem = document.querySelector('#sidebar-menu li ul li a.active');
if (activeChildMenuItem) { if (activeChildMenuItem) {
activeChildMenuItem.parentElement.parentElement.classList.add('show'); const activeChildMenuUl = activeChildMenuItem.parentElement.parentElement;
const elementsToToggle = document.querySelectorAll(`[data-bs-target^="#${activeChildMenuUl.id}"]`);
activeChildMenuUl.classList.add('show');
elementsToToggle.forEach((element) => {
element.setAttribute('aria-expanded', true);
});
} }
})(); })();
</script> </script>