{% assign recent_release_post = site.categories['Core'].first %}
{% assign url_parts = page.url | split: '/' %}
{% assign root = url_parts[1] %}

<div class="grid-wrapper">
  <div class="grid">
    <div class="grid__item three-tenths lap-two-sixths palm-one-whole ha-title">
      <a href="/" class="site-title">
        <div class="logo"></div>
      </a>
      <a class="release-date" href="{{ recent_release_post.url }}" title="Latest version {{ site.current_major_version }}.{{
        site.current_minor_version }}.{{ site.current_patch_version }} released {{ site.date_released | date: "%B %e, %Y" }}">
        {{ site.current_major_version }}.{{
          site.current_minor_version }}.{{ site.current_patch_version }}
      </a>
    </div>

    <div class="grid__item seven-tenths lap-four-sixths palm-one-whole">
      <nav>
        <input type="checkbox" id="toggle" />
        <label
          for="toggle"
          class="toggle"
          data-open="Main Menu"
          data-close="⨉"
        ></label>
        <ul class="menu pull-right">
          <li><a {% if root == 'getting-started' or root == 'installation' %}class="active"{% endif %} href="/installation/">Getting started</a></li>
          <li>
            <a {% if root == 'docs' or root == 'dashboards' or root == 'voice_control' or root == 'common-tasks' %}class="active"{% endif %} href="/docs/">Documentation {% icon "mdi:chevron-down" %}</a>
            <ul>
              <li><a href="/installation/">{% icon "simple-icons:homeassistant" %} Installation</a></li>
              <li><a href="/docs/automation/">{% icon "mdi:robot-happy" %} Automations</a></li>
              <li><a href="/dashboards/">{% icon "mdi:gauge" %} Dashboards</a></li>
              <li><a href="/voice_control/">{% icon "mdi:comment-processing-outline" %} Voice assistants</a></li>
              <li><a href="/docs/organizing/">{% icon "mdi:view-grid" %} Device organization</a></li>
              <li><a href="/docs/energy/">{% icon "mdi:solar-power-variant" %} Energy management</a></li>
              <li><a href="/docs/configuration/">{% icon "mdi:cog" %} Advanced configuration</a></li>
            </ul>
          </li>
          <li><a {% if root == 'integrations' %}class="active"{% endif %} href="/integrations/">Integrations</a></li>
          <li><a {% if root == 'blog' %}class="active"{% endif %} href="/blog/">Blog</a></li>
          <li><a {% if root == 'help' %}class="active"{% endif %} href="/help/">Need help?</a></li>
          <li>
            <div class="docsearch" id="docsearch"></div>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>