Sidebar Nav (sidebar-nav)

Rafael Fernandes — Mon, 12 Dec 2022 16:46:06 GMT

Current Revision posted to Dev Tutorials by Rafael Fernandes on 12/12/2022 4:46:06 PM

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:

$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',
                    ...
                ],
            ],
        ],
    ],
];

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:

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

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

<?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',
                        ],
                        [
                            'view' => [
                                'type' => 'sidebar-nav-flyout-actions',
                                'actions' => [
                                    [
                                        'route' => '#Accounts',
                                        'label' => 'LBL_ACCOUNTS',
                                        'icon' => 'sicon-account-lg',
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
    ],
];

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.

$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',
                    ...
                ],
            ],
        ],
    ],
];

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

Move on to Component Mapping.

Sidebar Nav (sidebar-nav)

Rafael Fernandes — Mon, 12 Dec 2022 16:45:31 GMT

Revision 20 posted to Dev Tutorials by Rafael Fernandes on 12/12/2022 4:45:31 PM

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

$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',
                    ...
                ],
            ],
        ],
    ],
];

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

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

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

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

<?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',
                        ],
                        [
                            'view' => [
                                'type' => 'sidebar-nav-flyout-actions',
                                'actions' => [
                                    [
                                        'route' => '#Accounts',
                                        'label' => 'LBL_ACCOUNTS',
                                        'icon' => 'sicon-account-lg',
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
    ],
];

$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',
                    ...
                ],
            ],
        ],
    ],
];

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

Move on to Component Mapping.

Sidebar Nav (sidebar-nav)

Rafael Fernandes — Fri, 02 Dec 2022 14:13:35 GMT

Revision 19 posted to Dev Tutorials by Rafael Fernandes on 12/2/2022 2:13:35 PM

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

$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',
                    ...
                ],
            ],
        ],
    ],
];

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

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

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

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

<?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',
                        ],
                        [
                            'view' => [
                                'type' => 'sidebar-nav-flyout-actions',
                                'actions' => [
                                    [
                                        'route' => '#Accounts',
                                        'label' => 'LBL_ACCOUNTS',
                                        'icon' => 'sicon-account-lg',
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
    ],
];

$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',
                    ...
                ],
            ],
        ],
    ],
];

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

Move on to Component Mapping.

Sidebar Nav (sidebar-nav)

Rafael Fernandes — Mon, 10 Oct 2022 12:59:23 GMT

Revision 18 posted to Dev Tutorials by Rafael Fernandes on 10/10/2022 12:59:23 PM

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). Brings all the default modules available to the user Gets the first “max display modules” setting from the config (defaults to 4) It will always add 1 extra 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

$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',
                    ...
                ],
            ],
        ],
    ],
];

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

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

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

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

<?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',
                        ],
                        [
                            'view' => [
                                'type' => 'sidebar-nav-flyout-actions',
                                'actions' => [
                                    [
                                        'route' => '#Accounts',
                                        'label' => 'LBL_ACCOUNTS',
                                        'icon' => 'sicon-account-lg',
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
    ],
];

$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',
                    ...
                ],
            ],
        ],
    ],
];

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

Move on to Component Mapping.

Sidebar Nav (sidebar-nav)

Scott King — Wed, 05 Oct 2022 15:18:37 GMT

Revision 16 posted to Dev Tutorials by Scott King on 10/5/2022 3:18:37 PM

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). Brings all the default modules available to the user Gets the first “max display modules” setting from the config (defaults to 4) It will always add 1 extra 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

$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',
                    ...
                ],
            ],
        ],
    ],
];

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

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

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

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

<?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',
                        ],
                        [
                            'view' => [
                                'type' => 'sidebar-nav-flyout-actions',
                                'actions' => [
                                    [
                                        'route' => '#Accounts',
                                        'label' => 'LBL_ACCOUNTS',
                                        'icon' => 'sicon-account-lg',
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
    ],
];

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

Move on to Component Mapping.

$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',
                    ...
                ],
            ],
        ],
    ],
];

Sidebar Nav (sidebar-nav)

Scott King — Wed, 05 Oct 2022 15:18:37 GMT

Revision 17 posted to Dev Tutorials by Scott King on 10/5/2022 3:18:37 PM

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). Brings all the default modules available to the user Gets the first “max display modules” setting from the config (defaults to 4) It will always add 1 extra 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

$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',
                    ...
                ],
            ],
        ],
    ],
];

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

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

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

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

<?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',
                        ],
                        [
                            'view' => [
                                'type' => 'sidebar-nav-flyout-actions',
                                'actions' => [
                                    [
                                        'route' => '#Accounts',
                                        'label' => 'LBL_ACCOUNTS',
                                        'icon' => 'sicon-account-lg',
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
    ],
];

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

Move on to Component Mapping.

$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',
                    ...
                ],
            ],
        ],
    ],
];

Sidebar Nav (sidebar-nav)

