Krys4lide/crates/app/templates/layout/nav.html

<nav
  class="border-b border-gray-200 bg-white"
  x-data="{ menuOpen: false }"
>
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="flex h-16 justify-between">
      <div class="flex">
        {% include "layout/nav/logo.html" %}
        <div id="nav-menu-desktop"
             class="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8"
        >
          {% include "layout/nav/desktop/menu-items.html" %}
        </div>
      </div>
      <div class="hidden sm:ml-6 sm:flex sm:items-center">
        {% include "layout/nav/desktop/notifications-button.html" %}
        {% include "layout/nav/desktop/profile.html" %}
      </div>
      <div class="-mr-2 flex items-center sm:hidden">
        {% include "layout/nav/mobile/menu-button.html" %}
      </div>
    </div>
  </div>
  <!-- Mobile menu, show/hide based on menu state. -->
  <div
    class="sm:hidden" id="mobile-menu"
    x-show="menuOpen"
    x-cloak
  >
    <div id="nav-menu-mobile"
         class="space-y-1 pb-3 pt-2"
    >
      {% include "layout/nav/mobile/menu-items.html" %}
    </div>
    <div class="border-t border-gray-200 pb-3 pt-4">
      <div class="flex items-center px-4">
        {% include "layout/nav/mobile/profile.html" %}
        {% include "layout/nav/mobile/notifications-button.html" %}
      </div>
      <div class="mt-3 space-y-1">
        {% include "layout/nav/mobile/profile-items.html" %}
      </div>
    </div>
  </div>
</nav>