Angular SidebarJS (AngularJS v1.x)

Create mobile sidebar/sidenav experiance in AngularJS.

Are you looking for a version with Angular? Try ng-sidebarjs

npm install angular-sidebarjs --save

Demo

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

RawGit

Installation

Classic

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

Require

require('angular-sidebarjs');

ES6

import ngSidebarJS from 'angular-sidebarjs';

Options

<sidebarjs
  // Optional | Required only for multiple sidebarjs
  sidebarjs-name="mainSidebarJS"
  
  // Optional
  sidebarjs-config="{
      // 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,
  }"
  
  // Optional | Function called after sidebar is open
  on-close="$ctrl.onSidebarClose()"
  
  // Optional | Function called after sidebar is close
  on-open="$ctrl.onSidebarOpen()"
  
  // Optional | Function called when sidebar change visibility
  on-change-visibility="$ctrl.onSidebarChangeVisibility($event)">
</sidebarjs>

Implementation

Download files

Download and save all files

$ npm install angular-sidebarjs --save

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

<head>

  <link rel="stylesheet" href="your/path/angular-sidebarjs.min.css">

</head>
<body>

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

</body>

Inject ngSidebarJS

angular
  .module('DemoApp', [
    'ngSidebarJS'
  ])

Create SidebarJS element

Write sidebarjs tag and a trigger button with just [sidebarjs-toggle] attribute.

<body ng-app="DemoApp">

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

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

</body>

DocN/angular-sidebarjs