squirrel/layouts/partials/header.html

{{- $header     := .Site.Params.header }}
{{- $links      := index $header "links" }}
{{ $template := resources.Get "scss/header.scss" }}
{{ if $template }}
{{ $index := $template | resources.ExecuteAsTemplate "css/header.scss" . | resources.ToCSS (dict "outputStyle" "compressed") | fingerprint }}
<link rel="stylesheet" type="text/css" href="{{ $index.RelPermalink }}">
{{ end }}
{{ $template := resources.Get "scss/progressbar.scss" }}
{{ if $template }}
{{ $progressbar := $template | resources.ExecuteAsTemplate "css/progressbar.scss" . | resources.ToCSS (dict "outputStyle" "compressed") | fingerprint }}
<link rel="stylesheet" type="text/css" href="{{ $progressbar.RelPermalink }}">
{{ end }}
<div class="progress"></div>
<header class="header" id="header">
    <div class="header-container">
        <a class="home" href="/#"><img id="logo" class="logo" src="{{ .Site.Params.logo }}" alt="Logo"></a>
        <div class="header-items" id="header-items">
            {{- range $links}}
                {{ if .links }}
                    <div class="header-item dropdown">
                        <button class="dropbtn">{{ .text }} 
                            <i class="icon-caret-down"></i>
                        </button>
                        <div class="dropdown-content">
                            {{- range .links}}
                                <a href="{{ .url }}">{{ .text }}</a>
                            {{- end }}
                        </div>
                    </div>
                {{ else }}
                    <a class="header-item" href="{{ .url }}">{{ .text }}</a>
                {{ end }}
            {{- end }}
            {{ if $header.button }}
                {{- range $header.button }}
                    {{ partial "components/button.html" . }}
                {{- end }}
            {{ end }}
        </div>
    </div>
    <a href="javascript:void(0);" id="menu-icon" class="menu-icon" onclick="unfoldHeader()">&#9776;</a>
</header>
<script src="/js/header.js"></script>
<script src="/js/progress.js"></script>