Side Drawer with Edge Button

by momenelkamri

HTML

<dialog id="drawer" class="side-drawer">
    <div>
      <button class="close-btn" onclick="closeDrawer()">⨯</button>
      <h2>Side Drawer</h2>
      <p>This is a native dialog used as a side drawer.</p>
      <p>This is a native dialog used as a side drawer.</p>
      <p>This is a native dialog used as a side drawer.</p>
      <p>This is a native dialog used as a side drawer.</p>
      <p>This is a native dialog used as a side drawer.</p>
    </div>
    <button id="toggleBtn" class="fold-toggle" onclick="toggleDrawer()">← Fold</button>
  </dialog>

  <p>Test test</p>

  <p>Test test</p>

  <p>Test test</p>

  <p>Test test</p>

  <p>Test test</p>

  <p>Test test</p>

  <p>Test test</p>

  <p>Test test</p>

  <p>Test test</p>

CSS

body {
      margin: 0;
      font-family: sans-serif;
    }

    dialog.side-drawer {
      position: fixed;
      top: 0;
      left: 0; /* Set to left; change to right if needed */
      height: 100vh;
      width: 300px;
      margin: 0;
      padding: 1rem;
      border: none;
      background: white;
      box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
      transition: transform 0.3s ease-in-out;
      z-index: 1000;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    dialog.side-drawer[closing] {
      transform: translateX(-100%);
    }

    .close-btn {
      position: absolute;
      top: 1rem;
      right: 1rem;
    }

    .fold-toggle {
      position: absolute;
      top: 50%;
      right: -50px; /* Pull outside of the drawer's edge */
      transform: translateY(-50%);
      z-index: 1001;
      background: #333;
      color: white;
      border: none;
      border-radius: 0 4px 4px 0;
      padding: 0.5rem 1rem;
      cursor: pointer;
    }

JavaScript

const drawer = document.getElementById('drawer');
    const toggleBtn = document.getElementById('toggleBtn');
    let isOpen = true;

    function openDrawer() {
      drawer.removeAttribute('closing');
      drawer.showModal();
      isOpen = true;
      toggleBtn.textContent = '← Fold';
    }

    function closeDrawer() {
      drawer.setAttribute('closing', '');
      setTimeout(() => drawer.close(), 300);
      isOpen = false;
      toggleBtn.textContent = '→ Open';
    }

    function toggleDrawer() {
      isOpen ? closeDrawer() : openDrawer();
    }

    // Open by default on page load
    openDrawer();