<nav class="nav">
  <div class="nav-left">
    <a class="nav-item is-brand" href="{{ site.url }}">
      <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
    </a>
  </div>

  <div class="nav-center">
    <a class="nav-item" href="{{ site.github }}">
      <span class="icon">
        <i class="fa fa-github"></i>
      </span>
    </a>
    <a class="nav-item" href="{{ site.twitter }}">
      <span class="icon">
        <i class="fa fa-twitter"></i>
      </span>
    </a>
  </div>

  <span id="nav-toggle" class="nav-toggle">
    <span></span>
    <span></span>
    <span></span>
  </span>

  <div id="nav-menu" class="nav-right nav-menu">
    <a class="nav-item {% if page.route == 'index' %}is-active{% endif %}" href="{{ site.url }}/">
      Home
    </a>
    <a class="is-hidden nav-item {% if page.route == 'templates' %}is-active{% endif %} {% if page.layout == 'templates' %}is-active{% endif %}" href="{{ site.url }}/templates/">
      <span>Templates</span>
      <span class="tag is-small is-success">New!</span>
    </a>
    <a class="nav-item {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.documentation }}">
      Documentation
    </a>
    <a class="nav-item {% if page.route == 'blog' %}is-active{% endif %}" href="{{ site.url }}/blog/">
      Blog
    </a>

    <div class="nav-item">
      <div class="field is-grouped">
        <p class="control">
          <a id="twitter"
            class="button"
            data-social-network="Twitter"
            data-social-action="tweet"
            data-social-target="{{ site.url }}"
            target="_blank"
            href="https://twitter.com/intent/tweet?text={{ site.title | urlencode }}&url={{ site.url }}&via=jgthms">
            <span class="icon">
              <i class="fa fa-twitter"></i>
            </span>
            <span>Tweet</span>
          </a>
        </p>
        <p class="control">
          <a class="button is-primary" href="{{ site.download }}">
            <span class="icon">
              <i class="fa fa-download"></i>
            </span>
            <span>Download</span>
          </a>
        </p>
      </div>
    </div>
  </div>
</nav>
