Aktiver Zustand funktioniert nicht für hinzugefügte Links im Sidebar-Komponente

Entwickler
1

Hallo, ich füge einige Kategorien als einzelne Links zur oberen Seitenleiste von Discourse hinzu, aber wenn ich auf diese Links klicke, funktioniert im Gegensatz zu anderen nativen Links in dieser Komponente der CSS-aktive Zustand für einzelne Links oder Abschnittslinks nicht. Da der aktive Zustand nicht funktioniert, können Besucher nicht erkennen, welche Seite sie gerade ansehen. Gibt es eine Möglichkeit, dies zu beheben?

Aktiver Zustand funktioniert:

image
image680×112 1.54 KB

Aktiver Zustand funktioniert nicht
image

3 „Gefällt mir“
2

Als temporäre Problemumgehung können Sie diesen Initialisierer in Ihrem Plugin/Komponente verwenden:

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

/**
 * Die Rolle dieses Initialisierers besteht darin, der Sidebar-Abschnittsverknüpfung eine Klasse "active" hinzuzufügen,
 * wenn die aktuelle Seite mit der href des Links übereinstimmt. Theoretisch könnte dies von Discourse Core behandelt werden,
 * aber derzeit tut es dies nicht für benutzerdefinierte Links, daher implementieren wir es hier.
 *
 * @see https://meta.discourse.org/t/active-state-not-working-for-added-links-in-the-sidebar-component/323422
 */
function initialize(api) {
  // Selektor für Sidebar-Abschnittsverknüpfungen, die keine Ember-Ansichten sind. Es sieht
  // so aus, als ob Ember-Ansichten eine eigene aktive Zustandsbehandlung erhalten, im Gegensatz zu benutzerdefinierten Links.
  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);
    });
  };
  // Einmal anwenden
  applyClass();
  // Auch bei Seitenwechseln erneut anwenden (günstig + robust)
  api.onPageChange(applyClass);
}

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

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