How can I edit sidebar links that are added with api.addCommunitySectionLink?

Development

AI-generated summary

The discussion revolves around editing sidebar links added via api.addCommunitySectionLink in Discourse. manuel notes that plugin-added links, like those from the Calendar plugin, don’t appear in the customize modal, making them uneditable or repositionable. awesomerobot confirms this limitation and suggests alternatives: hiding the original link and creating a replacement with desired customizations. manuel asks if changes would be lost on updates, to which awesomerobot clarifies that only direct component/plugin overwrites would cause issues, recommending CSS for reordering or hiding links. They also provide code examples for hiding a link and adding a new one conditionally. manuel concludes that since the links can’t be modified in the UI, he’ll abandon adding them for now but will implement route-based highlighting using api.onPageChange.

1

I’d like to add a new sidebar link with a component. I’m using this code:

      api.addCommunitySectionLink({
        name: "custom-homepage",
        route: "discovery.custom",
        title: "Home",
        text: "Home",
        icon: "house",
      });

This adds the link, but on the customize modal it doesn’t show up. So I can’t edit the default link or drag it to a different position.

I see the same is true for a link added by the Calendar plugin. Here’s the link:

image
image246×227 6.21 KB

But on the customize modal the link doesn’t show up:

This image depicts a screenshot of a user interface for editing a custom section, showing icons and names for different custom links such as "Topics," "My Posts," "Review," and "Admin," along with corresponding URLs. (Captioned by AI)
This image depicts a screenshot of a user interface for editing a custom section, showing icons and names for different custom links such as "Topics," "My Posts," "Review," and "Admin," along with corresponding URLs. (Captioned by AI)593×466 18.2 KB

So I wonder if this is a bug. Or if there’s another approach?

2

You can’t unfortunately,

3

Would the changes be reverted on every component or plugin update?

I guess the approach is then to not add a default link at all.

4

only if you’re overwriting the component/plugin directly… if you want to change the order in the existing section, it’s probably easiest to reorder with CSS

#sidebar-section-content-community {
  display: flex;
  flex-direction: column;
  
  li {
    order: 2
  }
  
  [data-list-item-name="upcoming-events"] {
    order: 1
  }
}

If you want to move the item to the “more” drawer, hide the original and duplicate it in a separate component:

#sidebar-section-content-community {
  [data-list-item-name="upcoming-events"] {
    display: none;
  }
}

import { apiInitializer } from "discourse/lib/api";
import { i18n } from "discourse-i18n";

export default apiInitializer((api) => {
  const siteSettings = api.container.lookup("service:site-settings");
  if (
    siteSettings.discourse_post_event_enabled &&
    siteSettings.sidebar_show_upcoming_events
  ) {
    api.addCommunitySectionLink(
      {
        name: "custom-upcoming-events",
        route: "discourse-post-event-upcoming-events",
        text: i18n("discourse_post_event.upcoming_events.title"),
        title: i18n("discourse_post_event.upcoming_events.title"),
        icon: "calendar-days",
      },
      true,
    );
  }
});
5

If the new links can’t be modified on the customize modal, I guess I’ll drop the idea of adding them for now. It just seems confusing to add a link that is elusive on the customize modal then.

However, I’d want the link (if added manually) be highlighted when on the related route, so I’ll add this now:

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer("0.8", (api) => {
  const router = api.container.lookup("service:router");

  api.onPageChange(() => {
    const currentRoute = router.currentRoute.name;
    const customHomepageLink = document.querySelector(
      '.sidebar-section-link[href="/custom"]'
    );

    if (currentRoute === "discovery.custom") {
      if (customHomepageLink) {
        customHomepageLink.classList.add("active");
      }
    } else {
      if (customHomepageLink) {
        customHomepageLink.classList.remove("active");
      }
    }
  });
});