<div class="container">
  <nav class="flex items-center justify-between h-18">
    <a href="#" class="flex items-center gap-2">
      <div class="flex items-center justify-center size-6 rounded-sm overflow-hidden shrink-0 bg-primary text-primary-foreground text-sm font-bold">ui</div>
      <div class="text-sm font-medium truncate">Starting Point</div>
    </a>
    <div class="hidden lg:flex items-center gap-1">
      <a href="#" class="btn btn-ghost btn-sm">Product</a>
      <a href="#" class="btn btn-ghost btn-sm">Solutions</a>
      <a href="#" class="btn btn-ghost btn-sm">Resources</a>
      <a href="#" class="btn btn-ghost btn-sm">Company</a>
    </div>
    <div class="hidden lg:flex items-center gap-2">
      <button class="btn btn-ghost btn-sm">Sign In</button>
      <button class="btn btn-sm">Get Started</button>
    </div>
    <button class="btn btn-ghost btn-icon-sm lg:hidden" aria-label="Open menu" data-sp-toggle="dialog" data-sp-target="#mobile-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" class="lucide lucide-menu size-5" aria-hidden="true">
        <path d="M4 5h16"></path>
        <path d="M4 12h16"></path>
        <path d="M4 19h16"></path>
      </svg>
    </button>
  </nav>
</div>
<dialog id="mobile-menu" class="dialog">
  <div class="sheet-backdrop"></div>
  <div class="sheet-panel sheet-right w-full max-w-xs">
    <div class="sheet-content h-full flex flex-col">
      <div class="flex items-center justify-between mb-8 -mr-2">
        <a href="#" class="flex items-center gap-2">
          <div class="flex items-center justify-center size-6 rounded-sm overflow-hidden shrink-0 bg-primary text-primary-foreground text-sm font-bold">ui</div>
          <div class="text-sm font-medium truncate">Starting Point</div>
        </a>
        <button class="btn btn-ghost btn-icon-sm" aria-label="Close menu" data-sp-dismiss="dialog">
          <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" class="lucide lucide-x size-5" aria-hidden="true">
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="flex flex-col gap-1 -ml-3">
        <a href="#" class="btn btn-ghost justify-start">Product</a>
        <a href="#" class="btn btn-ghost justify-start">Solutions</a>
        <a href="#" class="btn btn-ghost justify-start">Resources</a>
        <a href="#" class="btn btn-ghost justify-start">Company</a>
      </div>
      <div class="flex flex-col gap-2 pt-8 border-t mt-auto">
        <button class="btn btn-outline">Sign In</button>
        <button class="btn">Get Started</button>
      </div>
    </div>
  </div>
</dialog>