open-index/open-npm huggingface dataset:
npm package: @silasmanns/sm-side-menu
Description: A side-menu for Angular routing.
Author: Silas Manns
Latest version: 1.0.0

# SmSideMenu

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.0.

## Installation
```
npm install --save @silasmanns/sm-side-menu
```

## Usage

#### HTML
Please insert the HTML-Tag in the app.component.html
```HTML
<sm-side-menu [config]="config">
    <router-outlet></router-outlet>
</sm-side-menu>
```

#### Ts
```typescript
import { SmMenuConfiguration } from @silasmanns/sm-side-menu

...

constructor(private router: Router){}

...

public config: SmMenuConfiguration = {
    logoPath: "assets/logo.svg",
    hexBackgroundColor: "#081222",
    invertIcons: true,
    sizeToggleHandler: (t: boolean)=>console.log(t),
    menuItems: [
      {
        name: "Home",
        iconPath: "assets/home.svg",
        handler: () => this.router.navigateByUrl("page1")
      },
      {
        name: "Portfolio",
        iconPath: "assets/golf.svg",
        handler: () => this.router.navigateByUrl("page2")
      },
    ]
};
```

## Config Schemes
### SmMenuConfiguration 

| Property | Type  | Description |
|----------|:-------------:|-----------:|
| `logoPath` | **String** (null) | *Path to your logo. The logo will displayed on the top of the Menu.* |
| `hexBackgroundColor` | **String** (#081222) | *The main color of the Menu.* |
| `invertIcons` | **Boolean** (false) | *Invert all images of the menu-items. For example black will be white.* |
| `sizeToggleHandler` | **Method** (event: boolean) => void | *This Method will called when the size toogle was clicked. The event: true = menu is closed; false = menu is open.* |
| `menuItems` | **SmMenuItem** ([]) | *The items for the Menu.* |

### SmMenuItem

| Property | Type | Description |
|----------|:----:|------------:|
| `name`  | **String** | *Name of the Item.* |
| `iconPath` | **String** | *Path to the Image.* |
| `handler` | **Method** () => void | *Method will called when the Item was clicked.*