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] 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)] So I wonder if this is a bug. Or if there’s another approach?

You can’t unfortunately, [imagem]Configuring the default sidebar for your users Plugin-added links cannot be directly customized. To modify these links: Create a replacement link with your desired customizations Hide the original plugin link

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.

[imagem] manuel: Would the changes be reverted on every component or plugin update? 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, ); } });

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"); } } }); });

Como posso editar os links da barra lateral adicionados com api.addCommunitySectionLink?

Dev

awesomerobot (Kris) 17 Março , 2025 21:32 2

Infelizmente, você não pode.

Tópico		Respostas	Vistas
Edit or Disable "community" in sidebar menu Product Support sidebar	8	2143	18 Março , 2023
Ability to add a custom section of links to the sidebar Feature sidebar , completed	14	4382	16 Fevereiro , 2023
Link sidebar buttons and scripts Development sidebar	4	377	30 Junho , 2024
Custom sidebar sections being tested on meta Announcements sidebar	149	14917	21 Outubro , 2023
Making custom changes to the sidebar programmatically Development rest-api , sidebar	5	777	4 Agosto , 2023

Como posso editar os links da barra lateral adicionados com api.addCommunitySectionLink?

Related topics