Navbar

<nav class="navbar" x-data="{ open: false }">
  <div class="navbar-inner">
    <a class="navbar-brand">
      <div class="navbar-brand-icon">A</div>
      AppName
    </a>
    <div class="navbar-actions">
      <button class="btn btn-primary">
        <svg class="h-4 w-4">...</svg>
        New
      </button>
      <div class="dropdown">
        <button
          x-on:click="open = !open"
          :aria-expanded="open"
          aria-controls="navbar-menu"
          class="btn-icon btn-secondary"
          aria-label="Open account menu">
          <svg class="h-5 w-5">...</svg>
        </button>
        <div
          x-show="open"
          x-transition.origin.top.right
          @click.outside="open = false"
          id="navbar-menu"
          class="dropdown-panel dropdown-panel-right">
          <div class="dropdown-section">
            <a class="dropdown-item">
              <svg class="dropdown-item-icon">...</svg>
              Profile
            </a>
            <a class="dropdown-item">
              <svg class="dropdown-item-icon">...</svg>
              Settings
            </a>
          </div>
          <div class="dropdown-section">
            <a class="dropdown-item dropdown-item-danger">
              <svg class="mr-2.5 h-4 w-4">...</svg>
              Sign out
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>