node package manager

sidebarjs

GitHub release npm npm

SidebarJS

Create mobile sidebar/sidenav experiance in pure javascript.

npm install sidebarjs --save

Demo

Open the demo on your device and try the touch gestures!

Libraries

Import

Typescript

import {SidebarElement, SidebarService} from 'sidebarjs';

ES6

import {SidebarElement, SidebarService} from 'sidebarjs';

Require

const {SidebarElement, SidebarService} = require('sidebarjs');

Classic

<script src="your/path/sidebarjs.js"></script>

Options

const sidebarjs = new SidebarElement({
    component?: HTMLElement['sidebarjs'], // Sidebar DOM element
    documentMinSwipeX?: 10, // Minimum swipe in px required to trigger listener: open
    documentSwipeRange?: 40, // Range in px where document is listening for gesture: open
    nativeSwipe?: true, // Open and close sidebar with swipe gestures
    nativeSwipeOpen?: true, // Enable/Disable open on swipe
    position?: 'left', // Sidebar position, accepted values: left|right
})

Single Sidebar

<head>
 
  <link rel="stylesheet" href="sidebarjs.min.css">
 
</head>
<body>
 
  <div sidebarjs-toggle>Open/Close</div>
 
  <div sidebarjs>
    <nav>
      <a href="link">Home</a>
      <a href="link">About</a>
      <a href="link">Contacts</a>
    </nav>
  </div>
 
  <script src="sidebarjs.min.js"></script> 
  <script>
  // Init SidebarJS
  var sidebarjs = new SidebarJS.SidebarElement();
  </script> 
 
</body>

Multiple Sidebars

<head>
 
  <link rel="stylesheet" href="sidebarjs.min.css">
 
</head>
<body>
 
  <div sidebarjs-toggle="leftSidebarName">Open/Close Left Sidebar</div>
  <div sidebarjs-toggle="rightSidebarName">Open/Close Right Sidebar</div>
 
  <div sidebarjs="leftSidebarName">
    <nav>
      <a href="link">My</a>
      <a href="link">Left</a>
      <a href="link">Content</a>
    </nav>
  </div>
 
  <div sidebarjs="rightSidebarName">
    <nav>
      <a href="link">My</a>
      <a href="link">Right</a>
      <a href="link">Content</a>
    </nav>
  </div>
 
  <script src="sidebarjs.min.js"></script> 
  <script>
  var leftSidebarjs = new SidebarJS.SidebarElement({
    component: document.querySelector('[sidebarjs="leftSidebarName"]'),
  });
  
  var rightSidebarjs = new SidebarJS.SidebarElement({
    component: document.querySelector('[sidebarjs="rightSidebarName"]'),
    position: 'right',
  });
  </script> 
 
</body>

Implementation step by step

Download files

Download and save all files

$ npm install sidebarjs --save

Insert sidebarjs.min.css and sidebarjs.min.js in your index.html.

<head>
 
  <link rel="stylesheet" href="your/path/sidebarjs.min.css">
 
</head>
<body>
 
  <script src="your/path/sidebarjs.min.js"></script> 
 
</body>

Create SidebarJS element

Write [sidebarjs] attribute inside a tag (div, aside, or whatever you want).

<div sidebarjs>
  <div>Title</div>
  <nav>
    <a href="link">Home</a>
    <a href="link">About</a>
    <a href="link">Contacts</a>
  </nav>
</div>

Trigger button

Do you need a trigger button for open/close SidebarJS? Just put [sidebarjs-toggle] attribute inside a tag and it's done!

<div sidebarjs-toggle>Open/Close</div>

Init

When you have files, [sidebarjs] and [sidebarjs-toggle] you can init your SidebarJS Module like:

const sidebarjs = new SidebarJS.SidebarElement()

Full file example

<head>
 
  <link rel="stylesheet" href="your/path/sidebarjs.min.css">
 
</head>
<body>
 
  <div sidebarjs-toggle>Open/Close</div>
 
  <div sidebarjs>
    <div>Title</div>
    <nav>
      <a href="link">Home</a>
      <a href="link">About</a>
      <a href="link">Contacts</a>
    </nav>
  </div>
 
  <script src="your/path/sidebarjs.min.js"></script> 
  <script>
    // Init SidebarJS
    const sidebarjs = new SidebarJS.SidebarElement();
  </script> 
 
</body>