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. |

Modes

overlay

The side navigation slides in over the page content.

push

This is the default mode. The page content is pushed to make space for the side navigation.

push-with-opacity

The page content is pushed to make space for the side navigation with black background and opacity to highlight side navigation.

full

The side navigation slides and covers the whole page (100% width):