Responsive Portfolio Header with Toggle Menu

<header class="max-w-7xl sm:px-6 mx-auto pt-6 w-full">
      <nav class="flex items-center justify-between border-b border-black/5 pb-4">
        <!-- Brand -->
        <a href="#" class="inline-flex items-center gap-2">
          <svg class="md:w-14 md:h-14 w-[36px] h-[36px]" viewBox="0 0 48 48" aria-hidden="true" stroke-width="2" style="width: 36px; height: 36px;">
<path d="M24 8 L40 36 H8 Z" fill="currentColor" class=""></path>
</svg>
          <span class="text-sm sm:text-base font-medium tracking-tight">Jordan Lee</span>
        </a>

        <!-- Nav links -->
        <div class="hidden md:flex items-center gap-6">
          <a href="#work" class="text-sm text-gray-700 hover:text-gray-900 tracking-tight">Work</a>
          <a href="#about" class="text-sm text-gray-700 hover:text-gray-900 tracking-tight">About</a>
          <a href="#skills" class="text-sm text-gray-700 hover:text-gray-900 tracking-tight">Skills</a>
          <a href="#contact" class="text-sm text-gray-700 hover:text-gray-900 tracking-tight">Contact</a>
        </div>

        <!-- Actions -->
        <div class="flex items-center gap-2">
          <a href="#" class="hidden sm:inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-sm font-medium tracking-tight text-gray-900 bg-white hover:bg-gray-50 border border-gray-200 shadow-sm">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="download" class="lucide lucide-download w-4 h-4"><path d="M12 15V3" class=""></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="m7 10 5 5 5-5" class=""></path></svg>
            <span>Resume</span>
          </a>
          <button type="button" data-menu-toggle="" class="md:hidden inline-flex items-center justify-center rounded-full p-2 border border-gray-200 bg-white hover:bg-gray-50">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="menu" class="lucide lucide-menu w-4 h-4"><path d="M4 12h16" class=""></path><path d="M4 18h16" class=""></path><path d="M4 6h16" class=""></path></svg>
            <span class="sr-only">Open menu</span>
          </button>
        </div>
      </nav>

      <!-- Mobile menu -->
      <div data-menu-panel="" class="md:hidden hidden mt-3 rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
        <div class="px-4 py-3 grid gap-2">
          <a href="#work" class="text-sm text-gray-800 tracking-tight py-1.5">Work</a>
          <a href="#about" class="text-sm text-gray-800 tracking-tight py-1.5">About</a>
          <a href="#skills" class="text-sm text-gray-800 tracking-tight py-1.5">Skills</a>
          <a href="#contact" class="text-sm text-gray-800 tracking-tight py-1.5">Contact</a>
        </div>
        <div class="border-t border-gray-200 px-4 py-3">
          <a href="#" class="inline-flex w-full items-center justify-center gap-2 rounded-full px-4 py-2 text-sm font-medium tracking-tight text-white bg-gray-900 hover:bg-gray-800 border border-gray-900">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="download" class="lucide lucide-download w-4 h-4"><path d="M12 15V3" class=""></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="m7 10 5 5 5-5" class=""></path></svg>
            <span>Download Resume</span>
          </a>
        </div>
      </div>
    </header>