How does the number of class count on my page and display it in my menu?

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.

Each type of task have a class :

• For red tasks, there is the class .task-danger

• For orange tasks, there is the class .task-warning

• For green tasks, there is the class .task-success

I only have to count the orange and red tasks to display them in the badges of the same color of the menu.

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.

Is there a way to do this with TWIG ?

I found the following documentation, but how to use it :

https://twig.symfony.com/doc/3.x/functions/include.html

https://twig.symfony.com/doc/3.x/filters/length.html

Here is the page with the list of tasks :

Each task corresponds to a view block.

commerce-store--professionnel--tasks.html.twig :

{{ 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') }}

Here is the menu of my page with the task counter (orange and red badge) :

commerce-store--professionnel--menu.html.twig :

<nav role="navigation" aria-labelledby="menu-page-boutique" id="menu-page-boutique" class="contextual-region">
  <ul class="nav navbar-nav m-0">
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fas fa-plus-circle fa-lg"></i> Gérer votre {{ store_entity.type.entity.label }}</a>
      <ul class="dropdown-menu">
        <li class="task">
          <a href="/store/{{ store_entity.id }}/tasks" data-drupal-link-system-path="/store/{{ store_entity.id }}/tasks"><i class="fas fa-tasks fa-lg"></i> <b>Liste des tâches</b> <span class="badge task-badge-warning">0</span> <span class="badge task-badge-danger">0</span></a>
        </li>
        <li>
          <a href="/store/{{ store_entity.id }}/point-of-sale" data-drupal-link-system-path="/store/{{ store_entity.id }}/point-of-sale"><i class="fas fa-cash-register fa-lg"></i> Point de vente</a>
        </li>
        <li>
          <a href="/store/{{ store_entity.id }}/migrate" data-drupal-link-system-path="/store/{{ store_entity.id }}/migrate"><i class="fas fa-exchange-alt  fa-lg"></i> Migrer</a>
        </li>
        <li>
          <a href="/store/{{ store_entity.id }}" data-drupal-link-system-path="/store/{{ store_entity.id }}"><i class="fas fa-glasses  fa-lg"></i> Voir</a>
        </li>
        <li>
          <a href="/store/{{ store_entity.id }}/edit" data-drupal-link-system-path="/store/{{ store_entity.id }}/edit"><i class="fas fa-feather-alt fa-lg"></i> Modifier</a>
        </li>
        <li>
          <a href="/store/{{ store_entity.id }}/delete" data-drupal-link-system-path="/store/{{ store_entity.id }}/delete"><i class="fas fa-trash-alt fa-lg"></i> Supprimer</a>
        </li>
        <li>
          <a href="/store/{{ store_entity.id }}/translations" data-drupal-link-system-path="/store/{{ store_entity.id }}/translations"><i class="fas fa-globe fa-lg"></i> Traductions</a>
        </li>
        <li>
          <a href="/store/{{ store_entity.id }}/members" data-drupal-link-system-path="/store/{{ store_entity.id }}/members"><i class="fas fa-sitemap fa-lg"></i> L'équipe</a>
        </li>
        <li>
          <a href="/store/{{ store_entity.id }}/products" data-drupal-link-system-path="/store/{{ store_entity.id }}/products"><i class="fas fa-gift  fa-lg"></i> Produits</a>
        </li>
        <li>
          <a href="/store/{{ store_entity.id }}/promotions" data-drupal-link-system-path="/store/{{ store_entity.id }}/promotions"><i class="fas fa-percentage fa-lg"></i> Promotions</a>
        </li>
        <li>
          <a href="/store/{{ store_entity.id }}/payment-gateways" data-drupal-link-system-path="/store/{{ store_entity.id }}/payment-gateways"><i class="fas fa-credit-card fa-lg"></i> Modes de paiement</a>
        </li>
        <li>
          <a href="/store/{{ store_entity.id }}/shipping-methods" data-drupal-link-system-path="/store/{{ store_entity.id }}/shipping-methods"><i class="fas fa-truck fa-lg"></i> Modes de livraison</a>
        </li>
        <li>
          <a href="/store/{{ store_entity.id }}/orders" data-drupal-link-system-path="/store/{{ store_entity.id }}/orders"><i class="fas fa-shopping-cart fa-lg"></i> Commandes</a>
        </li>
        <li>
          <a href="/store/{{ store_entity.id }}/inventory" data-drupal-link-system-path="/store/{{ store_entity.id }}/inventory"><i class="fas fa-clipboard-list fa-lg"></i> Inventaire</a>
        </li>
        <li>
          <a href="/store/{{ store_entity.id }}/reports" data-drupal-link-system-path="/store/{{ store_entity.id }}/reports"><i class="fas fa-calculator fa-lg"></i> Rapports de vente</a>
        </li>
        <li>
          <a href="/store/{{ store_entity.id }}/like" data-drupal-link-system-path="/store/{{ store_entity.id }}/like"><i class="fas fa-heartbeat fa-lg"></i> Mentions j'aime</a>
        </li>
        <li>
          <a href="/store/{{ store_entity.id }}/seo" data-drupal-link-system-path="/store/{{ store_entity.id }}/seo"><i class="fas fa-flag-checkered fa-lg"></i> Référencement</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>