ngx-accordion-menu

DEMO

How to Use it:

import { NgxAccordionMenuModule } from 'ngx-accordion-menu'; import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { CommonModule } from '@angular/common';

@NgModule({ declarations: [AppComponent], imports: [ BrowserModule, NgxAccordionMenuModule, CommonModule, ], providers: [], bootstrap: [AppComponent], }) export class AppModule {}

and inside the template file:

<button (click)="onMinimize()">Minimize</button>
<div class="container">
  <ngx-accordion-menu [list]="menus" [src]="imageUrl" [onMinimize]="isMinimized"></ngx-accordion-menu>
</div>

Interfaces:

IMenu:{
     title: string;
    type: MenuType;
    children?: IMenu[];
    icon?: string;
    route?: string;
    index: number;
    path?: string;
}

MenuType: {
    LINK = 0,
    ITEM = 1
}

Inputs:

input	type
list	IMenu[]
src	string
onMinimize	bool

an example for menu is:

menus: IMenu[] = [
    {
      title: 'تست 1',
      type: MenuType.LINK,
      icon: 'alarm-fill',
      index: 1,
      path: '/user',
    },
    {
      index: 2,
      title: 'تست 2',
      type: MenuType.ITEM,
      children: [
        {
          title: 'تست 4',
          type: MenuType.LINK,
          icon: 'balloon-heart-fill',
          route: '/test',
          index: 1,
        },
        {
          title: 'تست 5',
          type: MenuType.LINK,
          icon: 'balloon-heart-fill',
          route: '/test',
          index: 2,
        },
      ],
      icon: 'alarm-fill',
    },
    {
      index: 3,
      title: 'تست 10',
      type: MenuType.ITEM,
      children: [
        {
          title: 'تست 40',
          type: MenuType.LINK,
          icon: 'balloon-heart-fill',
          route: '/test',
          index: 100,
        },
        {
          title: 'تست 50',
          type: MenuType.LINK,
          icon: 'balloon-heart-fill',
          route: '/test',
          index: 2,
        },
      ],
      icon: 'alarm-fill',
    },
    {
      title: 'تست 3',
      type: MenuType.LINK,
      icon: 'alarm-fill',
      index: 4,
      path: 'customer',
    },
  ];