# ngx-accordion-menu

[DEMO](https://stackblitz.com/edit/github-gqtgln)

## How to Use it:

![Alt text](https://up.yekpars.com/uploads/168292971344340.png "a title")
![Alt text](https://up.yekpars.com/uploads/168293012334660.png "a title")

> 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',
    },
  ];
```