<!DOCTYPE html> <html lang=“en”>

<head>
  <meta charset="utf-8">
  <meta name="description" content="<%= name %> GraphQL documentation">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title><%= title || name %></title>
  <link rel="stylesheet" href="<%= base_url %>/assets/style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/3.2.2/anchor.min.js"></script>
  <script>

  // Add anchors on DOMContentLoaded
  document.addEventListener("DOMContentLoaded", function(event) {
    anchors.options = {
      placement: 'left',
      visible: 'hover',
      icon: '¶'
    };
    anchors.add('h2, h3, h4, h5, h6, .anchored');
  });

  </script>
</head>
<body>

  <div id="wrap">
    <div id="header">
    </div>
    <div id="sidebar">
      <%= include.('sidebar.html') %>
    </div>
    <div id="content">

      <%= contents %>

    </div>

    <!-- mobile only -->
    <div id="mobile-header">
      <a class="menu-button" onclick="document.body.classList.toggle('sidebar-open')"></a>
      <a class="logo" href="<%= base_url.present? ? base_url : '/' %>">

      </a>
    </div>
    <div id="mobile-shade"></div>

  </div>

</body>

</html>