@slickteam/slick-side-menu NPM

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