Scott King — Wed, 05 Oct 2022 15:17:47 GMT

Revision 15 posted to Dev Tutorials by Scott King on 10/5/2022 3:17:47 PM

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). Brings all the default modules available to the user Gets the first “max display modules” setting from the config (defaults to 4) It will always add 1 extra 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

$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',
                    ...
                ],
            ],
        ],
    ],
];

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

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

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

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

<?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' => 'sidebar-nav-item',
                    'route' => '#Accounts',
                    'icon' => 'sicon-bell-lg',
                    'label' => 'Hello!',
                    'flyoutComponents' => [
                        [
                            'view' => 'sidebar-nav-flyout-header',
                            'title' => 'Greetings',
                        ],
                        [
                            'view' => [
                                'type' => 'sidebar-nav-flyout-actions',
                                'actions' => [
                                    [
                                        'route' => '#Accounts',
                                        'label' => 'LBL_ACCOUNTS',
                                        'icon' => 'sicon-account-lg',
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
    ],
];

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

Move on to Component Mapping.

Sidebar Nav (sidebar-nav)

Rafael Fernandes — Wed, 28 Sep 2022 18:35:49 GMT

Revision 14 posted to Dev Tutorials by Rafael Fernandes on 9/28/2022 6:35:49 PM

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). Brings all the default modules available to the user Gets the first “max display modules” setting from the config (defaults to 4) It will always add 1 extra 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

$viewdefs[...] = [
    'layout' => [
        'type' => 'sidebar-nav-item-group',
        'name' => 'sidebar-nav-item-group-bottom',
        'css_class' => 'flex-grow-0 flex-shrink-0',
        'components' => [
            [
                'view' => [
                    'name' => 'footer-greet-button',
                    'type' => '<some-custom-view>',
                    'route' => '#Accounts',
                    ...
                ],
            ],
        ],
    ],
];

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

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

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

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

<?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' => 'footer-greet-button',
                    'type' => 'footer-greet-button',
                    'route' => '#Accounts',
                    'icon' => 'sicon-bell-lg',
                    'label' => 'Hello!',
                    'flyoutComponents' => [
                        [
                            'view' => 'sidebar-nav-flyout-header',
                            'title' => 'Greetings',
                        ],
                        [
                            'view' => [
                                'type' => 'sidebar-nav-flyout-actions',
                                'actions' => [
                                    [
                                        'route' => '#Accounts',
                                        'label' => 'LBL_ACCOUNTS',
                                        'icon' => 'sicon-account-lg',
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
    ],
];

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

Move on to Component Mapping.

Sidebar Nav (sidebar-nav)

Scott King — Wed, 28 Sep 2022 13:27:39 GMT

Revision 13 posted to Dev Tutorials by Scott King on 9/28/2022 1:27:39 PM

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). Brings all the default modules available to the user Gets the first “max display modules” setting from the config (defaults to 4) It will always add 1 extra 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

$viewdefs[...] = [
    'layout' => [
        'type' => 'sidebar-nav-item-group',
        'name' => 'sidebar-nav-item-group-bottom',
        'css_class' => 'flex-grow-0 flex-shrink-0',
        'components' => [
            [
                'view' => [
                    'name' => 'footer-greet-button',
                    'type' => '<some-custom-view>',
                    'route' => '#Accounts',
                    ...
                ],
            ],
        ],
    ],
];

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

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

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

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

<?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' => 'footer-greet-button',
                    'type' => 'footer-greet-button',
                    'route' => '#Accounts',
                    'icon' => 'sicon-bell-lg',
                    'label' => 'Hello!',
                    'flyoutComponents' => [
                        [
                            'view' => 'sidebar-nav-flyout-header',
                            'title' => 'Greetings',
                        ],
                        [
                            'view' => [
                                'type' => 'sidebar-nav-flyout-actions',
                                'actions' => [
                                    [
                                        'route' => '#Accounts',
                                        'label' => 'LBL_ACCOUNTS',
                                        'icon' => 'sicon-account-lg',
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
    ],
];

Sidebar Nav (sidebar-nav)

Rafael Fernandes — Tue, 27 Sep 2022 14:43:42 GMT

Revision 12 posted to Dev Tutorials by Rafael Fernandes on 9/27/2022 2:43:42 PM

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). Brings all the default modules available to the user Gets the first “max display modules” setting from the config (defaults to 4) It will always add 1 extra 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

$viewdefs[...] = [
    'layout' => [
        'type' => 'sidebar-nav-item-group',
        'name' => 'sidebar-nav-item-group-bottom',
        'css_class' => 'flex-grow-0 flex-shrink-0',
        'components' => [
            [
                'view' => [
                    'name' => 'footer-greet-button',
                    'type' => '<some-custom-view>',
                    'route' => '#Accounts',
                    ...
                ],
            ],
        ],
    ],
];

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

TODO update

Sidebar Nav (sidebar-nav)

Rafael Fernandes — Tue, 27 Sep 2022 14:40:26 GMT

Revision 11 posted to Dev Tutorials by Rafael Fernandes on 9/27/2022 2:40:26 PM

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
	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). Brings all the default modules available to the user Gets the first “max display modules” setting from the config (defaults to 4) It will always add 1 extra 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

$viewdefs[...] = [
    'layout' => [
        'type' => 'sidebar-nav-item-group',
        'name' => 'sidebar-nav-item-group-bottom',
        'css_class' => 'flex-grow-0 flex-shrink-0',
        'components' => [
            [
                'view' => [
                    'name' => 'footer-greet-button',
                    'type' => '<some-custom-view>',
                    'route' => '#Accounts',
                    ...
                ],
            ],
        ],
    ],
];

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

TODO update

Sidebar Nav (sidebar-nav)

Scott King — Mon, 26 Sep 2022 20:27:31 GMT

Revision 10 posted to Dev Tutorials by Scott King on 9/26/2022 8:27:31 PM

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
	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). Brings all the default modules available to the user Gets the first “max display modules” setting from the config (defaults to 4) It will always add 1 extra 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

$viewdefs[...] = [
    'layout' => [
        'type' => 'sidebar-nav-item-group',
        'name' => 'sidebar-nav-item-group-bottom',
        'css_class' => 'flex-grow-0 flex-shrink-0',
        'components' => [
            [
                'view' => [
                    'name' => 'footer-greet-button',
                    'type' => '<some-custom-view>',
                    'route' => '#Accounts',
                    ...
                ],
            ],
        ],
    ],
];

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

TODO update

Sidebar Nav (sidebar-nav)

Rafael Fernandes — Mon, 26 Sep 2022 17:56:50 GMT

Revision 9 posted to Dev Tutorials by Rafael Fernandes on 9/26/2022 5:56:50 PM

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
	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). Brings all the default modules available to the user Gets the first “max display modules” setting from the config (defaults to 4) It will always add 1 extra 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.

Secondary Action

Sidebar Nav (sidebar-nav)

Rafael Fernandes — Mon, 26 Sep 2022 17:46:31 GMT

Revision 8 posted to Dev Tutorials by Rafael Fernandes on 9/26/2022 5:46:31 PM

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
	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). Brings all the default modules available to the user Gets the first “max display modules” setting from the config (defaults to 4) It will always add 1 extra 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.

Secondary Action

Secondary actions, are triggered as part of the submenu on the sidebar-nav's view when secondary-action is enabled.

It uses flyoutComponents definitions to render the submenu and render views.

Sidebar Nav (sidebar-nav)

Rafael Fernandes — Mon, 26 Sep 2022 15:52:42 GMT

Revision 7 posted to Dev Tutorials by Rafael Fernandes on 9/26/2022 3:52:42 PM

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
	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). Brings all the default modules available to the user Gets the first “max display modules” setting from the config (defaults to 4) It will always add 1 extra 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

Sidebar Nav (sidebar-nav)

Rafael Fernandes — Mon, 26 Sep 2022 15:52:03 GMT

Revision 6 posted to Dev Tutorials by Rafael Fernandes on 9/26/2022 3:52:03 PM

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
	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). Brings all the default modules available to the user Gets the first “max display modules” setting from the config (defaults to 4) It will always add 1 extra 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

