css transform sidebar

by Soviut

HTML

<main class="page">
  <aside class="sidebar">This is the sidebar</aside>
  <section class="content">
    <h2>Click Anywhere to Toggle the Sidebar</h2>
    <p>This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content</p>
    <p>This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content</p>
    <p>This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content</p>
    <p>This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content</p>
    <p>This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content</p>
    <p>This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content This is the content</p>
  </section>
</main>

CSS

body {
  margin: 0;
  
  font-family: arial, helvetica, san-serif;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  transition: transform 300ms ease-in-out;
  transform: translateX(-100%);

  background: cornflowerblue;
}

.sidebar--visible {
  transform: translateX(0%);
}

.content {
  padding: 1em;
}

JavaScript

document.addEventListener('click', function() {
	document.querySelector('.sidebar').classList.toggle('sidebar--visible');
});