Fancy Off-canvas Sidebar Component In Pure JavaScript – ApocSidebar

ApocSidebar is a ES 5/6 JavaScript sidebar component that allows to reveal off-screen sidebars with some cool animations based on CSS3. Ideal for mobile-friendly off-canvas navigation.

Installation:

# Yarn
yarn add apoc-sidebar
# NPM
$ npm install apoc-sidebar

How to use it:

Import the ApocSidebar from ”apoc-sidebar”.

import ApocSidebar from 'apoc-sidebar';

Or directly include the JavaScript file “apoc-sidebar.js” from “dist” folder as this:

<script src="apoc-sidebar.js"></script>

Create a sidebar panel which is hidden on page load.

<div class="sidebar" id="demo">
  I am a sidebar panel
</div>

Add the “data-apoc-sidebar-sibling” attribute to the main container.

<div data-apoc-sidebar-sibling class="container">
  ...
</div>

You might need a trigger element to toggle the sidebar panel.

<button id="trigger">Click Me</button>

Create a new ApocSidebar object.

const sidebar = new ApocSidebar(
  document.getElementById('sidebar'),
  {
    // options here
  }
);

Initialize the ApocSidebar.

sidebar.init();

Active the trigger element.

document.getElementById('trigger').addEventListener('click', () => {
  if (sidebar.isOpen()) {
    sidebar.close();
  } else {
    sidebar.open();
  }
});

All possible options with default values.

const sidebar = new ApocSidebar(
  document.getElementById('sidebar'),
  {
    // type: 'water',
    // type: 'push',
    // type: 'lid',
    // type: 'door',
    // type: 'waterfall',
    // type: 'waterfallReverse',
    type: 'slide',
    // side: 'right'
    side: 'left',
  
    transitionTimingFunction: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',
    transitionDuration: '.2s',
    wallBackgroundColor: 'rgba(0,0,0,.3)'
  }
);

Changelog:

v0.1.0 (09/23/2018)

• Bugfix