Simpler Sidebar

A simple side nav in jQuery

bundled with Browserify

Press Menu Icon (the menu icon) or More Icon (the more icon) to trigger the sidebar - but also to navigate this demo.

Node Dependencies

$ npm i -D browserify browserify-shim

Install simpler-sidebar, jquery and jquery-ui-browserify.

$ npm i --save simpler-sidebar jquery jquery-ui-browserify

You can install or download all dependencies with the tool you like.

package.json

Load the packages you installed before. Here an example using npm.

{
  "browser": {
    "jquery": "./node_modules/jquery/jquery.js",
    "jquery-ui-browserify": "./node_modules/jquery-ui-browserify/dist/jquery-ui.js",
    "simpler-sidebar": "./node_modules/simpler-sidebar/dist/jquery.simpler-sidebar.js"
  },
  "browserify-shim": {
    "jquery": "window.$",
    "three": "global:THREE",
    "jquery-ui-browserify": {
      "depends": ["jquery:window.$"],
      "exports": "window.$.ui"
    },
    "simpler-sidebar": {
      "depends": ["jquery:window.$"],
      "exports": "window.$.simplerSidebar"
    }
  },
  "browserify": {
    "transform": [ "browserify-shim" ]
  }
}

input.js

// Jquery
window.$ = window.jQuery = require( "jquery" );

// Jquery-ui is currently unavailable with browserify
// You must use this module instead
window.$.ui = require( "jquery-ui-browserify" );

// Importing sidebarbones
window.$.sidebarBones = require( "simpler-sidebar" );

// Importing custom options
require( "./sidebar/main-sidebar-right.js" );

Browserify

$ browserify -d input.js > output.js

Include the bundled "output.js" file in your html file and you are ready to go