@eardi/vanilla-js-sidebar NPM

vanilla-js-sidebar

A simple sidebar component

Install

vanilla-js-sidebar requires Node.js version 12

# npm
npm install --save @eardi/vanilla-js-sidebar

# yarn
yarn add @eardi/vanilla-js-sidebar

Usage

Default usage

import Sidebar from '@eardi/vanilla-js-sidebar';

const buttonSelector = 'someselector'; // Change this to your button el

// Content of sidebar can be HTML string
const sidebarContent = `<div class="sidebar-content">
    <h1>Hello! I am a sidebar</h1>
    <p>The content of the sidebar goes here. You can also set the direction to show from TOP, BOTTOM, LEFT, or RIGHT.</p>
</div>`;

// OR let's say you want to pass a reference to a DOM element
const sidebarContentElement = document.createElement('div');
sidebarContent.innerHTML = sidebarContent;

const sidebar = new Sidebar({
  direction: Sidebar.direction.LEFT,
  panelStyles: {
    maxWidth: 'min(90%, 400px)'
  }
});

sidebar.renderContent(sidebarContent || sidebarContentElement);
buttonSelector.onclick = () => sidebar.show();