<div id="search-container">
  <div class="search-wrapper">
    <div class="search-form">
      <input type="text" class="search-field" placeholder="Search...">
      <svg class="icon-remove-sign"><use xlink:href="#icon-close"></use></svg>
      <ul class="search-results search-list"></ul>
    </div>
  </div>
</div>

<div id="fade" class="overlay"></div>

<nav id="navbar">
  <a id="slide" class="slideButton fade">
    <svg id="open" class="icon-menu"><use xlink:href="#icon-menu"></use></svg>
    <svg id="close" class="icon-menu"><use xlink:href="#icon-close"></use></svg>
  </a>
  <a id="search" class="dosearch">
    <svg class="icon-menu icon-search"><use xlink:href="#icon-search"></use></svg>
  </a>
</nav>

<aside id="sidebar">
<nav id="navigation">
  <h2>MENU</h2>
  <ul>
    {% for link in site.links %}
      {% if link.external %}
        <li><a style="color: {{ link.color }}" href="{{ link.url }}"><b>{{ link.title }}</b></a></li>
      {% else %}
        <li><a class="document-load" href="{{ site.baseurl }}{{ link.url }}"><b>{{ link.title }}</b></a></li>
      {% endif %}
    {% endfor %}
    <li><a style="color: crimson" href="{{ site.baseurl }}/feed.xml" title="Atom/RSS feed"><b>Feed RSS</b></a></li>
  </ul>
</nav>
</aside>
