<header>
    <div class="brand">
        <div id="sidebar_btn">
            <svg id="menu_icon" width="26px" height="26px" viewBox="0 0 24 24">
                {{- partial "svg/feather.html" "menu" -}}
            </svg>
        </div>

        <div>
            <a href="{{ .Site.Home.RelPermalink }}">
                {{- with (.Scratch.Get "params").navbar_title }}
                    {{- . | safeHTML -}}
                {{- end -}}
            </a>
        </div>
    </div>

    <div class="toolbox">
        <div id="theme_tool">
            <svg id="dark_mode_btn" class="toolbox-btn" width="18px" height="18px" viewBox="0 0 24 24">
                {{- partial "svg/feather.html" "sun" -}}
            </svg>
            <svg id="light_mode_btn" class="toolbox-btn" width="18px" height="18px" viewBox="0 0 24 24">
                {{- partial "svg/feather.html" "moon" -}}
            </svg>
        </div>

        {{ if (.Scratch.Get "params").enable_site_search }}
            <div id="search_tool">
                <svg id="search_btn" class="toolbox-btn" width="18px" height="18px" viewBox="0 0 24 24">
                    {{- partial "svg/feather.html" "search" -}}
                </svg>
                {{- partial "search-menu.html" -}}
            </div>
        {{ end }}

        {{ if .Site.IsMultiLingual }}
            <div id="translation_tool" class="dropdown-wrapper pure-menu pure-menu-horizontal toolbox-btn">
                <ul class="pure-menu-list">
                    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
                        <div class="dropdown-btn pure-menu-link">
                            <svg width="18px" height="18px" viewBox="0 0 24 24">
                                {{- partial "svg/feather.html" "globe" -}}
                            </svg>
                            <span class="dropdown-desc">{{ .Site.Language.LanguageName }}</span>
                        </div>
                        <ul class="pure-menu-children">
                            {{ range .Site.Home.AllTranslations }}
                            <li class="pure-menu-item">
                                <a href="{{ .Permalink }}" class="pure-menu-link">{{ .Language.LanguageName }}</a>
                            </li>
                            {{ end }}
                        </ul>
                    </li>
                </ul>
            </div>
        {{ end }}
    </div>
</header>
