Fixed Dark Navbar with Search and User Actions

<header class="fixed top-0 left-0 right-0 z-50 border-b border-white/10 backdrop-blur bg-[#1D203E]/40" style="background-color: rgba(29, 32, 62, 0.4);" data-element-locator="html &gt; body:nth-of-type(1) &gt; header:nth-of-type(1)">
    <div class="max-w-7xl mx-auto px-4">
      <div class="flex items-center justify-between py-3">
        <!-- Left: Brand + Nav -->
        <div class="flex items-center gap-6">
          <a href="#" class="flex items-center gap-2">
            <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="hexagon" class="lucide lucide-hexagon w-6 h-6 text-purple-400"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" class=""></path></svg>
            <span class="text-lg font-medium" style="font-family:'Plus Jakarta Sans', sans-serif">Pinboard</span>
          </a>
          <nav class="hidden md:flex items-center gap-5">
            <a href="#" class="text-slate-200 hover:text-purple-400 transition-colors text-sm font-normal">Discover</a>
            <a href="#" class="text-slate-400 hover:text-purple-400 transition-colors text-sm font-normal">Trending</a>
            <a href="#" class="text-slate-400 hover:text-purple-400 transition-colors text-sm font-normal">Upload</a>
          </nav>
        </div>

        <!-- Center: Search -->
        <div class="flex-1 max-w-2xl mx-6">
          <div class="relative group">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="search" class="lucide lucide-search text-slate-500"><path d="m21 21-4.34-4.34" class=""></path><circle cx="11" cy="11" r="8" class=""></circle></svg>
            </div>
            <input id="globalSearch" type="text" placeholder="Find creative inspiration" class="w-full bg-slate-900/80 border border-white/10 rounded-full pl-10 pr-24 py-2.5 text-sm text-slate-100 placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-purple-500/60 focus:bg-slate-900 transition" style="font-family:'Inter',sans-serif">
            <div class="absolute inset-y-0 right-2 flex items-center gap-1.5">
              <button id="clearSearch" class="hidden px-2 py-1 text-xs rounded-full bg-slate-800/80 text-slate-300 hover:bg-slate-700 transition" style="font-family:'Inter',sans-serif">
                Clear
              </button>
              <div class="hidden sm:flex items-center gap-1 px-2 py-1 rounded-md bg-slate-800/70 text-slate-300 text-[11px]" style="font-family:'Inter',sans-serif">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="command" class="lucide lucide-command text-slate-400"><path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" class=""></path></svg>
                K
              </div>
            </div>
          </div>
        </div>

        <!-- Right: Actions -->
        <div class="flex items-center gap-2">
          <button class="p-2 rounded-full hover:bg-slate-900 transition">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="bell" class="lucide lucide-bell text-slate-400"><path d="M10.268 21a2 2 0 0 0 3.464 0" class=""></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" class=""></path></svg>
          </button>
          <button class="p-2 rounded-full hover:bg-slate-900 transition">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="message-circle" class="lucide lucide-message-circle text-slate-400"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719" class=""></path></svg>
          </button>
          <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/00c49c51-b2f7-421e-bba1-ff3df1af734f_320w.jpg" alt="Profile" class="w-8 h-8 rounded-full object-cover ring-1 ring-white/10">
        </div>
      </div>
    </div>
  </header>