[Tip] Expand / Contract Large Admin Menu Item - Quality of Life Enhancement with code [Menu accordion]

[Acer]

Hi guys

• Problem:
  • One some menus, screen resolutions and window sizes:
  • I've encountered a niggling issue in the Admin menu (for me at least), where long Admin menu items can cause the next menu items to not be reachable (as there is no expand / contract or scrolling functionality on the menu).
  • The only way to access the menu items below this menu (as far as I know) is to literary go to another menu item to force the large one to contract (wtf).
• Solution:
  • For me this hampers the user experience a bit. And maybe because I'm used to accordion menus...
  • To make my life easier, I've written a little jQuery solution that can be added to the Admin menu js.
  • This solution creates an expand / contract icon next to an Active menu item (that has a submenu and when the menu is not in the collapsed state).
  • And without having to navigate to another menu item, it expands / contracts the active menu accordingly. The hover / fly over menu is still available.
  • This is my first attempt at writing some code for TB, and I've decided to share it with the community. Hope it provides some value.
     

Instructions

• Go to admin***\themes\default\js\admin-theme.js
• Find:

function navSidebar() {
        var sidebar = $('#nav-sidebar');
        sidebar.off();
        $('.expanded').removeClass('expanded');
        $('.maintab').not('.active').closest('.submenu').hide();

• After $('.maintab').not('.active').closest('.submenu').hide(); insert the following code:

/// Expand Contract Icon for Active Admin Menu Items ///
// Set text for expand / contract tooltip
var tooltipcontract = 'Contract dropdown menu';
var tooltipexpand = 'Expand dropdown menu';
var expandicon = '+';
var contracticon = '-';
// Finds active admin menu item and generates expand/contract icon element in opened state
$('.maintab.active.has_submenu').find('a:eq(0)').append('<div class="expandcontracticon expandcontracticon-open" title="' + tooltipcontract + '">' + contracticon + '</div>');
$('.expandcontracticon').attr('style', 'background-color: #2F3237; width: 10%; float: right; margin-right: 5px; display: block; text-align: center; font-weight: bold;');
// Binds expand / contract functionality to icon
$('.expandcontracticon').on('click', function (e) {
	// Prevents the menuitem a element from opening the default link when the icon is clicked:
	e.preventDefault();
	/// Ensures all submenus are hidden
	$('.maintab').removeClass('active');
	$('.maintab').removeClass('hover');
	// Checks open/closed state:
	var checkifopen = $(this).hasClass('expandcontracticon-open');
	// Does sub menu work on menu item for active and not active states
	// Changes icon's +- text and title tooltip depending on state
	if (checkifopen == true) {
		// If the current state is opened, close the submenu and display 'expand/+' state
		$(this).html(expandicon);
		$(this).removeClass('expandcontracticon-open');
		$(this).addClass('expandcontracticon-closed');
		$(this).attr('title', tooltipexpand);
	}
	else {
		// If the current state is closed, show the submenu and display 'contract/-' state
		$(this).html(contracticon);
		$(this).parent('a').parent('li').addClass('active');
		$(this).removeClass('expandcontracticon-closed');
		$(this).addClass('expandcontracticon-open');
		$(this).attr('title', tooltipcontract);
	}
});
// Checks if the Sidebar is collapsed and hides / shows icon accordingly
// Check on page load
$('.page-sidebar-closed').find(".expandcontracticon").hide();
$("body").not('.page-sidebar-closed').find(".expandcontracticon").show();
// Check on Toggle Sidebar menu button action and hides the icon as it's not required on collapsed sidebar
// Slight timeout to allow for page-side-bar-closed class to be applied first 
sidebar.find('.menu-collapse').on("click", function () {
	setTimeout(function () {
		$('.page-sidebar-closed').find(".expandcontracticon").hide();
		$("body").not('.page-sidebar-closed').find(".expandcontracticon").show();
	}, 100);
});
/// *** *** ///

• Save, refresh and party 😄

Hope it helps 🙂

Edited October 9, 2019 by Theo

[the.rampage.rado]

I think this should end up in the next version of the software ! https://github.com/thirtybees/thirtybees/pulls
 
GREAT WORK!

Edited October 8, 2019 by the.rampage.rado

[Traumflug]

Uhm, nice code, but it solves a not existing problem. Code for properly handling long menus is already there.

... except for browser windows of a certain height. Making the window a bit shorter puts submenus not under, but to the right of the parent menu item on hovering, keeping everything available:

Rather than adding yet another interface item to this already pretty complex menu handling code I'd much prefer to fix this length calculation problem. Didn't come around to do it myself, yet, as the workaround is so easy.

[Acer]

1 hour ago, Traumflug said:

Uhm, nice code, but it solves a not existing problem. Code for properly handling long menus is already there.

... except for browser windows of a certain height. Making the window a bit shorter puts submenus not under, but to the right of the parent menu item on hovering, keeping everything available:

Rather than adding yet another interface item to this already pretty complex menu handling code I'd much prefer to fix this length calculation problem. Didn't come around to do it myself, yet, as the workaround is so easy.

Hi Traumflug, thanks for comment about the code.

For me, and it appears for others as well, this is an actual problem, as resizing the browser window or clicking on another menu item to collapse the menu just feels unnecessary and frustrates the UX.
In terms of the 'workaround' that you mentioned: as it seems that this problem has been around since many previous versions of PS 1.6 (if I recall) and TB - it appears that no one has come around to it as yet...
Can you perhaps show us the workaround you suggested and where to update the code to implement?
As it's so 'easy', and as the menu system is already pretty complex... many of us here are not as familiar with the system as yourself and the other senior TB devs here.
Hence the reason I went with my 'solution' to fix this issue.
For me, this solved a real problem and is nice to use until a better solution becomes available. Your workaround would be appreciated.
Also, as the default behavior when a menu item is active, is to expand the submenu, not hover, thereby giving feedback on which sub item you're on (without having to hover on the parent menu item) - it's going to be interesting to see how your suggestion behaves / functions when it's implemented.

Edited October 9, 2019 by Theo

[Traumflug]

The workaround is to shorten the browser window.

If I had code to fix this issue, I had committed it already 🙂

[Acer]

1 hour ago, Traumflug said:

The workaround is to shorten the browser window.

If I had code to fix this issue, I had committed it already 🙂

Nah, your 'workaround' moves the user away from the focus area of the menu... Not 'smooth UX' imo 😉
Been using my solution for a few days now - feels like it was 'always part of TB', like it's supposed to be there - almost forgot that it wasn't there before... 
Definitely missed it when I used another TB test site with it not implemented...
Just my experience

Maybe the community can let us know what they think?

Edited October 15, 2019 by Theo

[datakick]

My solution for this issue is quite simple -- add this css code to /admin-dev/themes/default/css/overrides.css

#nav-sidebar {
    overflow-y: auto;
}

 

[Acer]

5 hours ago, datakick said:

My solution for this issue is quite simple -- add this css code to /admin-dev/themes/default/css/overrides.css

#nav-sidebar {
    overflow-y: auto;
}

 

Cute, only thing is you can't contract the active menu item this way, without clicking on another menu item - thereby taking you to another page. Plus, this forces you to scroll up or down again to find what you're looking for. Imo, the accordion is a simpler, faster and more elegant approach. 

Edited October 15, 2019 by Theo