<div class="absolute hidden inset-0 bg-gray-500 opacity-75 z-10"></div>

<div class="fixed inset-y-0 left-0 w-80 bg-white shadow-xl transform -translate-x-full transition duration-300 ease-in-out z-20">
  <div class="flex items-center justify-between px-4 py-3 border-b">
    <h2 class="text-lg font-medium">Заголовок сайдбара</h2>
    <button id="close-sidebar-btn" class="text-gray-600 focus:outline-none">
      <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24">
        <path d="M18.3 5.7c-.4-.4-1-.4-1.4 0L12 10.6 7.1 5.7c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l4.9 4.9-4.9 4.9c-.4.4-.4 1 0 1.4.2.2.5.3.7.3s.5-.1.7-.3l4.9-4.9 4.9 4.9c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4l-4.9-4.9 4.9-4.9c.4-.4.4-1 0-1.4z" />
      </svg>
    </button>
  </div>
  <div class="px-4 py-6">
    <label class="block mb-2 font-medium" for="name-input">Имя</label>
    <input id="name-input" class="w-full px-3 py-2 border rounded-md" type="text">
    <label class="block mt-4 mb-2 font-medium" for="date-input">Дата</label>
    <input id="date-input" class="w-full px-3 py-2 border rounded-md" type="date">
  </div>
</div>

<div class="flex z-0">
  <!-- Кнопка открытия сайдбара -->
  <button id="open-sidebar-btn" class="fixed bg-blue-500 text-white px-4 py-2 rounded-md shadow-md hover:bg-blue-600 focus:outline-none">
    Открыть сайдбар
  </button>
</div>

$(document).ready(function () {
  $("#open-sidebar-btn").click(function () {
    $("body").addClass("overflow-hidden");
    $(".bg-gray-500").fadeIn();
    $(".transform").removeClass("-translate-x-full");
  });

  $("#close-sidebar-btn, .bg-gray-500").click(function () {
    $("body").removeClass("overflow-hidden");
    $(".bg-gray-500").fadeOut();
    $(".transform").addClass("-translate-x-full");
  });
});

function GetData(id) {
  fetch("/data/?id=" + id)
    .then((response) => response.json())
    .then((data) => {
      $("#name-input").val(data.name);
      $("#date-input").val(data.date);
    });
}