@silasmanns/sm-side-menu NPM

SmSideMenu

This library was generated with 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

<sm-side-menu [config]="config">
    <router-outlet></router-outlet>
</sm-side-menu>

Ts

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.

angular menu side menu silas manns

tslib

@infinitebrahmanuniverse/nolb-_sil @everything-registry/sub-chunk-835

1.0.0

3 years ago