Lo stato attivo non funziona per i link aggiunti nel componente della barra laterale

Sviluppatore
1

Ciao, sto aggiungendo alcune categorie come collegamenti individuali nella barra laterale di Discourse, ma quando faccio clic su questi collegamenti, a differenza di altri collegamenti nativi in questo componente, lo stato attivo CSS non funziona per collegamenti singoli o collegamenti di sezione. Poiché lo stato attivo non funziona, i visitatori non possono determinare quale pagina stanno visualizzando. C’è un modo per risolvere questo problema?

Stato attivo funzionante:

image
image680×112 1.54 KB

Stato attivo non funzionante
image

3 Mi Piace
2

Come soluzione temporanea, puoi utilizzare questo inizializzatore nel tuo plugin/componente:

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

/**
 * Il ruolo di questo inizializzatore è aggiungere una classe "active" al link della sezione della barra laterale
 * quando la pagina corrente corrisponde all'href del link. In teoria questo potrebbe essere gestito dal core di Discourse,
 * ma al momento non lo fa per i link personalizzati, quindi lo implementiamo qui.
 *
 * @see https://meta.discourse.org/t/active-state-not-working-for-added-links-in-the-sidebar-component/323422
 */
function initialize(api) {
  // Selettore per i link delle sezioni della barra laterale che non sono viste Ember. Sembra
  // che le viste Ember ottengano la propria gestione dello stato attivo a differenza dei link personalizzati.
  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);
    });
  };
  // Applica una volta
  applyClass();
  // Riapplica anche ai cambi di pagina (economico + resiliente)
  api.onPageChange(applyClass);
}

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

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