sossunVerkkosivut/templates/layout.html

<!DOCTYPE html>

{# Macro to build the list of navbar items #}
{% macro navbarItems() -%}
  {% for item in navbar %}
    <a href="{{item.url}}"
      class="navbarItem
      {% if active == loop.index0 %}
        active
      {% endif %}">
      {{item.title}}
    </a>
  {% endfor %}
{%- endmacro%}

{# Macro to get the title of the currently active tab #}
{% macro activeTitle() -%}
  {% if active is defined %}
    {{ navbar[active].title}}
  {% endif %}
{%- endmacro%}

<html lang="{{ lang }}">
  <head>
    {% block head %}
    <meta charset="utf-8">
    <link rel="stylesheet" href="/static/style.css">
    <link rel="icon" href="/static/sossulogo-64x64.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Savolaisen Osakunnan Soitannollinen Seura SOSSu ry</title>
    {% endblock %}
  </head>

  <body>
    <div id="website">
      <div id="header" class="shadow">
        <img id="headerPicture" src="/static/{{ pictureId }}">
        <img id="sossuLogo" src="/static/sossulogo.svg">
      </div>

      <div id="navbar" class="shadow">
        <div id="navbarInner">
          <div id="navbarLinks">
            {{ navbarItems() }}
          </div>
          <div id="mobileButton" class="navbarItem"><img src="/static/menu.svg"></div>
          <div id="mobileTitle" class="navbarItem active">{{ activeTitle() }}</div>
          {% if lang == "fi" %}
            <a href="/main" class="navbarItem"><img src="/static/flags/english.svg"></a>
          {% elif lang == "en" %}
            <a href="/" class="navbarItem"><img src="/static/flags/finnish.svg"></a>
          {% endif %}
        </div>

        <div id="mobileLinks">
          {{ navbarItems() }}
        </div>
      </div>

      <div id="centerbox" class="shadow">{% block content %}{% endblock %}</div>

      <footer id="footer" class="shadow">
        <p>Savolaisen Osakunnan Soitannollinen Seura SOSSu ry</p>
        <p>hallitus [at] sossu-orkesteri.fi</p>
        <p>Mannerheimintie 5 A</p>
        <p>00100 Helsinki</p>
        <a href="https://www.instagram.com/sossuorkesteri/"><img class="social-media-logos" src="/static/instagram.svg"></a>
        <a href="https://www.facebook.com/SOSSu.orkesteri"><img class="social-media-logos" src="/static/facebook.svg"></a>
      </footer>
    </div>

    <script>
      var mobileButton = document.getElementById("mobileButton");
      var mobileLinks = document.getElementById("mobileLinks");

      mobileButton.addEventListener("click", () => {
        if (mobileLinks.style.display === "grid") {
          mobileLinks.style.display = "none";
          mobileButton.classList.remove("active");
        } else {
          mobileLinks.style.display = "grid";
          mobileButton.classList.add("active");
        }
      });
    </script>
  </body>
</html>