# sidebarjs

> Create mobile sidebar/sidenav experience in pure javascript

Latest version **10.0.0** (published 2022-12-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install sidebarjs
pnpm add sidebarjs
yarn add sidebarjs
bun add sidebarjs
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 10.0.0 |
| Published | 2022-12-29 |
| First published | 2016-05-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12.7.0 |
| Dependencies | 0 |
| Unpacked size | 253.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 70 |
| Author | Lorenzo D'Ianni |
| Maintainers | lorenzodianni |
| Keywords | sidebar, sidenav, javascript, sidebarjs |

## Links

- npm: https://www.npmjs.com/package/sidebarjs
- Repository: https://github.com/SidebarJS/sidebarjs
- Homepage: https://github.com/SidebarJS/sidebarjs#readme
- Issues: https://github.com/SidebarJS/sidebarjs/issues
- npm.io page: https://npm.io/package/sidebarjs

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 10.0.0 (latest) — 2022-12-29
- 9.0.0 — 2021-07-20
- 8.0.0 — 2021-05-14
- 7.0.0 — 2020-12-07
- 6.1.0 — 2019-08-03
- 6.0.0 — 2019-03-30
- 5.4.0 — 2018-12-01
- 5.3.0 — 2018-09-03
- 5.2.1 — 2018-05-31
- 5.2.0 — 2018-04-14
- 5.1.0 — 2018-03-07
- 5.0.0 — 2018-02-11
- 4.1.0 — 2018-02-05
- 4.0.0 — 2018-01-13
- 3.2.0 — 2017-11-16
- … 21 more at https://npm.io/package/sidebarjs/versions

## README

[![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
<script src="your/path/sidebarjs.js"></script>
<link rel="stylesheet" href="your/path/sidebarjs.css">
```

## Options
```typescript
const sidebarjs = new SidebarJS.SidebarElement({
    // Sidebar DOM element
    component?: <HTMLElement>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?: <HTMLElement>
    
    // 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
<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
```html
<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>
```

## Responsive Sidebar
```html
<head>

  <link rel="stylesheet" href="sidebarjs.min.css">

</head>
<body>

  <div sidebarjs>
    <nav>
      <a href="link">Home</a>
      <a href="link">About</a>
      <a href="link">Contacts</a>
    </nav>
  </div>
  
  <div sidebarjs-content>
    your content
    <div sidebarjs-toggle>Open/Close</div>
  </div>

  <script src="sidebarjs.min.js"></script>
  <script>
  // Init SidebarJS
  var sidebarjs = new SidebarJS.SidebarElement({responsive: true});
  </script>

</body>
```

## Trigger onOpen/onClose/onChangeVisibility
```html
<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({
    onOpen: function() {
      console.log('sidebarjs is open');
    },
    onClose: function() {
      console.log('sidebarjs is close');
    },
    onChangeVisibility: function(changes) {
      console.log('sidebarjs is visible?', changes.isVisible);
    }
  });
  </script>

</body>
```

## Destroy Sidebar
```html
<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();
  
  // After 4 seconds
  setTimeout(function() {
    
    // Destroy sidebarjs
    sidebarjs.destroy();
    
  }, 4000);
  </script>

</body>
```

---
_Source: https://npm.io/package/sidebarjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._