<div style="display:none">
 <div class="sidenav-header">
  <p class='sidenav-header-title'>YOUR APPS</p>
  <p class="sidenav-header-link"><a href="allApps" data-id="allApps" class="orange iframeLink">see all</a></p>
</div>
<div class="installed-apps sidenav-items">
  <%
    var hasGithub = false;
    for (var i = 0; i < connectors.length; i++) {
      if (connectors[i].repository.handle === 'github' && connectors[i].authed) {
        hasGithub = true;
        break
      }
    }
  %>
  <% if (hasGithub) { %>
    <a href="#" class="sync-button action-button" data-provider="github">
      Sync GitHub
    </a>
  <% } %>
  <ul>
    <% for (var i = 0; i < myMap.length; i++) { %>
      <li>
        <p><a href="#" class="iframeLink" data-id="Explore-<%= myMap[i].id %>"><%= myMap[i].title %></a></p>
      </li>
    <% } %>
  </ul>
  <% if (myMap.length === 0) { %>
    <p><a class="orange" href="ideal#Ideal-BuildAnApp">Build an App!</a></p>
  <% } %>
</div>

<div class="sidenav-header">
  <p class='sidenav-header-title'>INSTALLED APPS</p>
  <p class="sidenav-header-link"><a href="allApps" data-id="allApps" class="orange iframeLink">see all</a></p>
  <p class="sidenav-header-link"><a href="meGallery#AppGallery-Featured" >masonry</a></p>
</div>

<div class="installed-apps sidenav-items">
  <ul>
    <% for (var i=0; i<map.length; i++) { %>
      <li>
        <p><a href="#" class="iframeLink" data-id="Explore-<%= map[i].id %>"><%= map[i].title %></a></p>
      </li>
    <% } %>
  </ul>
  <p><a class="orange" href="appGallery#AppGallery-Featured">Get more apps!</a></p>
</div>

<div class="sidenav-header">xxx
  <p class='sidenav-header-link'><a href="connect" data-id="connect" class="orange iframeLink">CONNECT MORE SERVICES</a></p>
</div>
<div class="sidenav-items unconnected-services">
  <% for (var i = 0; i < connectors.length; i++) { %>
    <% if (!connectors[i].authed) { %><a href="/auth/<%=connectors[i].repository.handle %>" data-provider='<%= connectors[i].repository.handle %>'
        data-width='<%=connectors[i].repository.oauthSize.width%>' data-height='<%=connectors[i].repository.oauthSize.height%>' class="oauthLink">
    <img src="img/icons/32px/<%= connectors[i].repository.handle %>.png"></a>
    <% } %>
  <% } %>
</div>

<div class="sidenav-header">
  <p class='sidenav-header-title'>YOUR CONNECTED SERVICES</p>
</div>
<div class="sidenav-items connected-services">
  <% for (var i = 0; i < connectors.length; i++) { %>
    <% if (connectors[i].authed) { %><img src="img/icons/32px/<%= connectors[i].repository.handle %>.png"><% } %>
  <% } %>
</div>
</div>

