mkg-sidebar

mkg-sidebar is stylable navigation bar/pane/drawer with nested menu support for mobile and web UI. You can easily set up navigation items or custom html content. then u just need trigger to open.

Install

From Node

npm install mkg-sidebar --save

import mSidebar from "mkg-sidebar";
import "mkg-sidebar/dist/mkg-sidebar.css";// if you use webpack with style loader

From Browser

you can get the latest release of mkg-sidebar from repo

import script and css files

<script src="mkg-sidebar.min.js"></script>
<link rel="stylesheet" type="text/css" href="mkg-sidebar.min.css">

Usage

var items = [
    {
        text:'Main Page',
        link:'Link1'
    },
    {
        text:'Another Page',
        link:'AnotherLink'
    }
];

var menu = mSidebar({baseURL: 'http://site.com/'});
menu.addItem(items);
menu.open();

Options with Default Values

baseURL:'' // base url to every relative menu links
position:'left' // left, top, bottom, right
closeButton:true //
closeOnBackgroundClick:true //
animationType:'slide' // TODO:push, spread
defaultTitle:'' //default title attr value
defaultFollow:true, // default follow attr value
autoCollapse:false// auto collapse on close
onOpen:null // handler
onClose:null // handler

Methods

var menu =  mSidebar(options);
menu.addItem({
    text:'Test',
    link:'/PageLink.html',
    callback:function(){console.log(this);}
}); //add menu item

menu.collapse(); //collapse all submenus
menu.unCollapse(); //uncollapse all submenus
menu.open(); //open menu
menu.close(); //close menu
menu.toggle(); //toggle menu
menu.removeItems(); //clears all items
menu.setContentFrom('#divWithContent'); //sets the menu content from targeted element
menu.setHeaderFrom('#divWithContent'); //sets the menu header content from targeted element
menu.setFooterFrom('#divWithContent'); //sets the menu footer content from targeted element
menu.setContent('<div>test</div>'); //sets the menu content from targeted element
menu.setHeader('<div>test</div>'); //sets the menu header content from targeted element
menu.setFooter('<div>test</div>'); //sets the menu footer content from targeted element
menu.refreshItems();

Visualize

Scss styling

.mSidebar{
  & &-item{} //all menu items
  & &-collapse{ //whole collapsable item container
    //a collapsable item has 3 parts:
    & &-header{} //header area is the part of without button and sub items
    & &-items{} //items area is the sub-items container of collapsable item
    & &-button{} // button area of the collapsable item
  }
  & &--d0{} //you can compine any class with mSidebar--d{level} class
  & &--d1{}
  & &--d2{}
}

css styling

.mSidebar .mSidebar-item{}
.mSidebar .mSidebar-collapse {}
    .mSidebar .mSidebar-collapse-header {}
    .mSidebar .mSidebar-collapse-items {}
    .mSidebar .mSidebar-collapse-button {}

.mSidebar-collapse-button.mSidebar--d0 {} //you can combine any class with mSidebar--d{level} class
.mSidebar-collapse-button.mSidebar--d1 {}
.mSidebar-collapse-button.mSidebar--d2 {}

Building

ensure that you have all dependency packes with 'npm install' and install gulp to gloval with npm install gulp -g package using gulp for building. following tasks are avaliable:

• gulp default : watches src files and serves index.html for developing
• gulp minify : creates minified version of package. don't forget to use it after development ends.

TO DO

• add React component
• add alternative animation styles
• optional animation libraries //'It based on native js and css. Animation libraries TweenMax, jQuery animate are also optional.'
• add alternative visual style
• documantation