

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="{% include 'madoc/logo64.html' %}">
  <style>
    {% include css_style %}
    {% include "madoc/pygments.css" %}
  </style>
</head>

<body>
  <script>

    let showMenu = true
    let screenIsSmall = false
    let lastDisplayed = 1
    let lastPosition = 0

    function isScreenSmall(){
        if (window.screen.width < 700) {
          screenIsSmall = true
          if (showMenu){hideAll()}
        }else {
          screenIsSmall = false
          display(lastDisplayed)
        }
    }
    addEventListener("resize", (event) => {});
    onresize = (event) => {isScreenSmall()};


    function switchMenu() {
      showMenu = !showMenu
      if (showMenu) {
        lastPosition = document.documentElement.scrollTop || document.body.scrollTop
        document.getElementById("sideNav").style.width = "400px";
        document.getElementById("main").style.marginLeft = "400px";
        console.log(lastPosition)
        if (screenIsSmall){
          hideAll()
        }
      } else {
        document.getElementById("sideNav").style.width = "0";
        document.getElementById("main").style.marginLeft = "0";
        if (screenIsSmall){
          display(lastDisplayed)
        }
      }
    }

    function hideAll() {
      let allContents = document.getElementsByClassName("content")
      for (var i=0;i<allContents.length;i++) {
        allContents[i].hidden = true
      }
    }

    function display(index="no index") {
      hideAll()
      let selectedContent = document.getElementById(`content-${index}`)
      selectedContent.hidden = false
      if (index === lastDisplayed){
        window.scrollTo(0, lastPosition);
      }

      lastDisplayed = index

      let allButtons = document.getElementsByClassName("button")
      for (var i=0;i<allButtons.length;i++) {
        allButtons[i].classList.remove("button-selected")
      }
      let selectedButton = document.getElementById(`button-${index}`)
      selectedButton.classList.add("button-selected")
      if (screenIsSmall) {
        document.getElementById("sideNav").style.width = "0";
        document.getElementById("main").style.marginLeft = "0";
        showMenu = false
      }
    }
  </script>

  <div id="sideNav" class="sidenav">
    <h2 id="tempTitle" class="menu-item">{{ title }}</h2>
    <div id="meunItems" class="menu-item">
      {% for page in pages %}
      <button class="button menu-item tooltip" id="button-{{loop.index}}" onclick=display({{loop.index}})>
        {{page.name}}
        <span class="tooltip-content">{{ page.name }}</span>
      </button>
      {% endfor %}

      {% if has_source_files and source_files_zip %}
      <hr>
      <div class="menu-item after-menu">
        <a href="{{ source_files_zip }}" download="madoc_sources.zip">Download source files (ZIP)</a>
      </div>
      {% endif %}

      <div class="menuWedge"></div>
    </div>
  </div>

  <span class="openButton" onclick="switchMenu()">&#9776;</span>

  <div id="main">
    <div id="content">
      {% for page in pages %}
      <div id="content-{{ loop.index }}" class="content" hidden>
        {{ page.content | safe }}
      </div>

      {% endfor %}
    </div>

  </div>
  <script>
    isScreenSmall()
    if (screenIsSmall & showMenu){
      hideAll()
    }else {
      display(1)
    }
  </script>

</body>

</html>
<!-- Generated by madoc :: https://github.com/byoso/madoc :: Vincent Fabre -->