Link sidebar buttons and scripts

AI-generated summary

In a discussion about adding custom sidebar buttons in Discourse, Truest seeks to add a button labeled “Install” to the sidebar (via the hamburger menu or bottom section) and connect it with JavaScript. Their initial attempt using HTML in the component’s <body> failed. Arkshine advises using the addCommunitySectionLink API, pointing to documentation and suggesting placing the script in the <head> with the correct <script type="text/discourse-plugin" version="0.8"> wrapper. Truest tries this but still sees no effect. Arkshine confirms the script must be in the head with the proper plugin script type. Truest then tries again with route: "discovery.latest" and icon: "download", but reports that while the button appears, clicking it doesn’t trigger the intended script — oddly, the script only runs when clicking the default “Topic” button. They note the script is also placed in the head, indicating a possible routing or event binding issue with the custom link.

I would like to add it in the form of a button in the sidebar (hamburger menu) → More or at the bottom of the sidebar and then connect JavaScript. How do I access the Discourse sidebar to do that?

I did the following, but it didn’t work.
I put it in the of the component.

<div class="sidebar-custom-sections">
  <ul class="sidebar-more-section-links-details-content-main">
    <li data-list-item-name="Install" class="sidebar-section-link-wrapper" id="sidebar_install_wrapper">
      <a href="#" rel="noopener noreferrer" target="_self" data-link-name="Install" class="sidebar-section-link sidebar-row" id="sidebar_install_button">
        <span class="sidebar-section-link-prefix icon">
          <svg class="fa d-icon d-icon-download svg-icon prefix-icon svg-string" xmlns="http://www.w3.org/2000/svg">
            <use href="#download"></use>
          </svg>
        </span>
        <span class="sidebar-section-link-content-text">
          Install
        </span>
      </a>
    </li>
  </ul>
</div>

If you mean adding a new link here:

Then, you can use addCommunitySectionLink API. You have an example in the comment.

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.gjs#L2414-L2471

<script>
api.addCommunitySectionLink({
  name: "unread",
  route: "discovery.unread",
  title: I18n.t("some.unread.title"),
  text: I18n.t("some.unread.text"),
  icon: "fa-envelope"
});
</script>

I put it in the HTML body section of the component like this, but it does not seem to be added to more. Is not it possible to do it this way?

You should use the following code in Head instead:

<script type="text/discourse-plugin" version="0.8">
    api.addCommunitySectionLink({
      name: "unread",
      route: "discovery.unread",
      title: I18n.t("some.unread.title"),
      text: I18n.t("some.unread.text"),
      icon: "fa-envelope"
    });
</script>

<script type="text/discourse-plugin" version="0.8"> is important if you want to use the API.

That should work better. :+1:

<script type="text/discourse-plugin" version="0.8">
    api.addCommunitySectionLink({
      name: "install",
      route: "/install",
      title: "install",
      text: "install",
      icon: "download"
    });
</script>

I tried to add the above code to the sidebar’s view, but it did not work, so I wrote it in the format below, referring to the existing path. However, when the button appears and I press it, the script does not seem to work properly. Oddly enough, the script works when I press the ‘Topic’ button rather than the button I created. The script to be connected was also placed in the head of the HTML.

<script type="text/discourse-plugin" version="0.8">
    api.addCommunitySectionLink({
      name: "install",
      route: "discovery.latest",
      title: "install",
      text: "install",
      icon: "download"
    });
</script>