Panel

.fizz-panel is a section of content that can be triggered to slide in and out of a parent container. The parent container should have the class .fizz-has-panel and .fizz-panel-is-open, which can be toggled with a click handler to show/hide the panel. The panel will be as tall as the parent container. The panel itself should include a button to toggle the state of the panel.

The default width of the panel is 350px, but can be overridden with a custom property on the .fizz-panel element.

Custom Property	Default Value	Description
`--panel-width`	350px	The width of the panel

Here's the Panel!

HTML

<button class="fizz-button-secondary" onclick="togglePanel()">Toggle Panel</button>

<div class="fizz-has-panel fizz-panel-is-open" style="height: 300px; border: 1px solid #EAEAEA;">
  <div class="fizz-panel" style="--panel-width: 250px;">
    <div class="fizz-flex-row fizz-inset-square-16 fizz-surface-gray fizz-border-bottom">
      <h3 class="fizz-heading-4 fizz-flex-item">Here's the Panel!</h3>
      <button class="fizz-icon-button-small" onclick="togglePanel()">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fizz-icon-24"><path d="M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4l5.6 5.6L5 17.6 6.4 19l5.6-5.6 5.6 5.6 1.4-1.4-5.6-5.6L19 6.4z"/></svg>
      </button>
    </div>
  </div>
</div>

<script>
  function togglePanel() {
    let panelContainer = document.querySelector(".fizz-has-panel");
    panelContainer.classList.toggle("fizz-panel-is-open");
  }
</script>