Navbar Centered Logo

<header class="ws-navbar border-b border-[var(--ws-navbar-border)] bg-[var(--ws-navbar-bg)]">
  <div class="mx-auto max-w-7xl px-6">
    <nav class="flex items-center justify-between py-4">
      <!-- Left nav group -->
      <ul class="hidden items-center gap-6 lg:flex">
        <li><a href="#" class="text-sm font-medium text-[var(--ws-navbar-text)] opacity-70 hover:opacity-100 transition-opacity">Home</a></li>
        <li><a href="#" class="text-sm font-medium text-[var(--ws-navbar-text)] opacity-70 hover:opacity-100 transition-opacity">About</a></li>
        <li><a href="#" class="text-sm font-medium text-[var(--ws-navbar-text)] opacity-70 hover:opacity-100 transition-opacity">Services</a></li>
      </ul>

      <!-- Centered logo -->
      <a href="#" class="text-2xl font-bold tracking-tight text-[var(--ws-navbar-text)] lg:absolute lg:left-1/2 lg:-translate-x-1/2">Brand</a>

      <!-- Right nav group -->
      <ul class="hidden items-center gap-6 lg:flex">
        <li><a href="#" class="text-sm font-medium text-[var(--ws-navbar-text)] opacity-70 hover:opacity-100 transition-opacity">Portfolio</a></li>
        <li><a href="#" class="text-sm font-medium text-[var(--ws-navbar-text)] opacity-70 hover:opacity-100 transition-opacity">Blog</a></li>
        <li><a href="#" class="text-sm font-medium text-[var(--ws-navbar-text)] opacity-70 hover:opacity-100 transition-opacity">Contact</a></li>
      </ul>

      <!-- Mobile toggle -->
      <button class="lg:hidden text-[var(--ws-navbar-text)]" aria-label="Toggle menu">
        <svg class="h-6 w-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"/>
        </svg>
      </button>
    </nav>
  </div>
</header>