JSFiddle - React, Tailwind, and code Playground

Using clip-path to hide/show a utility panel.

by Travis Almand

HTML

<div id="panel">
  <p>Press CTRL + SHIFT + O to toggle panel.</p>
  
  <h2>Panel Stuff Here</h2>
  <p>Just put some typical panel stuff you might want here.</p>
</div>

SCSS

#panel {
    background-color: white;
    border: 3px solid rebeccapurple;
    box-sizing: border-box;
    background-color: #FFF;
    clip-path: circle(120% at 0% 25%);
    height: 100vh;
    width: 350px;
    overflow: auto;
    padding: 10px;
    position: fixed;
    z-index: 9999;
    top: 0;
    transition: 1s;
    left: 0;
    
    &.toggle-panel {
      background-color: rebeccapurple;
      clip-path: circle(0% at -50% 75%);
  }
}

JavaScript

document.addEventListener('keydown', function (e) {
  if (e.ctrlKey && e.shiftKey && e.key === 'O') {
    document.querySelector('#panel').classList.toggle('toggle-panel');
  }
});