JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<div class="main">
<div class="header">
<button onclick="togglePanel()" class="some-button">
+
</button>
</div>
<p>
Content goes here
</p>
</div>
<div class="side-panel collapsed">
<div class="side-panel-liner">

<h2>
Activity Feed
</h2>
</div>
</div>

CSS

* {
  font-family: Verdana, Arial, Sans-serif;
}

.side-panel {
  position: fixed;
  display: block;
  border-radius: .5rem 0 0 .5rem;
  border: solid 1px #ababab;
  right: 0;
  top: 0;
  margin: .5rem 0 .5rem 0;
  background-color: rgba(230, 230, 230, .8);
  box-shadow: -1px 1px 5px rgba(0, 0, 0, .2);
  transition: all .8s 0s cubic-bezier(0.450, 0.160, 0.250, 0.940);
}

.side-panel-liner {
  padding-right: .4rem;
  padding-left: .4rem;
  border-radius: .5rem 0 .5rem 0;
  box-shadow: -4px 7px 7px inset rgba(255, 255, 255, .5);
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
}

.collapsed {
  transform: translateX(100%);
  transition: all .8s 0s cubic-bezier(0.450, 0.160, 0.250, 0.940);
}

.expanded {
  transform: translateX(0%);
  transition: all .8s 0s cubic-bezier(0.450, 0.160, 0.250, 0.940);
}

JavaScript

function togglePanel() {
  let panel = document.getElementsByClassName('side-panel')[0];
  console.log(panel);
  panel.classList.toggle('expanded');
  panel.classList.toggle('collapsed');

}