Responsive Sticky News Header Navbar

<header class="sticky top-0 z-50 bg-white/70 border-black/5 border-b backdrop-blur-xl w-full">
  <div class="max-w-7xl mx-auto px-6 sm:px-8">
    <div class="h-16 flex items-center justify-between gap-4">
      <!-- Brand -->
      <a href="#"
        class="inline-flex items-center justify-center bg-center mix-blend-multiply w-[110px] h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c2eea25b-e832-4b0b-ad0d-e5f906b20722_800w.jpg)] bg-cover rounded"></a>

      <!-- Desktop Nav -->
      <nav class="hidden md:flex items-center gap-8">
        <a class="text-sm text-black/60 hover:text-black transition font-geist" href="#top" style="">Top</a>
        <a class="text-sm text-black/60 hover:text-black transition font-geist" href="#world" style="">World</a>
        <a class="text-sm text-black/60 hover:text-black transition font-geist" href="#business" style="">Business</a>
        <a class="text-sm text-black/60 hover:text-black transition font-geist" href="#tech" style="">Tech</a>
        <a class="text-sm text-black/60 hover:text-black transition font-geist" href="#sports" style="">Sports</a>
        <a class="text-sm text-rose-600 hover:text-rose-700 transition font-geist" href="#opinion" style="">Opinion</a>
      </nav>

      <!-- Search -->
      <div class="hidden lg:flex flex-1 max-w-xl mx-6">
        <div class="relative w-full">
          <input type="text" placeholder="Search topics, reporters, keywords…" class="w-full h-10 pr-10 pl-10 rounded-xl border border-black/5 bg-white/70 backdrop-blur placeholder-black/40 text-sm outline-none focus:ring-2 focus:ring-black/5 focus:border-black/10 transition">
          <div class="absolute left-3 inset-y-0 flex items-center pointer-events-none text-black/50">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="search"
              class="lucide lucide-search w-4 h-4">
              <path d="m21 21-4.34-4.34" class=""></path>
              <circle cx="11" cy="11" r="8" class=""></circle>
            </svg>
          </div>
          <button class="absolute right-2 inset-y-0 my-auto inline-flex items-center justify-center h-7 px-2 rounded-lg bg-black/5 text-xs text-black/60 hover:text-black hover:bg-black/10 transition font-geist" style="">⌘K</button>
        </div>
      </div>

      <!-- Actions -->
      <div class="flex items-center gap-3">
        <button class="hidden sm:inline-flex items-center justify-center rounded-lg border border-black/5 bg-white text-black/70 hover:bg-black/5 h-9 px-4 text-sm transition">
              <span class="font-geist" style="">Subscribe</span>
            </button>
        <button id="list-btn" class="relative inline-flex items-center justify-center rounded-lg border border-black/5 bg-white text-black/70 hover:bg-black/5 h-9 w-9 transition" aria-label="Reading list">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="bookmark" class="lucide lucide-bookmark w-4 h-4"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" class=""></path></svg>
              <span id="list-count" class="absolute -top-1 -right-1 inline-flex items-center justify-center h-4 min-w-[16px] px-1 rounded-full bg-black text-white text-[10px] leading-none font-geist" style="">0</span>
            </button>
        <button id="mobile-menu-btn" class="md:hidden inline-flex items-center justify-center rounded-lg border border-black/5 bg-white text-black/70 hover:bg-black/5 h-9 w-9 transition" aria-label="Open menu">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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>
            </button>
      </div>
    </div>

    <!-- Mobile Search -->
    <div class="lg:hidden pb-3">
      <div class="relative">
        <input type="text" placeholder="Search topics, reporters, keywords…" class="w-full h-10 pr-10 pl-10 rounded-xl border border-black/5 bg-white/70 backdrop-blur placeholder-black/40 text-sm outline-none focus:ring-2 focus:ring-black/5 focus:border-black/10 transition">
        <div class="absolute left-3 inset-y-0 flex items-center pointer-events-none text-black/50">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="search"
            class="lucide lucide-search w-4 h-4">
            <path d="m21 21-4.34-4.34" class=""></path>
            <circle cx="11" cy="11" r="8" class=""></circle>
          </svg>
        </div>
      </div>
    </div>
  </div>

  <!-- Mobile Menu Panel -->
  <div id="mobile-menu" class="md:hidden hidden border-t border-black/5 bg-white/80 backdrop-blur">
    <div class="max-w-7xl mx-auto px-6 sm:px-8 py-4">
      <nav class="grid grid-cols-2 gap-3">
        <a class="text-sm px-4 py-3 rounded-xl border border-black/5 hover:bg-black/5 text-black/70 hover:text-black transition font-geist"
          href="#top" style="">Top</a>
        <a class="text-sm px-4 py-3 rounded-xl border border-black/5 hover:bg-black/5 text-black/70 hover:text-black transition font-geist"
          href="#world" style="">World</a>
        <a class="text-sm px-4 py-3 rounded-xl border border-black/5 hover:bg-black/5 text-black/70 hover:text-black transition font-geist"
          href="#business" style="">Business</a>
        <a class="text-sm px-4 py-3 rounded-xl border border-black/5 hover:bg-black/5 text-black/70 hover:text-black transition font-geist"
          href="#tech" style="">Tech</a>
        <a class="text-sm px-4 py-3 rounded-xl border border-rose-200 text-rose-600 hover:bg-rose-50 transition font-geist"
          href="#opinion" style="">Opinion</a>
        <a class="text-sm px-4 py-3 rounded-xl border border-black/5 hover:bg-black/5 text-black/70 hover:text-black transition font-geist"
          href="#contact" style="">Contact</a>
      </nav>
    </div>
  </div>
</header>