Side Drawer Dialog

by momenelkamri

HTML

<script src="https://cdn.tailwindcss.com"></script>
  



  <button id="openBtn" class="fixed top-4 left-4 z-50 px-4 py-2 bg-blue-600 text-white rounded">
    Open Side Drawer
  </button>

  <dialog id="sideDrawer" class="fixed right-0 top-0 h-screen w-full sm:w-[380px] m-0 bg-white shadow-lg z-40">
    <div class="flex flex-col h-full">
      <div class="p-4 border-b flex justify-between items-center">
        <h2 class="text-lg font-bold">Drawer Header</h2>
        <button onclick="closeDrawer()" class="text-red-500">X</button>
      </div>
      <div class="overflow-y-auto flex-1 p-4 space-y-4">
        <!-- Long content to enable scroll -->
        <p>Line 1</p>
        <p>Line 2</p>
        <p>Line 3</p>
        <p>Line 4</p>
        <p>Line 5</p>
        <p>Line 6</p>
        <p>Line 7</p>
        <p>Line 8</p>
        <p>Line 9</p>
        <p>Line 10</p>
        <p>Line 11</p>
        <p>Line 12</p>
        <p>Line 13</p>
        <p>Line 14</p>
        <p>Line 15</p>
      </div>
    </div>
  </dialog>

CSS

dialog::backdrop {
      background-color: rgba(0, 0, 0, 0.4);
    }
    dialog {
      padding: 0;
    }

JavaScript

const dialog = document.getElementById("sideDrawer");

    function openDrawer() {
      document.body.style.overflow = "hidden";
      dialog.showModal();
    }

    function closeDrawer() {
      dialog.close();
      document.body.style.overflow = "";
    }

    dialog.addEventListener("close", () => {
      document.body.style.overflow = "";
    });

    document.getElementById("openBtn").addEventListener("click", openDrawer);