# Making custom changes to the sidebar programmatically

**URL:** <https://meta.discourse.org/t/making-custom-changes-to-the-sidebar-programmatically/273027>\
**Category:** Development\
**Tags:** rest-api, sidebar\
**Created:** [July 27, 2023, 9:14am UTC](https://meta.discourse.org/t/making-custom-changes-to-the-sidebar-programmatically/273027 "2023-07-27T09:14:04Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![kris.kotlarek](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kris.kotlarek/32/176919_2.png) [@kris.kotlarek](https://meta.discourse.org/u/kris.kotlarek)\
**Post date:** [August 4, 2023, 1:43am UTC](https://meta.discourse.org/t/making-custom-changes-to-the-sidebar-programmatically/273027/6 "2023-08-04T01:43:14Z")

</div>

You may take a look on how chat-plugin is integrated with sidebar:

> <https://github.com/discourse/discourse/blob/main/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js#L28>

In this case, state of links are kept in service object and whenever state is changed, sidebar is updated:

> <https://github.com/discourse/discourse/blob/main/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js#L133>

A potential solution would be to subscribe to page change event and update links. Pseudocode may look like:

```javascript
import { tracked } from "@glimmer/tracking";

api.addSidebarSection(
  (BaseCustomSidebarSection, BaseCustomSidebarSectionLink) => {
    const TestSectionLink = class extends BaseCustomSidebarSectionLink {
      // define your custom link properties here
    };

    const SidebarTestSection = class extends BaseCustomSidebarSection {
      @tracked links = [];

      constructor() {
        super(...arguments);

        this.#updateLinks();
        this.onAppEvent("page:changed", () => this.#updateLinks());
      }

      get newLinksArray() {
        // list of links based on current URL
      }

      #updateLinks() {
        this.links = this.newLinksArray.map(
          (link) =>
            new TestSectionLink({
              link,
            })
        );
      }

      get sectionLinks() {
        return this.links;
      }
    };
    return SidebarTestSection;
  }
);

```

---

_[View the full topic](https://meta.discourse.org/t/making-custom-changes-to-the-sidebar-programmatically/273027)._