node package manager
Orgs are free. Discover, share, and reuse code in your team. Create a free org »

angular-sidebarjs

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!

Installation

Classic

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

Require

require('angular-sidebarjs');

ES6

import ngSidebarJS from 'angular-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>