Mobile Sidebar Menu

<div class="mobile-sidebar-container">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');</style>
  <div class="h-10 px-4 py-4 flex flex-row md:hidden items-center
    justify-between bg-gray-100 dark:bg-gray-800 w-full" style="font-family: 'Inter', 'Helvetica Neue', sans-serif;">
    <div class="flex justify-end z-20 w-full">
      <button class="mobile-menu-toggle text-gray-800 dark:text-gray-200 cursor-pointer" onclick="toggleMobileMenu()">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
    <div id="mobileMenuOverlay" class="fixed h-full w-full inset-0 bg-white dark:bg-gray-900 p-10
      z-[100] flex-col justify-between transform -translate-x-full
      opacity-0 transition-all duration-300 ease-in-out" style="display: none;">
      <div class="absolute right-10 top-10 z-50 text-gray-800 dark:text-gray-200 cursor-pointer" onclick="toggleMobileMenu()">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </div>
      <div class="mobile-nav-content space-y-4 mt-16">
        <a href="#dashboard" class="flex items-center gap-3 py-3 text-gray-700 dark:text-gray-200 text-lg" onclick="toggleMobileMenu()">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
            <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"></path>
          </svg>
        </a>
        <a href="#analytics" class="flex items-center gap-3 py-3 text-gray-700 dark:text-gray-200 text-lg" onclick="toggleMobileMenu()">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
            <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"></path>
          </svg>
        </a>
        <a href="#settings" class="flex items-center gap-3 py-3 text-gray-700 dark:text-gray-200 text-lg" onclick="toggleMobileMenu()">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
  <script>function toggleMobileMenu() { const overlay = document.getElementById('mobileMenuOverlay'); if (overlay.style.display === 'none' || overlay.style.display === '') { overlay.style.display = 'flex'; setTimeout(() => { overlay.classList.remove('-translate-x-full', 'opacity-0'); overlay.classList.add('translate-x-0', 'opacity-100'); }, 10); } else { overlay.classList.add('-translate-x-full', 'opacity-0'); overlay.classList.remove('translate-x-0', 'opacity-100'); setTimeout(() => { overlay.style.display = 'none'; }, 300); } }</script>
</div>