Drawer Responsive

                    <section class="bg-white min-h-screen">
  <div class="relative w-full">
    <input id="my-drawer-2" type="checkbox" class="sr-only peer">
    
    <!-- Main content -->
    <div class="w-full lg:ml-80 transition-all duration-300">
      <div class="p-6">
        <div class="lg:hidden mb-6">
          <label for="my-drawer-2" 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">
            <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 Menu
          </label>
        </div>
        
        <div class="max-w-4xl">
          <h1 class="text-2xl font-bold">Dashboard Overview</h1>
          <p class="text-gray-600 mt-2">
            Welcome to your dashboard! This is a responsive drawer layout that automatically stays open on large screens.
          </p>
          
          <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-6">
              <h3 class="font-medium text-gray-800 mb-2">Recent Activity</h3>
              <ul class="space-y-3">
                <li class="flex items-center gap-3 text-sm">
                  <span class="w-2 h-2 bg-green-500 rounded-full"></span>
                  <span>Project "Alpha" completed</span>
                  <span class="ml-auto text-gray-400">2h ago</span>
                </li>
                <li class="flex items-center gap-3 text-sm">
                  <span class="w-2 h-2 bg-blue-500 rounded-full"></span>
                  <span>New comment on "Beta" task</span>
                  <span class="ml-auto text-gray-400">5h ago</span>
                </li>
                <li class="flex items-center gap-3 text-sm">
                  <span class="w-2 h-2 bg-yellow-500 rounded-full"></span>
                  <span>Timer updated for "Gamma" project</span>
                  <span class="ml-auto text-gray-400">Yesterday</span>
                </li>
              </ul>
            </div>
            
            <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-6">
              <h3 class="font-medium text-gray-800 mb-2">Performance</h3>
              <div class="space-y-4">
                <div>
                  <div class="flex justify-between text-sm mb-1">
                    <span>Task Completion</span>
                    <span>78%</span>
                  </div>
                  <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                    <div class="h-2 bg-blue-600 rounded-full w-[78%]"></div>
                  </div>
                </div>
                <div>
                  <div class="flex justify-between text-sm mb-1">
                    <span>Project Progress</span>
                    <span>62%</span>
                  </div>
                  <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                    <div class="h-2 bg-green-500 rounded-full w-[62%]"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Overlay background - for mobile -->
    <label for="my-drawer-2" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden peer-checked:block lg:hidden cursor-pointer"></label>
    
    <!-- Sidebar -->
    <div class="fixed top-0 left-0 h-full w-80 bg-white shadow-xl z-50 transform -translate-x-full transition-transform duration-300 peer-checked:translate-x-0 lg:translate-x-0">
      <div class="p-6 h-full flex flex-col">
        <!-- Header -->
        <div class="flex items-center justify-between mb-6">
          <div class="flex items-center">
            <div class="bg-blue-600 text-white p-2 rounded-lg">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
              </svg>
            </div>
            <h1 class="text-xl font-bold ml-2">AppDash</h1>
          </div>
          <label for="my-drawer-2" class="p-1 rounded-full hover:bg-gray-100 cursor-pointer lg:hidden">
            <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>
        
        <!-- Navigation -->
        <nav class="flex-grow">
          <p class="text-xs uppercase tracking-wider text-gray-500 mb-2">Main Menu</p>
          <ul class="space-y-1">
            <li>
              <a href="#" class="flex items-center gap-3 px-4 py-2.5 rounded-md bg-blue-50 text-blue-700">
                <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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                </svg>
                Dashboard
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center gap-3 px-4 py-2.5 rounded-md text-gray-700 hover:bg-gray-100">
                <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                </svg>
                Profile
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center gap-3 px-4 py-2.5 rounded-md text-gray-700 hover:bg-gray-100">
                <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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                </svg>
                Projects
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center gap-3 px-4 py-2.5 rounded-md text-gray-700 hover:bg-gray-100">
                <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
                Calendar
              </a>
            </li>
          </ul>
          
          <p class="text-xs uppercase tracking-wider text-gray-500 mt-6 mb-2">Settings</p>
          <ul class="space-y-1">
            <li>
              <a href="#" class="flex items-center gap-3 px-4 py-2.5 rounded-md text-gray-700 hover:bg-gray-100">
                <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
                Settings
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center gap-3 px-4 py-2.5 rounded-md text-gray-700 hover:bg-gray-100">
                <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="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
                </svg>
                Logout
              </a>
            </li>
          </ul>
        </nav>
        
        <!-- Footer -->
        <div class="mt-auto pt-4 border-t border-gray-200">
          <div class="flex items-center">
            <div class="h-8 w-8 rounded-full bg-gray-300 flex-shrink-0"></div>
            <div class="ml-3">
              <p class="text-sm font-medium">John Smith</p>
              <p class="text-xs text-gray-500">Admin</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>