<header>
<nav class="main" role="navigation">
    <div class="box m4 s12">
        <a href="{{ "/" | relLangURL }}" class="logo">
        {{ .Site.Title }}
        </a>
        <a href="#" onclick="toggle_visibility('nav-top');" class="toggle">
                {{ partial "fontawesome.html" "bars" }}
        </a>
    </div>
    <div class="box m8 s12 m-block hide" id="nav-top">
        <ul>
        <li class="box">
            <a href="{{ relLangURL "/" }}#download">{{ i18n "Download" }}</a>
        </li>
        <li class="box">
            <a href="{{ relLangURL "/" }}#features">{{ i18n "Features" }}</a>
        </li>
        <li class="box">
            <a href="{{ "tutorials" | relLangURL }}">{{ i18n "Tutorials" }}</a>
        </li>
        <li class="box languages">
            <a href="#" onclick="toggle_visibility('nav-lang');">
                {{ partial "fontawesome.html" "language" }} {{partial "fontawesome.html" "angle-down" }}
            </a>
            <ul class="block hide" id="nav-lang">
                    {{ range $.Site.Home.AllTranslations }}
                    <li class="box"><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
                    {{ end }}
            </ul>
        </li>
        <li>
            <a href="{{ relLangURL "/" }}#participation" class="icons" title="Contact" rel="noopener">
                {{ partial "fontawesome.html" "envelope" }}
            </a>
        </li>
        <li>
            <a href="https://git.qaul.org/qaul/qaul" target="_blank" class="icons" title="{{ i18n "QaulRepository" }}" rel="noopener">
                {{ partial "fontawesome.html" "git-square" }}
            </a>
        </li>
        </ul>
    </div>
</nav>
</header>
