[![GitHub release](https://img.shields.io/github/release/SidebarJS/sidebarjs.svg)](https://github.com/SidebarJS/sidebarjs/releases) [![npm](https://img.shields.io/npm/v/sidebarjs.svg)](https://www.npmjs.com/package/sidebarjs) [![npm](https://img.shields.io/npm/dt/sidebarjs.svg)](https://www.npmjs.com/package/sidebarjs) # SidebarJS Create mobile sidebar/sidenav experiance in pure javascript. ```ssh npm install sidebarjs --save ``` ## Demo *Open the demo on your device and try the touch gestures!* * [StackBlitz](https://stackblitz.com/edit/sidebarjs) * [RawGit](https://rawgit.com/SidebarJS/sidebarjs/master/demo/index.html) ## Libraries * [Angular | ng-sidebarjs](https://github.com/SidebarJS/ng-sidebarjs) * [AngularJS | angular-sidebarjs](https://github.com/SidebarJS/angular-sidebarjs) ## Import Typescript / ES6 ```js import {SidebarElement, SidebarService} from 'sidebarjs'; import 'sidebarjs/lib/sidebarjs.css'; ``` Classic ```html ``` ## Options ```typescript const sidebarjs = new SidebarJS.SidebarElement({ // Sidebar DOM element component?: sidebarjs, // Minimum swipe in px required to trigger listener: open documentMinSwipeX?: 10, // Range in px where document is listening for gesture: open documentSwipeRange?: 40, // Open and close sidebar with swipe gestures nativeSwipe?: true, // Enable/Disable open on swipe nativeSwipeOpen?: true, // Sidebar position, accepted values: left|right position?: 'left', // Backdrop opacity on sidebar open backdropOpacity?: 0.3, // Show sidebar on screen > 1024px responsive?: false, // Page content if sidebar has option responsive mainContent?: // Function called after sidebar is open onOpen?: () => void, // Function called after sidebar is close onClose?: () => void, // Function called when sidebar change visibility onChangeVisibility?: (changes: { isVisible: boolean }) => void, }) ``` ## Instance methods ### .open(): void > Open sidebar ```typescript const sidebarjs = new SidebarJS.SidebarElement(); sidebarjs.open(); ``` ### .close(): void > Close sidebar ```typescript const sidebarjs = new SidebarJS.SidebarElement(); sidebarjs.open(); setTimeout(() => { sidebarjs.close(); }, 3000); ``` ### .toggle(): void > Toggle sidebar ```typescript const sidebarjs = new SidebarJS.SidebarElement(); sidebarjs.toggle(); ``` ### .isVisible(): boolean > Check if sidebar is visible ```typescript const sidebarjs = new SidebarJS.SidebarElement(); sidebarjs.isVisible(); // false sidebarjs.open(); sidebarjs.isVisible(); // true ``` ### .destroy(): void > Destroy sidebar and all listeners ```typescript const sidebarjs = new SidebarJS.SidebarElement(); sidebarjs.destroy(); ``` ### .setPosition(position: 'left'|'right'): void > Set sidebar position ```typescript const sidebarjs = new SidebarJS.SidebarElement(); sidebarjs.setPosition('right'); // sidebar move to the right side ``` ### .setSwipeGestures(value: boolean): void > Check nativeSwipe and nativeSwipeOpen props and enable/disable gestures only if prop is true ```typescript const sidebarjs = new SidebarJS.SidebarElement({ nativeSwipe: true, nativeSwipeOpen: false, }); sidebarjs.setSwipeGestures(false); // disable only nativeSwipe listeners sidebarjs.nativeSwipeOpen = true; sidebarjs.setSwipeGestures(true); // enable nativeSwipe and nativeSwipeOpen listeners ``` ## Single Sidebar ```html

Open/Close

``` ## Multiple Sidebars ```html

Open/Close Left Sidebar

Open/Close Right Sidebar

``` ## Responsive Sidebar ```html

your content

Open/Close

``` ## Trigger onOpen/onClose/onChangeVisibility ```html

Open/Close

``` ## Destroy Sidebar ```html

Open/Close

```

	Stars	Issues	Version	Updated	Created
react-sidemenu	57	19	1.1.0	6 years ago	9 years ago
react-sidenav	338	55	4.0.6	5 years ago	10 years ago
sidebar-v2	848	44	0.4.0	7 years ago	8 years ago
sidebarjs	64	10	10.0.0	2 years ago	8 years ago

react-sidemenu vs react-sidenav vs sidebar-v2 vs sidebarjs

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past