<section

class="pan-layout-left"
{% if site.left_side %}
style="
{% if site.left_side.background_image %}
background-image: url({{ site.left_side.background_image }});
{% endif %}
{% if site.left_side.text_color %}
color: {{ site.left_side.text_color }};
{% endif %}
"
{% endif %}

>

<section
  class="pan-layout-left__overlay"
  {% if site.left_side %}
  style="{% if site.left_side.background_color %}background-color: {{ site.left_side.background_color }} !important;{% endif %}"
  {% endif %}
></section>
<div class="pan-layout-left__top">
  <div class="pan-layout-left__avatar">
    {% if site.avatar %}
    <a href="{{ '/' | relative_url }}">
      <img src="{{ site.avatar }}" alt="{{ site.title | default: site.github.owner_name }}">
    </a>
    {% else if site.github.owner_gravatar_url %}
    <a href="{{ '/' | relative_url }}">
      <img src="{{ site.github.owner_gravatar_url }}" alt="{{ site.title | default: site.github.owner_name }}">
    </a>
    {% else %}
    <a href="{{ '/' | relative_url }}">
      <img src="https://secure.gravatar.com/avatar/?d=mm&r=g&s=150" alt="">
    </a>
    {% endif %}
  </div>
  <div class="pan-layout-left__info">
    <h1 class="pan-layout-left__title">
      {{ site.title | default: site.github.owner_name }}
    </h1>
    {% if site.subtitle %}
    <h3 class="pan-layout-left__subtitle">
      {{ site.subtitle }}
    </h3>
    {% endif %}
  </div>
</div>
<div class="pan-layout-left__middle">
  {% if site.menu %}
  <ul class="pan-layout-left__menu">
    {% for menu in site.menu %}
    <li data-menu-link="{{ menu.link }}">
      <a href="{{ menu.link | relative_url }}">{{ menu.text }}</a>
    </li>
    {% endfor %}
  </ul>
  {% endif %}
</div>
<div class="pan-layout-left__bottom">
  <div class="pan-layout-left__small">
    <span>GET IN TOUCH</span>
  </div>
  <div class="pan-layout-left__social">
    {% if site.social_icons %}
    <ul>
      {% for social in site.social_icons %}
      {% if social.icon %}
      <li><a target="_blank" href="{{ social.link }}"><i class="{{ social.icon }}"></i></a></li>
      {% endif %}
      {% endfor %}
    </ul>
    {% endif %}
  </div>
</div>
<div
  class="pan-layout-left__close"
  {% if site.left_side %}
  style="{% if site.left_side.close_button_color %}color: {{ site.left_side.close_button_color }} !important;{% endif %}"
  {% endif %}
>
  <i class="fa fa-fw fa-times"></i>
</div>

</section>