SidebarJS
Create mobile sidebar/sidenav experiance in pure javascript.
npm install sidebarjs --save
Demo
Open the demo on your device and try the touch gestures!
Libraries
Import
Typescript / ES6
import {SidebarElement, SidebarService} from 'sidebarjs';
import 'sidebarjs/lib/sidebarjs.css';Classic
<script src="your/path/sidebarjs.js"></script>
<link rel="stylesheet" href="your/path/sidebarjs.css">Options
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
const sidebarjs = new SidebarJS.SidebarElement();
sidebarjs.open();.close(): void
Close sidebar
const sidebarjs = new SidebarJS.SidebarElement();
sidebarjs.open();
setTimeout(() => {
sidebarjs.close();
}, 3000);.toggle(): void
Toggle sidebar
const sidebarjs = new SidebarJS.SidebarElement();
sidebarjs.toggle();.isVisible(): boolean
Check if sidebar is visible
const sidebarjs = new SidebarJS.SidebarElement();
sidebarjs.isVisible(); // false
sidebarjs.open();
sidebarjs.isVisible(); // true.destroy(): void
Destroy sidebar and all listeners
const sidebarjs = new SidebarJS.SidebarElement();
sidebarjs.destroy();.setPosition(position: 'left'|'right'): void
Set sidebar position
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
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 listenersSingle Sidebar
<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
<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
<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
<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
<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>