Joomla! Issue Tracker | Joomla! CMS #34067 - [4.0] Active Sidebar Menu item

No Code Attached Yet bug

New
Medium
Build: staging
# 34067

brianteeman
21 May 2021

admin-menu.js determines if a menu item should be marked as the active menu item and therefore also if its a child menu item if the menu should be expanded.

This problem was not faced in J3 and before as we had a drop down menu that was always collapsed and never even highlighted

In the front end we also don't face this problem because every link has an itemid and we match on that (how I wish we had called it menuid 17 years ago )

We therefore have to fix this either by adding the id in the admin (I'm guessing thats a no-no) or by changing the JS

The problem is with this piece of code

joomla-cms/build/media_source/mod_menu/js/admin-menu.es6.js

Lines 68 to 79 in a94bdc4

    
           // Sidebar Nav 
        
           const allLinks = 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')); 
        
           // Set active class 
        
           allLinks.forEach((link) => { 
        
             if (currentUrl === link.href) { 
        
               link.setAttribute('aria-current', 'page'); 
        
               link.classList.add('mm-active');

It is trying to match the url with a menu item and if it finds a match then the menu item is marked as active. This is done on every page load. The problem is that not every potential url has an exact match on the menu and when there is no match then nothing is marked as active and the menu collapses

example

Media has a menu item link of index.php?option=com_media but the url in the address bar is index.php?option=com_media&path=local-0:/
If you click on a link on the category page to list all published items in a content category the url in the address bar is index.php?option=com_content&filter[category_id]=2&filter[published]=1&filter[level]=1 but the menu only has a menu item of /index.php?option=com_content&view=articles

Instead of looking for an exact match on every page load to find the active menu item it should look be looking for the nearest match,

Part 1

Strip the url down before trying to find something it matches
index.php?option=com_media&path=local-0:/ ==> no match
index.php?option=com_media ==> exact match

Part 2

if no matches then build up until it matches
index.php?option=com_content&filter[category_id]=2&filter[published]=1&filter[level]=1 ==> no match
index.php?option=com_content&filter[category_id]=2&filter[published]=1 ==> no match
index.php?option=com_content&filter[category_id]=2 ==>no match
index.php?option=com_content ==> no match

Menu item with closest match
Articles index.php?option=com_content&view=articles

Part 3

if still no matches then use the referrer url for the menu not the active url
index.php?option=com_languages&view=installed ==> no match
index.php?option=com_languages ==> no match
No closest match use referrer System index.php?option=com_cpanel&view=cpanel&dashboard=system

Yes I know there are several other issues listing which urls dont work but this one has the reason so hopefully it will be easier for someone to see and fix
#33590 #32273 and probably more

brianteeman - open - 21 May 2021

joomla-cms-bot - change - 21 May 2021

Labels

Added: ?

joomla-cms-bot - labeled - 21 May 2021

PhilETaylor - comment - 21 May 2021

Yup. This.

But also needs to be powerful for 3pd matches to.

Might be enough to only match on the component and the view in the url, it would be rare to have two menu items with the same component and view in the url params.

brianteeman - comment - 21 May 2021

Not that rare - there is &extension and there is &context

index.php?option=com_categories&view=categories&extension=com_content
index.php?option=com_categories&view=categories&extension=com_contacts
index.php?option=com_categories&view=categories&extension=com_newsfeeds

index.php?option=com_fields&view=fields&context=com_content.article
index.php?option=com_fields&view=fields&context=com_content.categories
index.php?option=com_fields&view=fields&context=com_contacts.contact
index.php?option=com_fields&view=fields&context=com_contacts.categories

PhilETaylor - comment - 21 May 2021

good point. but other than option, view, context and extension ... ?

Hackwar - change - 22 Feb 2023

Labels

Added: No Code Attached Yet bug
Removed: ?

Hackwar - labeled - 22 Feb 2023

Add a Comment

Older
Newer

Joomla! Issue Tracker - CMS

[#34067] - [4.0] Active Sidebar Menu item

example

Part 1

Part 2

Part 3

Add a Comment

	// Sidebar Nav
	const allLinks = 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'));

	// Set active class
	allLinks.forEach((link) => {
	if (currentUrl === link.href) {
	link.setAttribute('aria-current', 'page');
	link.classList.add('mm-active');