Sidebar Nav (sidebar-nav)

Rafael Fernandes — Mon, 26 Sep 2022 15:49:20 GMT

Revision 5 posted to Dev Tutorials by Rafael Fernandes on 9/26/2022 3:49:20 PM

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
	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). Brings all the default modules available to the user Gets the first “max display modules” setting from the config (defaults to 4) It will always add 1 extra 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

Sidebar Nav (sidebar-nav)

Rafael Fernandes — Mon, 26 Sep 2022 15:44:35 GMT

Revision 4 posted to Dev Tutorials by Rafael Fernandes on 9/26/2022 3:44:35 PM

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
	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). Brings all the default modules available to the user Gets the first “max display modules” setting from the config (defaults to 4) It will always add 1 extra 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

Sidebar Nav (sidebar-nav)

Rafael Fernandes — Mon, 26 Sep 2022 15:24:10 GMT

Revision 3 posted to Dev Tutorials by Rafael Fernandes on 9/26/2022 3:24:10 PM

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

Sidebar Nav (sidebar-nav)

Rafael Fernandes — Mon, 26 Sep 2022 15:21:32 GMT

Revision 2 posted to Dev Tutorials by Rafael Fernandes on 9/26/2022 3:21:32 PM

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

Sidebar Nav (sidebar-nav)

Rafael Fernandes — Thu, 22 Sep 2022 20:19:45 GMT

Revision 1 posted to Dev Tutorials by Rafael Fernandes on 9/22/2022 8:19:45 PM

Sidebar Nav (sidebar-nav)