<header class="header">
    <nav class="header-nav">

        {{ if isset .Site.Params "avatarurl" }}
        <div class="avatar">
            <a href="{{ .Site.BaseURL }}">
                <img src='{{ .Scratch.Get "avatarImgSrc" }}' alt="{{ .Site.Params.AvatarAltText|default "avatar" }}">
            </a>
        </div>
        {{ end }}

        <div class="nav-title">
            <a class="nav-brand" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
        </div>

        <div class="nav-links">
            {{ range .Site.Menus.main }}
            <div class="nav-link">
                <a href="{{ .URL | absURL }}" aria-label="{{ .Identifier }}" {{ if .Params.NewPage -}}target="_blank" {{- end -}}>
                    {{- .Pre | safeHTML }} {{ .Name }} {{ .Post | safeHTML -}}
                </a>
            </div>
            {{ end }}

            <span class="nav-icons-divider"></span>
            <div class="nav-link dark-theme-toggle">
                <span class="sr-only dark-theme-toggle-screen-reader-target">theme</span>
                <a aria-hidden="true" role="switch">
                    <span class="theme-toggle-icon" data-feather="moon"></span>
                </a>
            </div>

            <div class="nav-link" id="hamburger-menu-toggle">
                <span class="sr-only hamburger-menu-toggle-screen-reader-target">menu</span>
                <a aria-checked="false" aria-labelledby="hamburger-menu-toggle" id="hamburger-menu-toggle-target" role="switch">
                    <span data-feather="menu"></span>
                </a>
            </div>

            <!-- For mobile -->
            <ul class="nav-hamburger-list visibility-hidden">
                {{ range .Site.Menus.main }}
                <li class="nav-item">
                    <a href="{{ .URL | absURL }}" {{ if .Params.NewPage -}} target="_blank"{{- end -}}>
                        {{- .Pre | safeHTML }} {{ .Name }} {{ .Post | safeHTML -}}
                    </a>
                </li>
                {{ end }}
                <li class="nav-item dark-theme-toggle">
                    <span class="sr-only dark-theme-toggle-screen-reader-target">theme</span>
                    <a role="switch">
                        <span class="theme-toggle-icon" data-feather="moon"></span>
                    </a>
                </li>
            </ul>

        </div>
    </nav>
</header>
