O estado ativo não funciona para links adicionados no componente de barra lateral

Dev
1

Olá, estou adicionando algumas categorias como links individuais na barra lateral do Discourse, mas quando clico nesses links, ao contrário de outros links nativos neste componente, o estado ativo do CSS não funciona para links únicos ou links de seção. Como o estado ativo não está funcionando, os visitantes não conseguem determinar qual página estão visualizando. Existe alguma maneira de corrigir isso?

Estado ativo funcionando:

image
image680×112 1.54 KB

Estado ativo não funcionando
image

3 curtidas
2

Como uma solução alternativa temporária, você pode usar este inicializador em seu plugin/componente:

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

/**
 * O papel deste inicializador é adicionar uma classe "active" ao link da seção da barra lateral
 * quando a página atual corresponde ao href do link. Em teoria, isso poderia ser tratado pelo núcleo do Discourse,
 * mas no momento não é para links personalizados, então o implementamos aqui.
 *
 * @see https://meta.discourse.org/t/active-state-not-working-for-added-links-in-the-sidebar-component/323422
 */
function initialize(api) {
  // Seletor para links de seção da barra lateral que não são visualizações Ember. Parece
  // que as visualizações Ember recebem seu próprio tratamento de estado ativo em oposição aos links personalizados.
  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);
    });
  };
  // Aplicar uma vez
  applyClass();
  // Reaplicar também nas mudanças de página (barato + resiliente)
  api.onPageChange(applyClass);
}

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

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