<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!-- 侧栏，主要是手机端时会使用 -->
<div id="sidebar" th:fragment="sidebar">

    <div id="menu-mask"></div>
    <div id="sidebar-menus">
        <span class="sidebar-menu-item-title">功能</span>
        <div class="sidebar-menu-item">
            <a class="darkmode_switchbutton menu-child" href="javascript:void(0);" onclick="rm.switchDarkMode()"
               rel="external nofollow" title="显示模式切换">
                <i class="iconfont icon-moon" style="font-size: 0.9rem;"></i>
                <span>显示模式</span>
            </a>
        </div>
        <th:block th:if="${not #strings.isEmpty(theme.config.nav.leftMenu)}"
                  th:with="leftMenu = ${menuFinder.getByName(theme.config.nav.leftMenu)}">
            <div class="back-menu-list-groups">
                <div class="back-menu-list-group" th:each="menuItem : ${leftMenu.menuItems}">

                    <th:block th:if="${not #lists.isEmpty(menuItem.children)}">
                        <!-- 菜单必须有子项才会展示 -->
                        <div class="back-menu-list-title" th:text="${menuItem.status.displayName}"></div>
                        <div class="back-menu-list">
                            <th:block th:each="childMenu : ${menuItem.children}">
                                <a class="back-menu-item" rel="external nofollow"
                                   target="_blank" th:href="@{${childMenu.status.href}}">
                                    <!-- icon -->
                                    <img th:if="${!#strings.isEmpty(#annotations.getOrDefault(childMenu, 'icon', ''))}"
                                         class="back-menu-item-icon"
                                         th:src="${#annotations.getOrDefault(childMenu, 'icon', '')}">
                                    <span class="back-menu-item-text" th:text="${childMenu.status.displayName}"></span>
                                </a>
                            </th:block>
                        </div>

                    </th:block>
                </div>

            </div>
        </th:block>
        <th:block th:if="${not #lists.isEmpty(menuFinder.getPrimary().menuItems)}"
        >
            <div class="menus_items">
                <div class="menus_item" th:each="menuItem : ${menuFinder.getPrimary().menuItems}">
                    <th:block th:if="${not #lists.isEmpty(menuItem.children)}">
                        <a class="site-page" href="javascript:void(0);" rel="external nofollow">
                            <span th:text="${menuItem.status.displayName}"></span>
                        </a>
                        <th:block th:if="${not #lists.isEmpty(menuItem.children)}">
                            <ul class="menus_item_child">
                                <li th:each="childMenu : ${menuItem.children}">
                                    <a class="site-page child" th:href="@{${childMenu.status.href}}">
                                        <i th:if="${!#strings.isEmpty(#annotations.getOrDefault(childMenu, 'icon', ''))}"
                                           th:class="${#annotations.getOrDefault(childMenu, 'icon', '')}"></i>
                                        <span th:text="${childMenu.status.displayName}"></span>
                                    </a>
                                </li>
                            </ul>
                        </th:block>
                    </th:block>
                </div>
            </div>
        </th:block>
        <!-- <div class="menus_items">
            <div class="menus_item">
                <a class="site-page" href="javascript:void(0);" rel="external nofollow">
                    <span>文章</span>
                
                </a>
                <ul class="menus_item_child">
                    <li>
                        <a class="site-page child" href="/archives">
                            <i class="iconfont icon-list-ul"></i>
                            <span>文章归档</span>
                        </a>
                    </li>
                    <li>
                        <a class="site-page child" href="/categories">
                            <i class="iconfont icon-folder-open"></i>
                            <span>全部分类</span>
                        </a>
                    </li>
                    <li>
                        <a class="site-page child" href="/tags">
                            <i class="iconfont icon-tags"></i>
                            <span>全部标签</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div> -->
        <span class="sidebar-menu-item-title">标签</span>
        <div class="card-widget card-tags card-archives card-webinfo card-allinfo"
             th:with="tags = ${tagFinder.listAll()}">
            <div class="item-headline"><i class="iconfont icon-tags"></i><span>标签</span></div>
            <div class="card-tag-cloud">
                <a style="font-size:14.3px;color:#d3d3d3" th:each="tag : ${tags}"
                   th:href="@{${tag.status.permalink}}"
                   th:title="${tag.spec.displayName}">
                    <!-- 角标 -->
                    [[${tag.spec.displayName}]]<sup th:text="${tag.status.visiblePostCount}"></sup>
                </a>
            </div>
        </div>
    </div>
</div>
</html>
