Merge branch 'fix-menu-chevron' into 'master'

[FIX] Active menu chevron

See merge request allianceauth/allianceauth!1680
This commit is contained in:
Ariel Rin 2025-01-28 09:13:20 +00:00
commit 14163d2c0c
3 changed files with 19 additions and 11 deletions

View File

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

View File

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

View File

@ -101,22 +101,30 @@
const sidebar = document.getElementById('sidebar');
sidebar.addEventListener('shown.bs.collapse', () => {
localStorage.removeItem('sidebar_' + sidebar.id);
localStorage.removeItem(`sidebar_${sidebar.id}`);
});
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')
} else {
sidebar.classList.add("show")
}
const activeChildMenuItem = document.querySelector('#sidebar-menu li ul li a.active');
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>