Ng-kzsidenav NPM

ng-kzsidenav

An Angular sidenav component

Installation

npm install --save ng-kzsidenav

Usage

Import KZSidenavModule into your App module:

...
import { KZSidenavModule } from 'ng-kzsidenav';

@NgModule({
    ...
    imports: [
      ...,
      KZSidenavModule
    ],
      ...
})
class AppModule {}

Add ng-kzsidenav.css into your angular.json

...
"styles": [
            "node_modules/ng-kzsidenav/ng-kzsidenav.css",
            ...
],
...

In your component's html, simply use <kzsidenav> wrapper and place your sidenav content within it. Your page content should be placed within a div having id kzmain. Inorder to use functions of sidenav like toggeling the open/close functionality add a reference to kzsidenav inside <kzsidenav>.

@Component({
  selector: 'app',
  template: `
        <style>
        /* CSS For Demo Purpose */
            .kzsidenav a {
                padding: 8px 8px 8px 32px;
                text-decoration: none;
                font-size: 25px;
                color: #818181;
                display: block;
                transition: 0.3s;
            }
            .kzsidenav a:hover {
                color: #f1f1f1;
            }
            .kzsidenav .closebtn {
                position: absolute;
                top: 0;
                right: 25px;
                font-size: 36px;
                margin-left: 50px;
            }
        </style>
        <kzsidenav #kzsidenav="kzsidenav">
        <!-- This code is for demo purpose. You can create your sidenav here after removing <a> tags -->
            <a href="javascript:void(0)" class="closebtn" (click)="kzsidenav.close()">&times;</a>
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Clients</a>
            <a href="#">Contact</a>
        </kzsidenav>
        <div id="kzmain">
        <!-- This code is for demo purpose. You can put your main content here after removing the content inside <div id="kzmain">  -->
            <span (click)="kzsidenav.open()">open</span>
            <div style="text-align:center;">
                <h1> Welcome to App!</h1>
                <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
            </div>
            <h2>Here are some links to help you start: </h2>
            <ul>
                <li>
                    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
                </li>
                <li>
                    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
                </li>
                <li>
                    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
                </li>
            </ul>
        </div>
  `
})

Functions

The kzsidenav has a few public functions:

Function	Description
`open()`	Opens the sidenav.
`close()`	Closes the sidenav.
`toggle()`	toggles the sidenav.
`currentState()`	Returns the current state of sidenav.

Options

Inputs

The kzsidenav has a few input properties:

Property name	Type	Default	Description
mode	`overlay`, `push`, `push-with-opacity`, `full`	`push`	See the "Modes" section.
position	`left`, `right`	`left`	What side the sidenav should be docked to.
state	`open`,`close`	`open`	At what state the sidenav should be initialized when the page loads.
openSize	number	`250px`	Specify open width of sidenav with valid css dimension.
closeSize	number	`0`	Specify close width of sidenav with valid css dimension.
hoverAnimation			Whether to animate the sidenav on mouse enter and mouse leave when sidenav is closed.