{# Header partial template for consistent navigation across all pages #} {#
Mobile menu uses a CSS-only checkbox toggle — no JavaScript required. #} {%
macro header(current_page) -%}
<!-- Navigation -->
<nav class="bg-white shadow-lg">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Hidden checkbox — acts as toggle state for the mobile menu (CSS-only, no JS) -->
    <input type="checkbox" id="mobile-menu-toggle" class="sr-only peer" />

    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0 flex items-center">
          <img class="h-8 w-8" src="/static/FenLiu.png" alt="FenLiu Logo" />
          <span class="ml-2 text-xl font-bold text-gray-900">
            {{ app_name }}
          </span>
          <span class="ml-2 text-sm text-gray-500">v{{ app_version }}</span>
        </div>
        <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
          {{ nav_link("/", "dashboard", "Dashboard", current_page) }} {{
          nav_link("/streams", "streams", "Streams", current_page) }} {{
          nav_link("/review", "review", "Review", current_page) }} {{
          nav_link("/stats", "stats", "Stats", current_page) }} {{
          nav_link("/queue", "queue", "Queue", current_page) }} {{
          nav_link("/settings", "settings", "Settings", current_page) }}
        </div>
      </div>

      <!-- Mobile menu toggle label (replaces JS button) -->
      <div class="flex items-center sm:hidden">
        <label
          for="mobile-menu-toggle"
          class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 cursor-pointer"
          aria-label="Toggle main menu"
        >
          <i class="fas fa-bars text-xl"></i>
        </label>
      </div>
    </div>

    <!-- Mobile menu: hidden by default, revealed via peer-checked when checkbox is ticked -->
    <div class="hidden peer-checked:block sm:hidden border-t border-gray-200">
      <div class="px-2 pt-2 pb-3 space-y-1">
        {{ mobile_nav_link("/", "dashboard", "Dashboard", current_page) }} {{
        mobile_nav_link("/streams", "streams", "Streams", current_page) }} {{
        mobile_nav_link("/review", "review", "Review", current_page) }} {{
        mobile_nav_link("/stats", "stats", "Stats", current_page) }} {{
        mobile_nav_link("/queue", "queue", "Queue", current_page) }} {{
        mobile_nav_link("/settings", "settings", "Settings", current_page) }}
      </div>
    </div>
  </div>
</nav>
{%- endmacro %} {% macro nav_link(path, page_id, label, current_page) -%} {% if
page_id == current_page -%}
<a
  href="{{ path }}"
  class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
  aria-current="page"
>
  {{ label }}
</a>
{%- else -%}
<a
  href="{{ path }}"
  class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
>
  {{ label }}
</a>
{%- endif %} {%- endmacro %} {% macro mobile_nav_link(path, page_id, label,
current_page) -%} {% if page_id == current_page -%}
<a
  href="{{ path }}"
  class="bg-gray-100 text-gray-900 block px-3 py-2 text-base font-medium rounded-md"
  aria-current="page"
>
  {{ label }}
</a>
{%- else -%}
<a
  href="{{ path }}"
  class="text-gray-500 hover:text-gray-700 hover:bg-gray-50 block px-3 py-2 text-base font-medium rounded-md"
>
  {{ label }}
</a>
{%- endif %} {%- endmacro %} {% macro mobile_menu_script() -%} {#- Intentionally
empty: mobile menu is toggled via CSS-only checkbox hack. #} {%- endmacro %}