Link sidebar buttons and scripts

Dev
1

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>
2

If you mean adding a new link here:

image

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

2 Likes
3 
<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?

4

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:

1 Like
5 
<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>
1 Like