File
Methods
|
actionMenuCompact
|
actionMenuCompact()
|
|
|
|
|
|
collapsed
|
Default value : true
|
|
|
|
menuCompact
|
Default value : false
|
|
|
|
multiple
|
Type : boolean
|
Default value : false
|
|
|
|
Protected
Readonly
navbarData
|
Default value : navbarData
|
|
|
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
import { SimplebarAngularModule } from 'simplebar-angular';
import { RouterLink, RouterLinkActive } from '@angular/router';
import { navbarData } from './nav-data';
import { SublevelMenuComponent } from './sublevel-menu.component';
import { MenuItem } from './menu.model';
@Component({
selector: 'bgui-sidebar',
standalone: true,
imports: [
CommonModule,
MatIconModule,
SimplebarAngularModule,
RouterLinkActive,
RouterLink,
SublevelMenuComponent,
],
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss'],
})
export class SidebarComponent {
collapsed = true;
multiple: boolean = false;
menuCompact = false;
actionMenuCompact() {
this.menuCompact = !this.menuCompact;
}
protected readonly navbarData = navbarData;
handleClick(item: MenuItem): void {
if (!this.multiple) {
for (const modelItem of this.navbarData) {
if (item !== modelItem && modelItem.expanded) {
modelItem.expanded = false;
}
}
}
item.expanded = !item.expanded;
}
}
<div class="nk-sidebar-element">
<div class="nk-sidebar-content">
<div class="nk-sidebar-menu">
<ul class="nk-menu">
<ng-container *ngFor="let data of navbarData">
<li class="nk-menu-heading" *ngIf="data.isTitle">
<h6 class="overline-title text-primary-alt">{{ data.label }}</h6>
</li>
<!-- .nk-menu-item -->
<li
class="nk-menu-item has-sub"
*ngIf="!data.isTitle"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }">
<div class="">
<a
class="nk-menu-link"
(click)="handleClick(data)"
*ngIf="data.items && data.items.length > 0">
<mat-icon fontSet="material-icons-round" class="icon">{{
data.icon
}}</mat-icon>
<span class="nk-menu-text">{{ data.label }}</span>
<i
*ngIf="data.items && collapsed"
class="bgui-menu-toggle"
[ngClass]="
!data.expanded ? 'fal fa-angle-right' : 'fal fa-angle-down'
"></i>
</a>
</div>
<a
class="nk-menu-link"
[routerLink]="[data.routeLink]"
*ngIf="!data.items || (data.items && data.items.length === 0)"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }">
<span class="nk-menu-icon">
<mat-icon fontSet="material-icons-round" class="icon">{{
data.icon
}}</mat-icon></span
>
<span class="nk-menu-text">{{ data.label }}</span>
</a>
<div *ngIf="collapsed && data.items && data.items.length > 0">
<bgui-sublevel-menu
[data]="data"
[collapsed]="collapsed"
[multiple]="multiple"
[expanded]="data.expanded"></bgui-sublevel-menu>
</div></li
></ng-container>
</ul>
</div>
</div>
</div>
.bgui-menu-toggle {
position: absolute;
top: 50%;
right: 1.25rem;
transform: translateY(-50%);
font-size: 1.3rem;
color: #aedcb6;
transition: transform 0.3s, color 0.1s, opacity 0.3s ease 0.3s;
}
Legend
Html element with directive