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

**URL:** https://meta.discourse.org/t/active-state-not-working-for-added-links-in-the-sidebar-component/323422
**Category:** Development
**Created:** [8월 26, 2024, 4:01오후 UTC](https://meta.discourse.org/t/active-state-not-working-for-added-links-in-the-sidebar-component/323422 "2024-08-26T16:01:44Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![bekircem](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bekircem/32/44582_2.png) [@bekircem](https://meta.discourse.org/u/bekircem)
#### Post date: [8월 26, 2024, 4:01오후 UTC](https://meta.discourse.org/t/active-state-not-working-for-added-links-in-the-sidebar-component/323422/1 "2024-08-26T16:01:44Z")

</div>

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

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

 ![image](https://global.discourse-cdn.com/meta/original/4X/a/4/6/a46c7b869c91a7ba3fc90d2702dbc023fabe9697.png)

활성 상태가 작동하지 않는 경우  
 ![image](https://global.discourse-cdn.com/meta/original/4X/e/3/f/e3fba86a9f0b83426bef78befc69d52400e23986.png)

---

<div class="post-metadata">

### Author: ![pirhoo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pirhoo/32/527677_2.png) [@pirhoo](https://meta.discourse.org/u/pirhoo)
#### Post date: [10월 31, 2025, 1:21오후 UTC](https://meta.discourse.org/t/active-state-not-working-for-added-links-in-the-sidebar-component/323422/2 "2025-10-31T13:21:23Z")

</div>

임시 대안으로 플러그인/컴포넌트에 이 초기화 함수를 사용할 수 있습니다:

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

```