doz-sidenav

A simple side navigation menu for doz.

This component is a porting from Side Navigation Menu example of W3Schools. https://www.w3schools.com/howto/howto_js_sidenav.asp

Install

npm install doz-sidenav

Live here

Usage

Globally

import Doz from 'doz'
new Doz({
        root: '#app',

        template(h) {
            return h`
                <doz-sidenav d:id="sidenav">
                    <a href="#">About</a>
                    <a href="#">Services</a>
                    <a href="#">Clients</a>
                    <a href="#">Contact</a>
                </doz-sidenav>
                <h2>Animated Sidenav Example</h2>
                <p>Click on the element below to open the side navigation menu.</p>
                <div style="font-size:30px;cursor:pointer;" onclick="this.getComponentById('sidenav').openNav()"><i class="fas fa-bars"></i> Open</div>

            `
        }
    });

Props

| Name | Default | Description | | ---- | ------- | ----------- | |background|#111|CSS background color| |backdropBackground|rgba(0,0,0,0.6)|CSS background color of the backdrop| |colorlink|#818181|CSS text color for a item| |colorlinkhover|#f1f1f1|CSS text color for a:hover item| |sideposition|left|left or right| |zindex|1000|CSS z-index|

Method

| Name | Args | Description | | ---- | ------- | ----------- | |open()| |The method to open the sidemenu| |close()| |The method to close the sidemenu| |isOpen()| |The method returns true or false|

Changelog

You can view the changelog here

License

doz-sidenav is open-sourced software licensed under the MIT license

Author

Pietro Lembo