Sidebar Nav (sidebar-nav)

This new layout is Sugar's main component that hosts overall Menu options structure in the newly redesigned Home Page.

It has been designed to group functionalities in layouts, where each layout/group is separated by a line/divisor within sidebar-nav definition.

Natively on 12.3, Sugar is shipping 4 layouts:

For the sake of simplicity, we’re grouping 2 layouts in this image.

  • First group contains the “hamburger” icon menu that’s sole purpose is to expand/collapse side nav.
  • Second group contains:
    • Home menu dedicated to Dashboards
    • Quick Create menu dedicated to create new records

Quick Create view has been redesigned and presents the modules on click.

Note this view does not require secondary-action as others with submenu.
Each item in the menu contains a set of submenus providing the user extra options prior to accessing the functionality (such as header submenus)

This layout group brings a scrollable modules list (now called sidebar-nav-item-module).

It displays all the default modules available to the user ordered by the current user's preference.

When Sidebar is collapsed, Sugar displays a list of "pinned" modules.

  • Displays icons or abbreviations of modules available to the current user.
  • It uses sugar's config called maxPinnedModules to determine how many modules to display
  • This setting is defaulted to 4 (four) items but can be updated by an admin with access to the filesystem
  • Keep in mind that Sugar always adds 1 (one) extra item to the bottom of the list for the module in focus.

This layout group is where Sugar’s footer now resides.

  • Last icon is Sugar’s platform home page
  • For better experience, as a rule of thumb should not exceed 4 items
If more buttons needed, add one button and use submenus

Actions

Primary Action

Primary actions are triggered by the click of a button on the sidebar-nav's views. By default if a route property is provided in the view object in the layout metadata, the Primary Action will be a link to the route provided. For example:

Fullscreen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$viewdefs[...] = [
'layout' => [
'type' => 'sidebar-nav-item-group',
'name' => 'sidebar-nav-item-group-bottom',
'css_class' => 'flex-grow-0 flex-shrink-0',
'components' => [
[
'view' => [
'name' => 'greeting-nav-item',
'type' => '<some-custom-view>',
'route' => '#Accounts',
...
],
],
],
],
];
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Otherwise, if you're using a custom view and the controller has a primaryActionOnClick method defined, that will be used in addition to the route property. 

Secondary Action

With the introduction of the sidebar-nav-item component, we’re now introducing secondary actions. These appear by way of a kebab menu when hovering on the sidebar-nav-item container to which they are added. 

Secondary Actions do have some default behaviour. If the template has the following markup present, the kebab will render on hover:

Fullscreen
1
2
3
<button class="sidebar-nav-item-kebab bg-transparent absolute p-0 h-full">
<i class="{{buildIcon 'sicon-kebab'}} text-white"></i>
</button>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

If metadata is provided with certain keys, clicking on the kebab icon will render a flyout menu. From the Moving Footer Content to Sidebar Nav example, the following metadata is defined in;

./custom/Extension/application/Ext/clients/base/layouts/sidebar-nav/sidebar-nav.php

Fullscreen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
'layout' => [
'type' => 'sidebar-nav-item-group',
'name' => 'sidebar-nav-item-group-bottom',
'css_class' => 'flex-grow-0 flex-shrink-0',
'components' => [
[
'view' => [
'name' => 'greeting-nav-item',
'type' => 'greeting-nav-item',
'route' => '#Accounts',
'icon' => 'sicon-bell-lg',
'label' => 'Hello!',
'flyoutComponents' => [
[
'view' => 'sidebar-nav-flyout-header',
'title' => 'Greetings',
],
[
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

The flyoutComponents array will render all the views that are pass to it. In this case, we load a sidebar-nav-item-header component and a sidebar-nav-item-flyout-actions component. Similar to a Primary Action, you can override the default secondaryActionOnClick method in your custom view controller to change the behaviour of clicking on the kebab menu. 

Fullscreen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$viewdefs[...] = [
'layout' => [
'type' => 'sidebar-nav-item-group',
'name' => 'sidebar-nav-item-group-bottom',
'css_class' => 'flex-grow-0 flex-shrink-0',
'components' => [
[
'view' => [
'name' => 'greeting-nav-item',
'type' => 'greeting-nav-item',
'route' => '#Accounts',
...
],
],
],
],
];
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

You understand the new sidebar-nav, let's get to component mapping:

Move on to Component Mapping.