{{- $icon_width := 20 -}}
{{- $icon_height := 20 -}}
<nav class='navbar is-black' role='navigation' aria-label='main navigation'>
  <div class='navbar-brand'>
    <a 
      href='/'
      class='navbar-item'
      title='home page'
      aria-label='home page'
    >
      <img
        src='/logo.svg'
        width='37'
        height='28'
        title='site logo'
        aria-label='site logo'
      />
    </a><!-- navbar-item -->

    <a
      role='button'
      class='navbar-burger'
      aria-label='menu'
      aria-expanded='false'
      data-target='page-menu'
    >
      <span aria-hidden='true'></span>
      <span aria-hidden='true'></span>
      <span aria-hidden='true'></span>
    </a>
  </div>

  <div id='page-menu' class='navbar-menu'>
    <div class='navbar-start'>
      {{- range $.Site.Data.menu.start -}}
        <a
          href='{{.href}}'
          class='navbar-item {{if eq .id $.Params.page_id}}has-text-weight-bold{{end}}'
          title='{{.help}}'
          aria-label='{{.help}}'
        >
          {{- if .icon -}}
            <img
              src='{{.icon}}'
              class='menu-icon'
              width='{{$icon_width}}'
              height='{{$icon_height}}'
              title='{{.help}}'
              aria-label='{{.help}}'
            />
          {{- end -}}

          {{- if .name -}}
            {{- .name -}}
          {{- end -}}
        </a><!-- navbar-item -->
      {{- end -}}
    </div><!-- navbar-start -->

    <div class='navbar-end has-text-white'>
      {{- range $.Site.Data.menu.end -}}
        <a
          href='{{.href}}'
          class='navbar-item {{if eq .id $.Params.page_id}}is-active{{end}}'
          title='{{.help}}'
          aria-label='{{.help}}'
        >
          {{- if .icon -}}
            <img
              src='{{.icon}}'
              class='menu-icon'
              width='{{$icon_width}}'
              height='{{$icon_height}}'
              title='{{.help}}'
              aria-label='{{.help}}'
            />
          {{- end -}}

          {{- if .name -}}
            {{- .name -}}
          {{- end -}}
        </a><!-- navbar-item -->
      {{- end -}}
    </div><!-- navbar-end -->
  </div><!-- navbar-menu -->
</nav><!-- navbar -->