@slickteam/slick-side-menu

slick-side-menu

Description

A navigation drawer that has a boolean property that states if it's open or closed. When open, an overlay displays and a click on it hides the menu.

Installation

npm i @slickteam/slick-side-menu

Usage

• Html vanilla

<script type="module">
  import '@slickteam/slick-side-menu';
</script>

<slick-side-menu></slick-side-menu>

• Vue.js

<template>
    <slick-side-menu
        :avatar="image"
    ></slick-side-menu>
</template>

<script>
import '@slickteam/slick-side-menu';
import image from './path/to/image/file'

export default {
  name: 'TestPage', 
  data() {
      return {
          image: image,
      }
  },
}
</script>

<style scoped>
/* Put CSS */
</style>

Template

    <slick-side-menu
      open
      title="Menu title"
      user
      username="Michel Laboule"
      avatar="importImageHere"
      items="[]"
      color="#FFF"
      background="#f97316"
    ></slick-side-menu>

Properties

Name	Type	Description
open	Boolean	Shows the menu when true
title	String	Define text content of the menu title
user	Boolean	Shows the user section when true
username	String	Define user section name
avatar	File	The user section avatar's image
items	Array	An array of items that defines the menu. Structure must be => [ title = 'My title', to = '/MyHrefLink', icon = 'should be filled with the "d" property of a path tag from a svg tag']
color	String	Hex color
background	String	Hex color

Events

Name	Description
slick-logout	The event emitted when the logout button is clicked in the user section.
slick-overlay	The event emitted when the overlay is clicked.

Development

Demoing with Storybook

To run a local instance of Storybook for your component, run

npm run storybook

To build a production version of Storybook, run

npm run storybook:build