My pr #34465 was merged too quickly as its not correct.
The home dashboard link is now always styled as active and has aria-current=page
You can't have two different links marked as current ;)
Labels |
Added:
?
|
// Sidebar Nav
const allLinks = [].slice.call(wrapper.querySelectorAll('a.no-dropdown, a.collapse-arrow, .menu-dashboard > a'));
const currentUrl = window.location.href;
const mainNav = document.querySelector('ul.main-nav');
const menuParents = [].slice.call(mainNav.querySelectorAll('li.parent > a'));
const subMenusClose = [].slice.call(mainNav.querySelectorAll('li.parent .close'));
const activeState = (element, state) => {
if (state) {
element.removeAttribute('aria-current');
element.classList.remove('mm-active');
// Close Expanded Levels
if (!element.parentNode.classList.contains('parent')) {
const firstLevel = element.closest('.collapse-level-1');
const secondLevel = element.closest('.collapse-level-2');
if (firstLevel) firstLevel.parentNode.classList.remove('mm-active');
if (firstLevel) firstLevel.classList.remove('mm-show');
if (secondLevel) secondLevel.parentNode.classList.remove('mm-active');
if (secondLevel) secondLevel.classList.remove('mm-show');
}
} else if (currentUrl.indexOf(element.href) === 0) {
element.setAttribute('aria-current', 'page');
element.classList.add('mm-active');
// Auto Expand Levels
if (!element.parentNode.classList.contains('parent')) {
const firstLevel = element.closest('.collapse-level-1');
const secondLevel = element.closest('.collapse-level-2');
if (firstLevel) firstLevel.parentNode.classList.add('mm-active');
if (firstLevel) firstLevel.classList.add('mm-show');
if (secondLevel) secondLevel.parentNode.classList.add('mm-active');
if (secondLevel) secondLevel.classList.add('mm-show');
}
}
};
// Unset active menus
allLinks.map((el) => activeState(el, true));
// Set active class
allLinks.map((el) => activeState(el));
Not tested but should do the trick
if (currentUrl.indexOf(link.href) === 0) {
// -> remove here link.setAttribute('aria-current', 'page');
link.classList.add('mm-active'); // Auto Expand Levels
if (!link.parentNode.classList.contains('parent')) {
const firstLevel = link.closest('.collapse-level-1');
const secondLevel = link.closest('.collapse-level-2');
if (firstLevel) firstLevel.parentNode.classList.add('mm-active');
if (firstLevel) firstLevel.classList.add('mm-show');
if (secondLevel) secondLevel.parentNode.classList.add('mm-active');
if (secondLevel) secondLevel.classList.add('mm-show');
}
}
// add after
if (currentUrl==link.href) {
link.setAttribute('aria-current', 'page');
}
@angieradtke your suggestion doesnt effect the highlight as that is done by mm-active
and not aria-current
@dgrammatiko your suggested code did not fix the problem, the Home Dashboard still was highlighted on all pages.
Status | New | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2021-08-22 15:02:30 |
Closed_By | ⇒ | richard67 | |
Labels |
Added:
No Code Attached Yet
Removed: ? |
probably a quick fix for @dgrammatiko in the JS file you changed. https://github.com/joomla/joomla-cms/pull/34465/files