title: How does the number of class count on my page and display it in my menu?
body: <p>I have a site with Drupal 8 and I have created contextual views to display the tasks to do for the user. It works, but I need a counter in my menu.</p>
  
  <p>Each type of task have a class :</p>
  
  <ul>
  <li><p>For red tasks, there is the class <code>.task-danger</code></p></li>
  <li><p>For orange tasks, there is the class <code>.task-warning</code></p></li>
  <li><p>For green tasks, there is the class <code>.task-success</code></p></li>
  </ul>
  
  <p>I only have to count the orange and red tasks to display them in the badges of the same color of the menu.</p>
  
  <p>The menu is present on all the pages of the store, so the counter must also be displayed on the pages. Not only on the task page.</p>
  
  <p>Is there a way to do this with TWIG ?</p>
  
  <p>I found the following documentation, but how to use it :</p>
  
  <p><a href="https://twig.symfony.com/doc/3.x/functions/include.html" rel="nofollow noreferrer">https://twig.symfony.com/doc/3.x/functions/include.html</a></p>
  
  <p><a href="https://twig.symfony.com/doc/3.x/filters/length.html" rel="nofollow noreferrer">https://twig.symfony.com/doc/3.x/filters/length.html</a></p>
  
  <p>Here is the page with the list of tasks :</p>
  
  <p><a href="https://i.stack.imgur.com/OGyWi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OGyWi.png" alt="enter image description here"></a></p>
  
  <p>Each task corresponds to a view block.</p>
  
  <p>commerce-store--professionnel--tasks.html.twig :</p>
  
  <pre><code>{{ drupal_view('boutique_page_liste_des_taches_aucun_produit', 'block_1') }}
  {{ drupal_view('boutique_page_liste_des_taches_aucune_variation', 'block_1') }}
  {{ drupal_view('boutique_page_liste_des_taches_commande', 'block_1') }}
  {{ drupal_view('boutique_page_liste_des_taches_mode_de_livraison', 'block_1') }}
  {{ drupal_view('boutique_page_liste_des_taches_passerelle_de_paiement', 'block_1') }}
  {{ drupal_view('boutique_page_liste_des_taches_produit_non_publie', 'block_1') }}
  {{ drupal_view('boutique_page_liste_des_taches_role_marchand', 'block_1') }}
  </code></pre>
  
  <p>Here is the menu of my page with the task counter (orange and red badge) :</p>
  
  <p><a href="https://i.stack.imgur.com/w7Ky2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w7Ky2.png" alt="enter image description here"></a></p>
  
  <p>commerce-store--professionnel--menu.html.twig :</p>
  
  <pre><code>&lt;nav role="navigation" aria-labelledby="menu-page-boutique" id="menu-page-boutique" class="contextual-region"&gt;
    &lt;ul class="nav navbar-nav m-0"&gt;
      &lt;li class="dropdown"&gt;
        &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;&lt;i class="fas fa-plus-circle fa-lg"&gt;&lt;/i&gt; Gérer votre {{ store_entity.type.entity.label }}&lt;/a&gt;
        &lt;ul class="dropdown-menu"&gt;
          &lt;li class="task"&gt;
            &lt;a href="/store/{{ store_entity.id }}/tasks" data-drupal-link-system-path="/store/{{ store_entity.id }}/tasks"&gt;&lt;i class="fas fa-tasks fa-lg"&gt;&lt;/i&gt; &lt;b&gt;Liste des tâches&lt;/b&gt; &lt;span class="badge task-badge-warning"&gt;0&lt;/span&gt; &lt;span class="badge task-badge-danger"&gt;0&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="/store/{{ store_entity.id }}/point-of-sale" data-drupal-link-system-path="/store/{{ store_entity.id }}/point-of-sale"&gt;&lt;i class="fas fa-cash-register fa-lg"&gt;&lt;/i&gt; Point de vente&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="/store/{{ store_entity.id }}/migrate" data-drupal-link-system-path="/store/{{ store_entity.id }}/migrate"&gt;&lt;i class="fas fa-exchange-alt  fa-lg"&gt;&lt;/i&gt; Migrer&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="/store/{{ store_entity.id }}" data-drupal-link-system-path="/store/{{ store_entity.id }}"&gt;&lt;i class="fas fa-glasses  fa-lg"&gt;&lt;/i&gt; Voir&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="/store/{{ store_entity.id }}/edit" data-drupal-link-system-path="/store/{{ store_entity.id }}/edit"&gt;&lt;i class="fas fa-feather-alt fa-lg"&gt;&lt;/i&gt; Modifier&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="/store/{{ store_entity.id }}/delete" data-drupal-link-system-path="/store/{{ store_entity.id }}/delete"&gt;&lt;i class="fas fa-trash-alt fa-lg"&gt;&lt;/i&gt; Supprimer&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="/store/{{ store_entity.id }}/translations" data-drupal-link-system-path="/store/{{ store_entity.id }}/translations"&gt;&lt;i class="fas fa-globe fa-lg"&gt;&lt;/i&gt; Traductions&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="/store/{{ store_entity.id }}/members" data-drupal-link-system-path="/store/{{ store_entity.id }}/members"&gt;&lt;i class="fas fa-sitemap fa-lg"&gt;&lt;/i&gt; L'équipe&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="/store/{{ store_entity.id }}/products" data-drupal-link-system-path="/store/{{ store_entity.id }}/products"&gt;&lt;i class="fas fa-gift  fa-lg"&gt;&lt;/i&gt; Produits&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="/store/{{ store_entity.id }}/promotions" data-drupal-link-system-path="/store/{{ store_entity.id }}/promotions"&gt;&lt;i class="fas fa-percentage fa-lg"&gt;&lt;/i&gt; Promotions&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="/store/{{ store_entity.id }}/payment-gateways" data-drupal-link-system-path="/store/{{ store_entity.id }}/payment-gateways"&gt;&lt;i class="fas fa-credit-card fa-lg"&gt;&lt;/i&gt; Modes de paiement&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="/store/{{ store_entity.id }}/shipping-methods" data-drupal-link-system-path="/store/{{ store_entity.id }}/shipping-methods"&gt;&lt;i class="fas fa-truck fa-lg"&gt;&lt;/i&gt; Modes de livraison&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="/store/{{ store_entity.id }}/orders" data-drupal-link-system-path="/store/{{ store_entity.id }}/orders"&gt;&lt;i class="fas fa-shopping-cart fa-lg"&gt;&lt;/i&gt; Commandes&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="/store/{{ store_entity.id }}/inventory" data-drupal-link-system-path="/store/{{ store_entity.id }}/inventory"&gt;&lt;i class="fas fa-clipboard-list fa-lg"&gt;&lt;/i&gt; Inventaire&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="/store/{{ store_entity.id }}/reports" data-drupal-link-system-path="/store/{{ store_entity.id }}/reports"&gt;&lt;i class="fas fa-calculator fa-lg"&gt;&lt;/i&gt; Rapports de vente&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="/store/{{ store_entity.id }}/like" data-drupal-link-system-path="/store/{{ store_entity.id }}/like"&gt;&lt;i class="fas fa-heartbeat fa-lg"&gt;&lt;/i&gt; Mentions j'aime&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="/store/{{ store_entity.id }}/seo" data-drupal-link-system-path="/store/{{ store_entity.id }}/seo"&gt;&lt;i class="fas fa-flag-checkered fa-lg"&gt;&lt;/i&gt; Référencement&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>