APEX Navigation Side Bar Collapse Icon

Its been a while since I last blogged (which is kind of becoming the theme).  So another short post to get back in the saddle.

Simple user requirement this week:

Can the navigation icon on the right hand side bar not be the three lines but something more meaningful.

So, instead of this icon – , can we show a nice arrow to open and close.

Here is what it looks like currently:

Add the following javascript to execute when page loads (or into a js file and call it from there):

//Update the Actions Menu button to a more meaningful icon

var actionRegion = $( "#t_Button_rightControlButton" );
var actionButton = $( "#t_Button_rightControlButton > span" );
var rightIcon = "fa-chevron-circle-right" ;
var leftIcon = "fa-chevron-circle-left";

$(actionButton).addClass( leftIcon )

$( actionRegion).click(function() {
 if ($(actionButton).hasClass(leftIcon)) 
 {
 $(actionButton).addClass( rightIcon ).removeClass( leftIcon );
 }
 else {
 $(actionButton).removeClass( rightIcon ).addClass( leftIcon );
 }
});

After:

This should work in APEX v5.x, but not tested in 4.x.

Leave a Reply

Your email address will not be published. Required fields are marked *