Sidebars

Sidebars

This guide suppose your built in relation with creating and using Hook files in WHASOLS.

There are mentioned two sidebars in WHASOLS’s client area. The primary sidebar consists all the elements that are displayed above the body content when it is in responsive mode. The secondary sidebar contains those elements that are displayed below the body content when in responsive mode. In desktop mode, there will not be any kind of noticeable difference between primary and secondary sidebar items. The sidebar elements and panels are controlled in a programmatic way, allowing modules and hooks to interact dynamically with the sidebar items. The appearance and feel of the navigation bar can be customised via the /includes/header.tpl and /includes/navbar.tpl system theme template files.

Finding A Sidebar Name

Every sidebar menu item is given a unique name that is used to reference it. This name will be needed in order to manipulate it. To make it easier, we have made the name of each sidebar menu item available in the HTML source of the page, that means it can be retrieved using the Inspect Element option available in most modern browsers. For example:

SCREENSHOT PICTURE

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

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

Changing The Text Label Of A Sidebar Item

By default supplied menu items use display names controlled by language file. Just search in your active language file for the text you see in the menu item label, and you can modify or change it there as required. Alternatively, you can manipulate the display text via a hook as follows:

$array['Change']=
[
    'Announcements'=>["name"=>"New Menu name Here"],
];

Notice first how in the above we retrieve the Support menu item, followed by the Announcements menu item, which is a child within that. The same logic should be applied to all dropdown menu items.

Changing Where A Sidebar Item Points To

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

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

Rearranging Sidebar Items

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

$array['Change']=
[
    'Announcements'=>["order"=>1],			
    'NetWork-Issue'=>["order"=>2],
];		

Adding An Additional Sidebar Menu Item

To add an additional item to a menu, check the the sidebar existenance on the particular page before specifying it. Additional menu items can be added 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"=>""];		

Hiding Or Removing A Sidebar 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'];

add_hook('ClientAreaSidebarNavbar', 1, function(){
		//Changes in Menu Name, Description, Slug, Ordering
        $array['Change']=[
                 'Announcements'=>["name"=>"Menu Name Here","order"=>1],
                 'NetWork-Issue'=>["name"=>"Menu Name Here","order"=>2],
        ];
		//Add New Menu (If Parent Empty Then Menu Will Be Created as Main Menu)
		$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"=>""];
		//Remove or Hide Menu
		$array['Remove']=['Dashboard','Domains','Services','My-Domains'];
		});