<div id="footer-post-container">
  <div id="footer-post">

    <div id="nav-footer" style="display: none">
      <ul>
        {{ range .Site.Menus.main }} 
          <li><a href="{{ .URL }}">{{ .Name }}</a></li>
        {{ end }}
      </ul>
    </div>

    {{ if not .Site.Params.tocInline }}
    <div id="toc-footer" style="display: none">
      {{ .TableOfContents }}
    </div>
    {{ end }}

    <div id="share-footer" style="display: none">
      {{ .Scratch.Set "icon_class_name" "fa-lg" }}
      {{ partial "share.html" . }}
    </div>

    <div id="actions-footer">
      <!-- TODO: rewrite the toggle function. hide the others when one menu is displayed -->
        <a id="menu-toggle" class="icon" href="#" onclick="$('#nav-footer').toggle();return false;" aria-label="Menu">
          <i class="fas fa-bars fa-lg" aria-hidden="true"></i> Menu</a>
        {{ if not .Site.Params.tocInline }}
        <a id="toc-toggle" class="icon" href="#" onclick="$('#toc-footer').toggle();return false;" aria-label="TOC">
          <i class="fas fa-list fa-lg" aria-hidden="true"></i> TOC</a>
        {{ end }}
        <a id="share-toggle" class="icon" href="#" onclick="$('#share-footer').toggle();return false;" aria-label="Share">
          <i class="fas fa-share-alt fa-lg" aria-hidden="true"></i> share</a>
        <a id="top" style="display:none" class="icon" href="#" onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');" aria-label="Top of Page">
          <i class="fas fa-chevron-up fa-lg" aria-hidden="true"></i> Top</a>
    </div>

  </div>
</div>
