El estado activo no funciona para los enlaces añadidos en el componente sidebar

Desarrollador
1

Hola, estoy agregando algunas categorías como enlaces individuales en la parte superior de la barra lateral de Discourse, pero cuando hago clic en estos enlaces, a diferencia de otros enlaces nativos en este componente, el estado activo de CSS no funciona para enlaces individuales o enlaces de sección. Dado que el estado activo no funciona, los visitantes no pueden determinar qué página están viendo. ¿Hay alguna forma de solucionar esto?

Estado activo funcionando:

image
image680×112 1.54 KB

Estado activo no funcionando
image

3 Me gusta
2

Como solución provisional, puedes usar este inicializador en tu plugin/componente:

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

/**
 * El rol de este inicializador es añadir una clase "active" al enlace de la sección de la barra lateral
 * cuando la página actual coincide con el href del enlace. En teoría, esto podría ser manejado por el núcleo de Discourse,
 * pero por ahora no lo hace para enlaces personalizados, así que lo implementamos aquí.
 *
 * @see https://meta.discourse.org/t/active-state-not-working-for-added-links-in-the-sidebar-component/323422
 */
function initialize(api) {
  // Selector para enlaces de sección de la barra lateral que no son vistas de Ember. Parece
  // que las vistas de Ember obtienen su propio manejo de estado activo a diferencia de los enlaces 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 una vez
  applyClass();
  // Volver a aplicar también en los cambios de página (barato + resistente)
  api.onPageChange(applyClass);
}

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

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