app.html

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
      rel="stylesheet"
    />
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
  <script>
    window.onload = () => {
      const navbar = document.getElementsByClassName("navbar_right")[0]
        .classList;
      document.querySelector("#toggle").addEventListener("click", () => {
        if (navbar.contains("hidden")) {
          return navbar.remove("hidden");
        }
        navbar.add("hidden");
      });
    };
  </script>
</html>