doz-sidenav

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