<hr class="h-px bg-beige border-0">
<ul class="flex flex-col min-[450px]:flex-row items-center justify-center">

  {% if menu_selected_id == Pages.Sessions %}
  <li class="p-2 text-beige">
    <button>
  {% else %}
  <li class="p-2">
    <button hx-get="/api/content/sessions"
            hx-replace-url="/sessions"
            hx-target="#content">
  {% endif %}
      Sessions
    </button>
  </li>

  {% if menu_selected_id == Pages.Temes %}
  <li class="p-2 text-beige">
    <button>
  {% else %}
  <li class="p-2">
    <button hx-get="/api/content/temes"
            hx-replace-url="/temes"
            hx-target="#content">
  {% endif %}
      Temes
    </button>
  </li>

  {% if menu_selected_id == Pages.Llistes %}
  <li class="p-2 text-beige">
    <button>
  {% else %}
  <li class="p-2">
    <button hx-get="/api/content/llistes"
            hx-replace-url="/llistes"
            hx-target="#content">
  {% endif %}
      Llistes
    </button>
  </li>

</ul>
<hr class="h-px bg-beige border-0">
<div hx-get="/api/sessions/live"
     hx-swap="innerHTML"
     hx-trigger="load, every 20s, reload-marquee from:body">
</div>
