colormaticwebsite/component/navbar.html

<nav>
  <script>
var pages = document.getElementById("pages");
function toggle_modal_menu() {
  pages.classList.toggle("hidden");
}
  </script>
  <a href="/" class="title nav-left">Colormatic</a>
  <img src="/img/colormatic_logo.svg" role="img" alt="Colormatic Logo" class="nav-center colormatic-logo" />
  <div class="nav-right inline">
    <ul class="responsive-hidden">
      <li><a href="/zakarya">Zakarya</a></li>
      <li><a href="/studios">Colormatic Studios</a></li>
      <li><a href="/about">About</a></li>
    </ul>
    <a href="https://git.colormatic.org" class="git-icon" target="_blank" rel="noopener noreferrer"><img src="/img/git-icon.svg" role="img" alt="Colormatic Git" /></a> <!-- Official git logo: https://git-scm.com/downloads/logos -->
    <a onclick="toggle_modal_menu();" class="responsive menu-button"><img src="/img/menu.svg" role="img" alt="Menu" /></a> <!-- Bootstrap list icon: https://icons.getbootstrap.com/icons/list -->
  </div>
</nav>
<span onclick="toggle_modal_menu();" id="pages" class="modalbg hidden">
  <div>
    <button class="close"><img src="/img/close.svg" role="img" alt="Close"></button> <!-- Bootstrap x icon: https://icons.getbootstrap.com/icons/x -->
    <ul>
      <li><a href="/zakarya">Zakarya</a></li>
      <li><a href="/studios">Colormatic Studios</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </div>
</span>