Visible Property of APP-Menu in Serinity

[nasrul]

What is the purpose of visible property in app.menu.component.html in Serenity

<p-scrollPanel #scrollPanel [style]="{height: '100%'}">
<ul app-submenu [item]="model" root="true" class="layout-menu" visible="true" [reset]="reset" parentActive="true"></ul>
</p-scrollPanel>

My task is I want to hide the dashboard and display only menu modes. instead of changing the model, how can I achieve it ? Is there any property I can add to it?

this.model = [
{label: 'Dashboard', icon: 'dashboard', routerLink: ['/']},
{
label: 'Menu Modes', icon: 'settings',
items: [
{label: 'Static Menu', icon: 'view_quilt', command: (event) => {this.app.layoutMode = 'static'; }},
{label: 'Overlay Menu', icon: 'flip_to-front', command: (event) => {this.app.layoutMode = 'overlay'; }},
{label: 'Horizontal Menu', icon: 'border_horizontal', command: (event) => {this.app.layoutMode = 'horizontal'; }},
{label: 'Light Menu', icon: 'label', command: (event) => {this.app.darkMenu = false; }},
{label: 'Dark Menu', icon: 'label_outline', command: (event) => {this.app.darkMenu = true; }},
{
label: 'Orientation', icon: 'format_align_right',
items: [
{label: 'LTR', icon: 'format_align_left', command: (event) => {this.app.isRTL = false; }},
{label: 'RTL', icon: 'format_align_right', command: (event) => {this.app.isRTL = true; }}
]
}
]
}]

[merve7]

Visibility property is used for parent-child menu structure.
You can add a class with the condition to hide dashboard like;
in AppSubMenuComponent class in app.menu.component.ts

Code: Select all

//other codes
            <li [ngClass]="{'active-menuitem': isActive(i), 'hide':child.label==('Dashboard')}"      //you can use function for comperation
                [class]="child.badgeStyleClass">
                //other codes

in styles.scss

Code: Select all

.layout-menu {
    .hide {
        display: none;
    }
}

[nasrul]

Thank you @merve