blog/themes/editor-hugo/layouts/partials/header.html

<header class="sidenav">
  <div class="is-top">
    <div>
      <!-- Language List -->
      {{ if .IsTranslated }}
      <span class="d-inline-block d-md-none mr-1"><select style="cursor:pointer;background:transparent" class="m-2 border-0 text-uppercase" id="select-language" onchange="location = this.value;">
        {{ $siteLanguages := site.Languages}}
        {{ $pageLang := .Page.Lang}}
        {{ range .Page.AllTranslations }}
        {{ $translation := .}}
        {{ range $siteLanguages }}
        {{ if eq $translation.Lang .Lang }}
        {{ $selected := false }}
        {{ if eq $pageLang .Lang}}
        <option id="{{ $translation.Language }}" value="{{ $translation.Permalink }}" selected>{{ .LanguageName }}
        </option>
        {{ else }}
        <option id="{{ $translation.Language }}" value="{{ $translation.Permalink }}">{{ .LanguageName }}</option>
        {{ end }}
        {{ end }}
        {{ end }}
        {{ end }}
      </select></span>
      {{ end }}

      {{ if site.Params.search }}
      <button class="search-toggle d-inline-block d-md-none" data-toggle="search">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/></svg>
      </button>
      {{ end }}
      <button class="sidenav-toggler d-inline-block {{if eq site.Params.logo_rotate false}}logo-plain{{end}}" data-toggle="sidenav-menu">
        <svg id="toggler-icon" class="toggler-icon" viewBox="0 0 100 100" width="60" onclick="this.classList.toggle('active')"><path class="line top" d="m 30,33 h 40 c 0,0 9.044436,-0.654587 9.044436,-8.508902 0,-7.854315 -8.024349,-11.958003 -14.89975,-10.85914 -6.875401,1.098863 -13.637059,4.171617 -13.637059,16.368042 v 40" /><path class="line middle" d="m 30,50 h 40" /><path class="line bottom" d="m 30,67 h 40 c 12.796276,0 15.357889,-11.717785 15.357889,-26.851538 0,-15.133752 -4.786586,-27.274118 -16.667516,-27.274118 -11.88093,0 -18.499247,6.994427 -18.435284,17.125656 l 0.252538,40" /></svg>
        </button>
    </div>
    {{ if site.Params.logo_rotate }}
    <a class="navbar-brand mr-0" href="https://ODOO4projects.com">
      {{ if site.Params.logo }}
      <img height="{{site.Params.logo_height}}" src="{{ site.Params.logo | absURL}}"
        alt="{{site.Params.logo_text}}">
      {{ else }}
      <span class="h3">{{site.Params.logo_text | markdownify}} <span class="text-primary">.</span></span>
      {{ end }}
    </a>
    {{ else }}
    <a class="navbar-brand plain mr-0" href="{{ site.BaseURL | relLangURL }}">
      {{ if site.Params.logo }}
      <img height="{{site.Params.logo_height}}" src="{{ site.Params.logo | absURL}}"
        alt="{{site.Params.logo_text}}">
      {{ else }}
      <span class="h3">{{site.Params.logo_text | markdownify}} <span class="text-primary">.</span></span>
      {{ end }}
    </a>
    {{ end }}

  </div>
  <div class="d-none d-md-block">
    <ul class="social-links list-unstyled">      
      {{ if site.Params.search }}
      <li class="mb-3">
        <button class="search-toggle" data-toggle="search">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/></svg>
        </button>
      </li>
      {{ end }}
      <li>
        <a href="mailto:{{ site.Params.email }}">
          <svg width="1.15em" height="1.15em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383l-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z"/></svg>
        </a>
      </li>
      <!-- Language List -->
      {{ if .IsTranslated }}
      <li class="mt-3 pt-2"><select style="cursor:pointer" class="m-2 border-0 text-uppercase" id="select-language" onchange="location = this.value;">
        {{ $siteLanguages := site.Languages}}
        {{ $pageLang := .Page.Lang}}
        {{ range .Page.AllTranslations }}
        {{ $translation := .}}
        {{ range $siteLanguages }}
        {{ if eq $translation.Lang .Lang }}
        {{ $selected := false }}
        {{ if eq $pageLang .Lang}}
        <option id="{{ $translation.Language }}" value="{{ $translation.Permalink }}" selected>{{ .LanguageName }}
        </option>
        {{ else }}
        <option id="{{ $translation.Language }}" value="{{ $translation.Permalink }}">{{ .LanguageName }}</option>
        {{ end }}
        {{ end }}
        {{ end }}
        {{ end }}
      </select></li>
      {{ end }}
    </ul>
  </div>
</header>

<div class="sidenav-overlay" data-toggle="sidenav-menu" onclick="document.getElementById('toggler-icon').classList.remove('active')"></div>

<nav class="sidenav-menu flex-column justify-content-between">
  <ul class="w-100 accordion" id="accordionMenu">
    {{ range site.Menus.main }}
    {{ if .HasChildren }}
    <li class="nav-item">
      <a class="nav-link" href="#" type="button" data-toggle="collapse" data-target="#dropdown-menu-02">{{ .Name }}</a>
      <ul id="dropdown-menu-02" class="collapse list-unstyled" data-parent="#accordionMenu">
        {{ range .Children }}
        <li><a href="{{if .Pre}}{{if not $.IsHome}}{{site.BaseURL | relLangURL}}{{end}}{{.Pre}}{{ .URL }}{{else}}{{.URL | relLangURL}}{{end}}">{{ .Name }}</a></li>
        {{ end }}
      </ul>
    </li>
    {{ else }}
    <li class="nav-item">
      <a class="nav-link" href="{{if .Pre}}{{if not $.IsHome}}{{site.BaseURL | relLangURL}}{{end}}{{.Pre}}{{ .URL }}{{else}}{{.URL | relLangURL}}{{end}}">{{ .Name }}</a>
    </li>
    {{ end }}
    {{ end }}
  </ul>
  
  {{ with site.Params.social }}
  <ul class="social-links list-unstyled list-inline mt-5">
    {{ range . }}
    <li class="list-inline-item"><a href="{{.link}}" title="{{.title}}">
      <i class="{{.icon}}"></i>
    </a></li>
    {{ end }}
  </ul>
  {{ end }}
</nav>

{{ if site.Params.search }}
<div class="search-block">
  <div data-toggle="search-close">
    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="text-primary" viewBox="0 0 16 16"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>
  </div>
  <form action="{{ `search`| relLangURL }}" method="GET">
    <input id="search-field" name="s" type="search" placeholder="{{ i18n `search_placeholder`}}" class="text-center" aria-label="search-query">
  </form>
</div>
{{ end }}