Активное состояние не работает для добавленных ссылок в компоненте боковой панели

Разработка
1

Здравствуйте! Я добавляю несколько категорий в качестве отдельных ссылок в верхнюю часть боковой панели Discourse, но при клике на эти ссылки, в отличие от других нативных ссылок в этом компоненте, CSS-состояние active не работает ни для одиночных ссылок, ни для ссылок разделов. Поскольку состояние active не функционирует, посетители не могут определить, какую страницу они просматривают. Есть ли способ это исправить?

Состояние active работает:

image
image680×112 1.54 KB

Состояние active не работает:
image

2

В качестве временного решения вы можете использовать этот инициализатор в вашем плагине/компоненте:

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

/**
 * Цель этого инициализатора — добавлять класс "active" к ссылке раздела боковой панели,
 * когда текущая страница совпадает с href ссылки. В теории это могло бы быть реализовано в ядре 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);
  },
};