サイドバーコンポーネントで追加リンクのアクティブ状態が機能しません

開発
1

こんにちは。Discourse サイドバーの上部にカテゴリを個別のリンクとして追加していますが、これらのリンクをクリックしても、このコンポーネントの他のネイティブリンクとは異なり、単一リンクまたはセクションリンクでCSSのアクティブ状態が機能しません。アクティブ状態が機能しないため、訪問者は現在表示しているページを判断できません。これを修正する方法はありますか？

アクティブ状態が機能している場合：

image
image680×112 1.54 KB

アクティブ状態が機能していない場合
image

「いいね！」 3
2

一時的な回避策として、プラグイン/コンポーネントでこのイニシャライザーを使用できます。

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

/**
 * このイニシャライザーの役割は、現在のページがリンクのhrefと一致する場合に、
 * サイドバーセクションリンクに「active」クラスを追加することです。
 * 理論的にはこれはDiscourseコアで処理できるはずですが、現在のところカスタムリンクでは
 * 処理されないため、ここで実装します。
 *
 * @see https://meta.discourse.org/t/active-state-not-working-for-added-links-in-the-sidebar-component/323422
 */
function initialize(api) {
  // サイドバーセクションリンクのセレクター（Emberビューではないもの）。
  // Emberビューはカスタムリンクとは異なり、独自のアクティブ状態処理を行うようです。
  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);
    });
  };
  // 一度適用
  applyClass();
  // ページ変更時にも再適用（安価で堅牢）
  api.onPageChange(applyClass);
}

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

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