
<th:block xmlns:th="https://www.thymeleaf.org" th:fragment="navbar">
  <div id="header-post" class="fixed tw-zc tw-ic tw-xd tw-pa hidden tw-cc">
    <a id="top-icon-tablet" class="hidden tw-eb" href="#" role="button" data-scroll-to-top
      ><span class="iconify-large iconify material-symbols--keyboard-arrow-up"></span
    ></a>
    <a
      id="toc-icon-tablet"
      class="hidden tw-eb"
      href="#"
      role="button"
      onclick="event.preventDefault()"
      aria-expanded="false"
      aria-controls="toc-overlay-tablet"
      th:aria-label="#{fragment.post-nav.toc-icon.aria-label}"
      ><span class="iconify-large iconify ic--baseline-toc"></span
    ></a>
    <span id="menu" class="tw-jd">
      <div class="flex tw-ga tw-ta">
        <span id="nav" class="hidden tw-bc">
          <th:block th:insert="~{components/common/template :: menu(showIcon=false)}"></th:block>
        </span>
        <a
          id="menu-icon"
          href="#"
          onclick="event.preventDefault()"
          th:aria-label="#{fragment.post-nav.menu-icon.aria-label}"
          class="active"
          role="button"
          aria-expanded="true"
          aria-controls="nav actions toc"
        >
          <span class="iconify-middle iconify tw-k material-symbols--menu"></span>
        </a>
      </div>
      <span id="actions" class="tw-pa tw-od tw-jd hidden tw-kb tw-bc">
        <ul class="tw-pa block">
          <li>
            <a
              th:href="@{/}"
              class="icon"
              th:aria-label="#{fragment.post-nav.actions.home-icon.aria-label}"
              role="button"
              data-toggle-target="#i-home"
            >
              <span class="iconify-large iconify mdi--home-circle"></span>
            </a>
          </li>
          <li class="hidden tw-l">
            <a
              class="icon"
              href="#"
              data-scroll-to-top
              th:aria-label="#{fragment.post-nav.actions.to-top-icon.aria-label}"
              role="button"
              data-toggle-target="#i-top"
            >
              <span class="iconify-large iconify material-symbols--keyboard-arrow-up"></span>
            </a>
          </li>
          <li class="tw-rb">
            <a
              class="icon"
              href="#"
              onclick="event.preventDefault()"
              aria-expanded="false"
              aria-controls="toc-overlay-tablet"
              th:aria-label="#{fragment.post-nav.toc-icon.aria-label}"
              id="action-toc-tablet-menu"
              role="button"
              data-toggle-target="#i-toc"
            >
              <span class="iconify-large iconify ic--baseline-toc"></span>
            </a>
          </li>
          <li th:if="${theme.config?.post_styles?.is_show_post_nav_share_button}">
            <a
              class="icon"
              href="#"
              id="action-share"
              onclick="event.preventDefault()"
              th:aria-label="#{fragment.post-nav.actions.share-icon.aria-label}"
              role="button"
              aria-expanded="false"
              aria-controls="share-list"
              data-toggle-target="#i-share"
            >
              <span class="iconify-middle iconify mdi--share-variant-outline"></span>
            </a>
          </li>
        </ul>
        <span id="i-top" class="info hidden" th:text="#{fragment.post-nav.toTop}"></span>
        <span id="i-toc" class="info hidden" th:text="#{fragment.post-nav.toc}"></span>
        <span
          th:if="${theme.config?.post_styles?.is_show_post_nav_share_button}"
          id="i-share"
          class="info hidden"
          th:text="#{fragment.post-nav.sharePost}"
        ></span>
        <span id="i-home" class="info hidden" th:text="#{fragment.post-nav.backToHome}"></span>
      </span>
      <br />
      <div
        th:if="${theme.config?.post_styles?.is_show_post_nav_share_button}"
        id="share-list"
        class="tw-db hidden tw-sd tw-rd tw-kb"
      >
        <th:block
          th:insert="~{components/share/template :: body(originPermalink = ${singlePage.status.permalink},
                                                 title = ${singlePage.spec.title})}"
        ></th:block>
      </div>
      <div id="toc" class="hidden tw-bc"></div>
    </span>
  </div>
  <div id="toc-overlay-tablet" class="hidden">
    <div id="toc-overlay-backdrop"></div>
    <div id="toc-overlay-content">
      <div id="toc-overlay-header">
        <span th:text="#{fragment.post-nav.toc}">目录</span>
        <a
          id="toc-overlay-close"
          href="#"
          role="button"
          onclick="event.preventDefault()"
          th:aria-label="#{fragment.post-nav.close-toc.aria-label}"
        >
          <span class="iconify-large iconify ic--baseline-close"></span>
        </a>
      </div>
      <div id="toc-tablet"></div>
    </div>
  </div>
</th:block>
