<div th:fragment="layout-header" class="hjcl-layout-header">

  <div class="wrapper">

    <div class="nav-menu" id="navMenu"></div>
    <div class="nav-right-bar">
      <div th:replace="~{components/language::language}"></div>
    </div>

    <!-- 导航 -->
    <ul class="nav" id="nav">

      <li class="first-nav-item" th:text="#{sub.sider.title.nav}"></li>

      <li th:each="nav, iterStat : ${navigation}"
          th:class="${(iterStat.index + 1 == (navigation.size + 1) / 2) ? 'middle-l' : (iterStat.index == (navigation.size + 1) / 2) ? 'middle-r' : ''}">
        <div class="flex justify-between">
          <a th:href="${nav.link}"
             th:class="${'link underline-hover underline-offset-4 ' + (requestVO.uri == nav.link ? 'active' : '') + (nav.is_blank == 1 ? 'underline' : '')}">
            <span th:text="${nav.navigation_name}"></span>
          </a>
          <span th:if="${nav.children.size > 0}" class="nav-more" id="navMore">+</span>
        </div>
        <!-- 子级导航 -->
        <div th:if="${nav.children.size > 0}" class="navSub">
          <div th:each="navChild : ${nav.children}">
            <a th:href="${navChild.link}" th:text="${navChild.navigation_name}"></a>
          </div>
        </div>

      </li>
    </ul>
    <div class="nav-mask" id="navMask"></div>
    <script>
      // [Click] 点击显示左侧 (或顶部) 导航
      $('#navMenu').on('click', function() {
          $(this).toggleClass('active')
          $('#nav, #navMask').toggleClass('active')
      })
      // [Click] 导航 遮罩层
      $('#navMask').on('click', function() {
          $('#nav, #navMask').toggleClass('active')
      })
      // [Click] 点击子级导航
      $('#navMore').on('click', function() {
          // 切换文本内容
          $(this).text(function(index, currentText) {
              return currentText === '+' ? '-' : '+'
          })
          // 显示/隐藏菜单
          $(this).parent().next('.navSub').toggleClass('active');
      })
    </script>

    <!-- Logo -->
    <a href="/" class="header-logo-link">
      <img class="header-logo" th:src="@{/images/logo.png}" />
    </a>

  </div>
</div>