server/views/home.twig

{% extends "./base.twig" %}
{% block title %}Accueil{% endblock %}
{% block head %}{% endblock %}
{% block content %}
<div class="nav">
  <div
    id="nav-enabler"
    class="nav-item nav-mobile-enabler">
    <div class="nav-icon">
      <i class="fas fa-ellipsis-h"></i>
    </div>
    <div class="nav-item-content">
      <div id="nav-enabler-text" class="nav-title">
        Afficher le menu
      </div>
      <div class="nav-access">
        <i
          id="nav-enabler-icon"
          class="fas fa-chevron-down">
        </i>
      </div>
    </div>
  </div>
  <div id="nav-content">
    <div class="nav-item" id="nav-all">
      <div class="nav-icon">
        <svg
          aria-hidden="true"
          focusable="false"
          role="img"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512 512">
          <path fill="currentColor" d="M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z"></path>
        </svg>
      </div>
      <div class="nav-item-content">
        <div class="nav-title">
          Toutes
        </div>
        <div class="nav-access">
          <i class="fas fa-chevron-right"></i>
        </div>
      </div>
    </div>
    {% for tag in tags %}
      <div class="nav-item" data-tag-id="{{ tag._id }}">
        <div class="nav-icon">
          <svg
            aria-hidden="true"
            focusable="false"
            role="img"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 {{ tag.icon.width }} {{ tag.icon.height }}">
            <path
              fill="currentColor"
              d="{{ tag.icon.path }}"
            ></path>
          </svg>
        </div>
        <div class="nav-item-content">
          <div class="nav-title">
            {{ tag.name }}
          </div>
          <div class="nav-access">
            <svg
              aria-hidden="true"
              focusable="false"
              data-prefix="fas"
              data-icon="chevron-right"
              class="svg-inline--fa fa-chevron-right fa-w-10"
              role="img"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 320 512">
              <path
                fill="currentColor"
                d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"
              ></path>
            </svg>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
</div>
<div class="mosaic" id="mosaic">
  <div class="mosaic-header" id="mosaic-header"></div>
  <div class="card-container"></div>
</div>
{% endblock %}

{% block scripts %}
<script>
  let tags = JSON.parse(`{{ tagsJSON }}`)
  let organizations = JSON.parse(`{{ organizationsJSON }}`)
</script>
<script src="/assets/js/home.js"></script>
{% endblock %}