@nlo/styleguide-menu

Styleguide menu

A vue component for a fullscreen styleguide menu overlay with searchable items

Installation

You can install the package through NPM.

npm install @nlo/styleguide-menu

Usage

To use the vue component and render the menu overlay you must first register the library and its components in your javascript boot script.

The necessary configuration should at least contain these lines:

// my-project/styleguide.js

import Vue from 'vue';
import StyleguideMenu from '@nlo/styleguide-menu';

@import "~@nlo/styleguide-menu/dist/styleguide";

function init() {
  StyleguideMenu.init();

  new Vue({
    el: '#styleguide'
  });
}

init();

Then include the vue file in your template and pass the menu items as props to render the styleguide menu overlay in your view.

<template>
    <menu-overlay title="My project" :menu-structure="menuStructure" />
</template>

<script>
  const menuStructure = [
    {
      Description: 'Atoms/Buttons',
      Title: 'Buttons',
      Url: '/styleguide/buttons'
    }
  ];

  export default {
    data() {
      menuStructure
    }
  }
</script>

Customization

There is a small theming system in place that allows you to override a set of variables, very similar to how bootstrap theming works. To make this work you can import a custom sass file in your boot script that could look like:

// my-project/styleguide.scss

// Import the source variables.scss file from the package
@import "~@nlo/styleguide-menu/dist/scss/variables";

$my-color-variable: yellow;

// Override imported variables from the styleguide-menu package with your own variables or values
$nlo-sg-primary-color: $my-color-variable;
$nlo-sg-floating-button-color: white;

// Finally import the styleguide.scss, make sure this is after your overrides
@import "~@nlo/styleguide-menu/dist/styleguide";