사이드바 컴포넌트에 추가된 링크의 활성 상태가 작동하지 않음

개발
1

안녕하세요, Discourse 사이드바 상단에 카테고리들을 개별 링크로 추가하고 있는데, 이 컴포넌트의 다른 네이티브 링크와 달리 이 링크들을 클릭할 때 단일 링크나 섹션 링크에 대해 CSS 활성 상태(active state)가 작동하지 않습니다. 활성 상태가 작동하지 않아 방문자가 현재 어떤 페이지를 보고 있는지 알 수 없습니다. 이 문제를 수정할 방법이 있을까요?

활성 상태가 작동하는 경우:

image
image680×112 1.54 KB

활성 상태가 작동하지 않는 경우
image

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);
  },
};