L'état actif ne fonctionne pas pour les liens ajoutés dans le composant sidebar

Dev
1

Bonjour, j’ajoute des catégories sous forme de liens individuels en haut de la barre latérale de Discourse, mais lorsque je clique sur ces liens, contrairement aux autres liens natifs de ce composant, l’état actif CSS ne fonctionne pas pour les liens uniques ou les liens de section. Comme l’état actif ne fonctionne pas, les visiteurs ne peuvent pas déterminer quelle page ils consultent. Existe-t-il un moyen de résoudre ce problème ?

État actif fonctionnel :

image
image680×112 1.54 KB

État actif non fonctionnel
image

3 « J'aime »
2

En guise de solution de contournement temporaire, vous pouvez utiliser cet initialiseur dans votre plugin/composant :

import { withPluginApi } from "discourse/lib/plugin-api";

/**
 * Le rôle de cet initialiseur est d'ajouter une classe « active » au lien de la section de la barre latérale
 * lorsque la page actuelle correspond à l'attribut href du lien. En théorie, cela pourrait être géré par le cœur de Discourse,
 * mais pour l'instant, il ne le fait pas pour les liens personnalisés, nous l'implémentons donc ici.
 *
 * @see https://meta.discourse.org/t/active-state-not-working-for-added-links-in-the-sidebar-component/323422
 */
function initialize(api) {
  // Sélecteur pour les liens de section de la barre latérale qui ne sont pas des vues Ember. Il semble
  // que les vues Ember obtiennent leur propre gestion de l'état actif par opposition aux liens personnalisés.
  const LINK_SELECTOR = ".sidebar-section-link:not(.ember-view)";
  const CLASS_ACTIVE = "active";
  const applyClass = () => {
    document.querySelectorAll(LINK_SELECTOR).forEach((link) => {
      const href = link.getAttribute("href");
      const toggle = window.location.pathname === href;
      link.classList.toggle(CLASS_ACTIVE, toggle);
    });
  };
  // Appliquer une fois
  applyClass();
  // Réappliquer également lors des changements de page (peu coûteux + résilient)
  api.onPageChange(applyClass);
}

export default {
  name: "sidebar-section-link-active-class",

  initialize() {
    withPluginApi(initialize);
  },
};