Doz-sidenav NPM

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