Add a push bar to you website using Pushbar.js

To get started with Pushbar.js, you're given four options for adding a push bar to your website. Simply add the pushbar.css file to the head of your HTML and the pushbar.js file before the closing body tag, which will activate the new push bar. The push bar can be customized by adjusting its blur and overlay settings.
While it's still in development, Pushbar.js could use some improvements in its filter effects. For instance, the blur effect doesn't mesh well with non-text viewport content. The push bar animation also freezes if you try to use HTML2canvas to take screenshots and add them to the current viewport. On touch-enabled devices, it needs a "swipe" event to make the plugin mobile-friendly.
Another tester pointed out that there is some serious lag when they choose to display the entire content wrapper; showing an overlay of 80% opacity and blurred to 15px. The framerate drops if you attempt to use edited screenshots on a viewport. Someone noted that blur is disabled by default in the demo version.
Performance issues only occur if people use blur for filtering. The author claimed that it's supposed to resemble an app drawer, which is why he introduced a stackable popup plugin. Unfortunately, it is lacking in accessibility since people couldn't tab into the menu or focus on the drawer instead of the background. In addition, the page is still scrollable when you open the drawer so those are things to fix for later versions.
Injecting the CSS with the JS might be a good idea if the developer wants to save space on adding repetitive code. Of course, Pushbar.js doesn't function the same as Slideout.js due to the absence of an open/close response to touchscreens. This project can be viewed on GitHub. You can preview the push bars to see how they are positioned on a web page. For more information click here https://oncebot.github.io/pushbar.js/.