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; }}
]
}
]
}]
Visible Property of APP-Menu in Serinity
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
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
in styles.scss
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
Code: Select all
.layout-menu {
.hide {
display: none;
}
}
-
- Information
-
Who is online
Users browsing this forum: Google [Bot] and 8 guests