Navigation

Navigation Bars

This guide assumes you are already familiar with creating and using Hook files in WHASOLS.

There are two navigation bars in WHASOLS’s client area. They exist as part of the system theme.

The primary navigation bar contains the bulk of the menu and floats to the left of the secondary navigation bar. The secondary navigation bar consists user-specific items and changes only if a client is logged in to WHASOLS. When a client is not logged in then the secondary navigation contains a login link, and when a client is logged in then the secondary menu contains links to the client’s account.

When WHASOLS’s client area is viewed on a smaller screen device such as a phone or tablet, responsive mode get activated automatically, At that point, WHASOLS will send the navigation bar into a fold-out menu.

The navigation bar elements are controlled in a programmatically, allowing modules and hooks to dynamically interact with the navigation menu elements.

The look and feel of the navigation bar can be customised via the /includes/header.tpl and /includes/navbar.tpl system theme template files.

Finding A Menu Name

Every menu item has a unique name that is used to make a reference to it. You will need this name in order to manipulate it. To make it easier, the name of each sidebar menu item is made available in the HTML source of the page, which can be retrieved using the Inspect Element option available in most modern browsers. For example:

Screen Shot Picture Here...!

Once you have the menu item name that you wish to manipulate, which in the example above is Account Details, you can manipulate it just as described below.

The client area’s menu system is defined in a tree structure. Each menu item has one parent item and can have many child items. To manipulate a menu item within a sidebar panel, you first need to retrieve the parent menu item, which in the case above is Account, followed by the Account Details menu item within it.

Changing The Text Label Of A Menu Item

All sidebar menu items that are supplied by default use display names controlled by language files. Simply search for the text that you see in the menu item label in your active language file and you can adjust or change it there as required.

Alternatively, you can manipulate the display text via a hook as follows:

$array = [];
$array['Change']=
            [
                'Affiliates'=>["name"=>"New Menu Name",'icon'=>'icon link or name','description'=>'Desc for menu','parent'=>'Billing'],
            ];
 return $array;

The above example retrieves the My Account menu item, followed by the Billing Information menu item, which is a child within that. The same logic should be applied to all dropdown menu items.

Changing Where A Menu Item Links To

You can change where a menu item points using the setUri method. For example, if you use an external system to control announcements, you could do something like the following:

$array['Change']=
[
    'Affiliates'=>["slug"=>"New Menu URL Here"],
];

Rearranging Menu Items

You can change the display order of menu items as follows:

$array['Change']=
[
    'Affiliates'=>["order"=>1],
    'Domains'=>["order"=>2],
];

Adding A Menu Item

You can add a new link to the primary navigation as follows:

$array["Add"]['UniqueName-1']=["name"=>"Name Here","slug"=>"URL Here","order"=>1,"parent"=>'',"icon"=>"","description"=>""]; 
$array["Add"]['UniqueName-2']=["name"=>"Name Here","slug"=>"URL Here","order"=>2,"parent"=>'',"icon"=>"","description"=>""];

Parent Empty means Menu will be created as main menu

Adding An Additional Child Menu Item

You can add additional menu items as follows:

$array["Add"]['UniqueName-1']=["name"=>"Name Here","slug"=>"URL Here","order"=>1,"parent"=>'Services',"icon"=>"","description"=>""]; 
$array["Add"]['UniqueName-2']=["name"=>"Name Here","slug"=>"URL Here","order"=>2,"parent"=>'Billing',"icon"=>"","description"=>""];

Hiding Or Removing A Menu Item

You can remove a menu item as follows:

$array['Remove']=['Dashboard','Domains','Services','My-Domains','Register a New Domain','Transfer-Domain-to-Us','About Us'];