Shapla Side Navigation

A simple side overlay navigation. Normally to use to develop admin panel.

Table of contents

• Installation
• Usage

Installation

npm i shapla-side-navigation

Usage

Add the component:

 import sideNavigation from 'shapla-side-navigation';

export default {
  name: 'Hello',

  components: {
    sideNavigation
  }
}

 <side-navigation :active="true" nav-width="300px" position="left" :show-overlay="true">
    Nav content goes here
</side-navigation>

Props

Property	Type	Required	Default	Description
active	Boolean	no	true	If set true, side navigation will be opened.
showOverlay	Boolean	no	true	If set true, overlay background will be shown
navWidth	String	no	300px	Sidenav width in pixels.
position	String	no	left	Value can be left or right.

Listeners

The side navigation component fires the following events:

close: When outside area is clicked, it fires the event.

 <!-- template -->
<side-navigation @close="handleClose"></side-navigation>


<!-- method -->
methods: {
  handleClose(){
    // Handle close event
  }
}