Panel menu

Renders a panel menu with nested submenus.

Node name : panel-menu

Attributes

Attribute	Type	Required	Default value	Description
title	`string`	`false`		The title to be displayed in the menu.
logo	`string`	`false`		The name of the image representing the logo of the application to be displayed in the menu.
name	`string`	`false`		Menu name.
items	`MenuItem[]`	`false`		An array of menu items.
expanded	`bool`	`false`	`false`	Value indicating whether the panel menu is expanded.
expanded-by-default	`bool`	`false`	`false`	Value indicating whether the panel menu is expanded by default.
toggle-button-visible	`bool`	`false`	`true`	Value indicating whether the toggle button is visible.
collapse-mode	`string` (`collapse`, `hidden`)	`false`	`collapse`	Collapse mode of the menu.
collapse-other-menus-on-menu-expand	`bool`	`false`	`false`	Value indicating whether opened menus are collapsed when expanding another menu.
collapse-on-item-click	`bool`	`false`	`false`	Value indicating whether the menu remains expanded after opening a page.

MenuItem class :

Property	Type	Required	Description
caption	`string`	`true`	The caption of the menu item.
children	`MenuItem[]`	`false`	The children of the menu item representing the nested submenu.
icon	`string`	`false`	The icon of the menu item. Displayed before text.
path	`string`	`false`	The path of the menu item. Path is built with the template {MenuName}/{ChildMenuItemName}/{GrandChildMenuItemName}/... A menu can display only two depth level, so if a path have a depth greater than 3 (menuName/menuHeader/menuItem/someSubMenuItem), it is necessary to navigate to the nested submenu to display the desired item.
parent	`MenuItem`	`false`	The parent of the menu item.
to	`string`	`false`	The UI view name to navigate to when the menu item is selected.

Child node	Description
panel-menu-header	Panel menu header
panel-menu-footer	Panel menu footer

<panel-menu title="Application title" logo="ApplicationLogo" />

In this example, the panel menu is bound to the primary menu.

<panel-menu name="Settings" />

In this example, the panel menu is bound to a secondary menu named "Settings".

<panel-menu items="@Computeds.SettingsMenuItems" />

The SettingsMenuItems computed has a getter with the following code:

List<MenuItem> menuItems = Application.GetMenuItems("Settings").ToList();
menuItems.Add(new MenuItem(...));
return menuItems;

In this example, the panel menu is bound to a computed menu.

To customize the header of the panel-menu, you can use the panel-menu-header component and add any component you want.

<panel-menu>
    <panel-menu-header>
        <!-- ... -->
    </panel-menu-header>
</panel-menu>

To customize the footer of the panel-menu, you can use the panel-menu-footer component and add any component you want.

<panel-menu>
    <panel-menu-footer>
        <!-- ... -->
    </panel-menu-footer>
</panel-menu>