Glassmorphism Sidebar Navigation

<div class="flex h-screen bg-gray-100 dark:bg-gray-900">

  <!-- Backdrop -->
  <div id="sidebarBackdrop" class="fixed inset-0 z-40 lg:hidden transition-opacity duration-300 ease-linear opacity-0 pointer-events-none bg-black bg-opacity-25"></div>

  <!-- Sidebar -->
  <div id="sidebar" class="fixed inset-y-0 left-0 z-50 w-64 bg-white/20 dark:bg-gray-800/20 backdrop-filter backdrop-blur-lg border-r border-white/30 dark:border-gray-700/30 transform -translate-x-full lg:translate-x-0 lg:static lg:inset-0 transition-transform duration-300 ease-in-out">

    <div class="flex items-center justify-center h-20 border-b border-white/30 dark:border-gray-700/30">
      <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Portfolio</h1>
    </div>

    <nav class="flex-1 px-2 py-4 space-y-2">
      <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-white/30 dark:hover:bg-gray-700/30 rounded-lg">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-3" 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 2m0 0l7 7M19 10v10a1 1 0 01-1 1h-3m-2-7a2 2 0 11-4 0 2 2 0 014 0z" />
        </svg>
        Home
      </a>

      <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-white/30 dark:hover:bg-gray-700/30 rounded-lg">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-3" 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>
        About
      </a>

      <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-white/30 dark:hover:bg-gray-700/30 rounded-lg">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
        </svg>
        Projects
      </a>

      <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-white/30 dark:hover:bg-gray-700/30 rounded-lg">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
        </svg>
        Contact
      </a>
    </nav>

    <div class="absolute bottom-0 left-0 w-full p-4 border-t border-white/30 dark:border-gray-700/30">
      <div class="flex items-center">
        <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <div class="text-sm">
          <p class="font-semibold text-gray-800 dark:text-white">John Doe</p>
          <p class="text-gray-600 dark:text-gray-400">Web Developer</p>
        </div>
      </div>
    </div>

  </div>

  <!-- Content Area (for demonstration) -->
  <div class="flex-1 p-10">
    <h1 class="text-3xl font-bold text-gray-800 dark:text-white">Main Content</h1>
    <p class="mt-4 text-gray-600 dark:text-gray-400">This is the main content area. The sidebar is on the left.</p>
  </div>

</div>