Simple Sidebar

index.html

<div id="sidebar1" class="sidebar" aria-label="Main sidebar containing navigation links and some information" aria-hidden="true">
  <div class="sidebar__content">
    <span>whatever you want</span>
  </div>
</div>

<button data-toggle-sidebar="sidebar1">Toggle Sidebar</button>

script.js

document.querySelectorAll('[data-toggle-sidebar]').forEach(toggle => {
   toggle.addEventListener('click', e => {
     const sidebarID = toggle.dataset.toggleSidebar;
     const sidebarElement = sidebarID ? document.getElementById(sidebarID) : undefined;
     if (sidebarElement) {
        let sidebarState = sidebarElement.getAttribute('aria-hidden');
        sidebarElement.setAttribute('aria-hidden', sidebarState == 'true' ? false : true); 
     }
   });
});

simple-sidebar.markdown

Simple Sidebar

A Pen by Serdar Balcı on CodePen.

License.

style.css

body {
  min-height: 100vh;
  padding: 10px;
}
/* SIDEBAR POSITION */
.sidebar {
  background-color: #f1f1f1;
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  min-width: 300px;
}
.sidebar__content {
  padding: 8px;
}
/* SIDEBAR HIDDEN STATE */
.sidebar[aria-hidden="true"] {
  transition: 200ms;
  transform: translateX(100%);
}
/* SIDEBAR VISIBLE STATE */
.sidebar:not([aria-hidden]),
.sidebar[aria-hidden="false"] {
  transition: 200ms;
  transform: translateX(0);
}