header.html

{{ $home := .Site.GetPage "home" }}
{{ $section := .Section }}
{{ $current := . }}

<header class="main-navigation {{ if .IsHome }}main-navigation--transparent{{ end }}">
    <nav class="main-navigation-wrapper container-l">
        <div class="main-navigation-header">
            <a id="brand" href="{{ $home.Permalink }}" aria-label="logotype">
                <span class="logo">{{ with resources.Get "inline_images/istio-logo-with-brand.svg" }}{{ .Content | safeHTML }}{{ end }}</span>
            </a>

            <button id="hamburger" class="main-navigation-toggle" aria-label="Open navigation">
                {{ partial "icon.html" "menu-hamburger" }}
            </button>

            <button id="menu-close" class="main-navigation-toggle" aria-label="Close navigation">
                {{ partial "icon.html" "menu-close" }}
            </button>
        </div>

        <form id="search-form" class="search" name="cse" role="search">
            {{ if .Site.Data.args.preliminary }}
                <input type="hidden" name="cx" value="{{ .Site.Data.args.preliminary_search_engine_id }}" />
            {{ else if or .Site.Data.args.archive .Site.Data.args.archive_landing }}
                <input type="hidden" name="cx" value="{{ .Site.Data.args.archive_search_engine_id }}" />
            {{ else }}
                <input type="hidden" name="cx" value="{{ .Site.Data.args.main_search_engine_id }}" />
            {{ end }}
            <input type="hidden" name="ie" value="utf-8" />
            <input type="hidden" name="hl" value="{{ .Page.Lang }}" />
            <input type="hidden" id="search-page-url" value="{{ "/search" | relLangURL }}" />
            <input id="search-textbox" class="search-textbox form-control" name="q" type="search" aria-label='{{ i18n "search" }}' placeholder='{{ i18n "search_label" }}' />
            <button id="search-close" title='{{ i18n "search_cancel" }}' type="reset" aria-label='{{ i18n "search_cancel" }}'>{{ partial "icon.html" "menu-close" }}</button>
        </form>

        <div id="header-links" class="main-navigation-links-wrapper">
            <ul class="main-navigation-links">
                {{ $currentPage := .}}
                {{ range .Site.Menus.main }}
                    {{ $active := or (eq $currentPage.Title .Name) (or ($currentPage.HasMenuCurrent "main" .) ($currentPage.IsMenuCurrent "main" .)) }}
                    {{ if .HasChildren }}
                        <li class="main-navigation-links-item">
                            <a {{ if ne .URL "" }}href="{{ .URL | relLangURL  }}"{{end}} class="main-navigation-links-link has-dropdown {{ if $active }}active{{ end }}">
                                <span>{{ .Name }}</span>
                                {{ partial "icon.html" "dropdown-arrow" }}
                            </a>

                            <ul class="main-navigation-links-dropdown">
                                {{ range .Children }}
                                    <li class="main-navigation-links-dropdown-item">
                                        <a href="{{ .URL | relLangURL }}" class="main-navigation-links-link">{{ .Name }}</a>
                                    </li>
                                {{ end }}
                            </ul>
                        </li>
                    {{ else }}
                        <li class="main-navigation-links-item">
                            <a {{ if ne .URL "" }}href="{{ .URL | relLangURL }}"{{end}} class="main-navigation-links-link {{ if $active }}active{{ end }}">
                                <span>{{ .Name }}</span>
                            </a>
                        </li>
                    {{ end }}
                {{ end }}
            </ul>

            <div class="main-navigation-footer">
                <button id="search-show" class="search-show" title='{{ i18n "search" }}' aria-label='{{ i18n "search_label" }}'>{{ partial "icon.html" "magnifier" }}</button>
                <a href='{{ "/docs/setup/getting-started" | relLangURL }}' class="btn btn--primary" id="try-istio">{{ i18n "try_istio" }}</a>
            </div>
            
        </div>
        
    </nav>
</header>