innovedus_cms/innovedus_cms/mysite/templates/includes/header.html

{% load wagtailsettings_tags wagtailimages_tags %}
{% get_settings use_default_site=True as settings %}

<header class="site-header{% if settings.base.HeaderSettings.logo_light and settings.base.HeaderSettings.logo_dark %} has-logo-variants{% endif %}">
  <div class="site-container">
    <div class="header-inner">
    {% if settings.base.HeaderSettings.logo_light and settings.base.HeaderSettings.logo_dark %}
      <a href="/" class="logo logo--light">
        {% if settings.base.HeaderSettings.site_name %}
          {% image settings.base.HeaderSettings.logo_light fill-217x30 alt=settings.base.HeaderSettings.site_name %}
        {% else %}
          {% image settings.base.HeaderSettings.logo_light fill-217x30 %}
        {% endif %}
      </a>
      <a href="/" class="logo logo--dark">
        {% if settings.base.HeaderSettings.site_name %}
          {% image settings.base.HeaderSettings.logo_dark fill-217x30 alt=settings.base.HeaderSettings.site_name %}
        {% else %}
          {% image settings.base.HeaderSettings.logo_dark fill-217x30 %}
        {% endif %}
      </a>
    {% elif settings.base.HeaderSettings.logo_light %}
      <a href="/" class="logo">
        {% if settings.base.HeaderSettings.site_name %}
          {% image settings.base.HeaderSettings.logo_light fill-217x30 alt=settings.base.HeaderSettings.site_name %}
        {% else %}
          {% image settings.base.HeaderSettings.logo_light fill-217x30 %}
        {% endif %}
      </a>
    {% elif settings.base.HeaderSettings.logo_dark %}
      <a href="/" class="logo">
        {% if settings.base.HeaderSettings.site_name %}
          {% image settings.base.HeaderSettings.logo_dark fill-217x30 alt=settings.base.HeaderSettings.site_name %}
        {% else %}
          {% image settings.base.HeaderSettings.logo_dark fill-217x30 %}
        {% endif %}
      </a>
    {% endif %}

    <nav class="main-nav" id="site-nav">
      <ul class="main-menu" id="main-menu">
        {% with site_root=page.get_site.root_page %}
          {# Top-level menu: direct children of site root #}
          <li class="menu-item">
            <div class="menu-item-header">
              <a href="#">
                <span class="main-menu-link">最新文章</span>
              </a>
              {% if nav_latest_page or nav_trending_page %}
                <button class="submenu-toggle" type="button" aria-expanded="false" aria-label="Toggle submenu"></button>
              {% endif %}
            </div>
            {% if nav_latest_page or nav_trending_page %}
              <span class="menu-divider" aria-hidden="true"></span>
              <ul class="submenu">
                {% if nav_latest_page %}
                  <li class="submenu-item">
                    <a href="{{ nav_latest_page.url }}">
                      <span class="submenu-item-link">{{ nav_latest_page.title }}</span>
                    </a>
                  </li>
                {% endif %}
                {% if nav_trending_page %}
                  <li class="submenu-item">
                    <a href="{{ nav_trending_page.url }}">
                      <span class="submenu-item-link">{{ nav_trending_page.title }}</span>
                    </a>
                  </li>
                {% endif %}
              </ul>
            {% endif %}
          </li>
          {% for menu_page in site_root.get_children.live.in_menu %}
            <li class="menu-item">
              <div class="menu-item-header">
                <a href="{{ menu_page.url }}">
                  <span class="main-menu-link">{{ menu_page.title }}</span>
                </a>
                {% with submenu=menu_page.get_children.live.in_menu %}
                  {% if submenu %}
                    <button class="submenu-toggle" type="button" aria-expanded="false" aria-label="Toggle submenu"></button>
                  {% endif %}
                {% endwith %}
              </div>
              {# Second-level: direct children of each top-level page #}
              {% with submenu=menu_page.get_children.live.in_menu %}
                {% if submenu %}
                  <span class="menu-divider" aria-hidden="true"></span>
                  <ul class="submenu">
                    {% for subpage in submenu %}
                      <li class="submenu-item">
                        <a href="{{ subpage.url }}">
                          <span class="submenu-item-link">{{ subpage.title }}</span>
                        </a>
                      </li>
                    {% endfor %}
                  </ul>
                {% endif %}
              {% endwith %}
            </li>
          {% endfor %}
        {% endwith %}

        {# Optional extra links from settings #}
        {% if settings.base.HeaderSettings.main_links %}
          {% for item in settings.base.HeaderSettings.main_links %}
            <li class="menu-item">
              <div class="menu-item-header">
                <a href="{{ item.value.url }}">
                  <span class="main-menu-link">{{ item.value.label }}</span>
                </a>
              </div>
            </li>
          {% endfor %}
        {% endif %}
      </ul>
    </nav>

    <form class="header-search" action="{% url 'search' %}" method="get" role="search">
      <div class="search-input">
        <button type="submit" class="search-icon" aria-label="搜尋">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M10 4a6 6 0 104.24 10.24l4.76 4.76 1.42-1.42-4.76-4.76A6 6 0 0010 4zm0 2a4 4 0 110 8 4 4 0 010-8z"/></svg>
        </button>
        <input
          type="search"
          name="query"
          placeholder="搜尋文章"
          value="{{ request.GET.query|default:'' }}"
          aria-label="搜尋文章">
      </div>
    </form>

    <button class="menu-toggle" type="button" aria-expanded="false" aria-controls="site-nav" aria-label="Toggle menu">
      <span class="menu-toggle-bar"></span>
      <span class="menu-toggle-bar"></span>
      <span class="menu-toggle-bar"></span>
    </button>
    </div>
  </div>
</header>