A simple sidebar component
vanilla-js-sidebar requires Node.js version 12
# npm
npm install --save @eardi/vanilla-js-sidebar
# yarn
yarn add @eardi/vanilla-js-sidebarimport Sidebar from '@eardi/vanilla-js-sidebar';
const buttonSelector = 'someselector'; // Change this to your button el
// Content of sidebar can be HTML string
const sidebarContent = `<div class="sidebar-content">
<h1>Hello! I am a sidebar</h1>
<p>The content of the sidebar goes here. You can also set the direction to show from TOP, BOTTOM, LEFT, or RIGHT.</p>
</div>`;
// OR let's say you want to pass a reference to a DOM element
const sidebarContentElement = document.createElement('div');
sidebarContent.innerHTML = sidebarContent;
const sidebar = new Sidebar({
direction: Sidebar.direction.LEFT,
panelStyles: {
maxWidth: 'min(90%, 400px)'
}
});
sidebar.renderContent(sidebarContent || sidebarContentElement);
buttonSelector.onclick = () => sidebar.show();This is a Codesandbox example which shows the usage in React:
Add this right before the closing of <body>:
<script src="https://unpkg.com/@eardi/[email protected]/src/sidebar.js" crossorigin></script>
$ yarn install
$ yarn serve-exampleMIT © ardeshireshghi