Drawer Basic

                    <section class="bg-white p-4">
  <div class="relative w-full">
    <input id="my-drawer" type="checkbox" class="sr-only peer">
    <div class="w-full transition-all duration-300">
      <!-- 页面内容 -->
      <div class="w-full max-w-4xl mx-auto p-4">
        <label for="my-drawer" class="inline-flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-md shadow hover:bg-blue-700 cursor-pointer mb-4">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
          Open Drawer
        </label>
        <div>
          <h1 class="text-2xl font-bold">Main Content</h1>
          <p class="text-gray-600 mt-2">
            This is the main content area. Click the button above to open the sidebar drawer.
          </p>
          <p class="text-gray-600 mt-2">
            The drawer pattern is useful for navigation menus, filters, or any interface that needs to be toggled on and off.
          </p>
        </div>
      </div>
    </div>
    
    <!-- Overlay background when drawer is open -->
    <label for="my-drawer" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden peer-checked:block cursor-pointer"></label>
    
    <!-- Drawer sidebar -->
    <div class="fixed top-0 left-0 h-full w-80 bg-white shadow-lg z-50 transform -translate-x-full transition-transform duration-300 peer-checked:translate-x-0">
      <div class="p-4">
        <div class="flex items-center justify-between mb-6">
          <h2 class="text-lg font-semibold">Sidebar Menu</h2>
          <label for="my-drawer" class="p-1 rounded-full hover:bg-gray-100 cursor-pointer">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </label>
        </div>
        <ul class="bg-gray-100 rounded-lg p-2 space-y-1 w-full">
          <li><a class="block px-4 py-2 rounded-md bg-blue-600 text-white cursor-pointer">Dashboard</a></li>
          <li><a class="block px-4 py-2 rounded-md hover:bg-gray-200 cursor-pointer">Profile</a></li>
          <li><a class="block px-4 py-2 rounded-md hover:bg-gray-200 cursor-pointer">Settings</a></li>
          <li><a class="block px-4 py-2 rounded-md hover:bg-gray-200 cursor-pointer">Messages</a></li>
          <li><a class="block px-4 py-2 rounded-md hover:bg-gray-200 cursor-pointer">Analytics</a></li>
        </ul>
      </div>
    </div>
  </div>
</section>