Custom sidebar sections being tested on meta

Awesome, thank you :slight_smile:
Sorry once again for this bug. We will think about solution to protect overrides when other languages are not yet ready.

5 Likes

Don’t worry about it :slightly_smiling_face: I am really glad because this kind of bugs sometimes happens and now thanks to you I learned how to resolve this from rails. :slightly_smiling_face: I think this is a really great thing. Your quick response and solution to this issue is amazed me. :heart: Maybe others will also have this issue and this little conversation can help to resolve it.

Love this idea. I hope this will implement soon. I like test new things and try to find fresh bugs so I always runs the experimental features and keep fresh the site. And this also means that I don’t always wait for language updates. Until this I have to make more attention about translations. :slightly_smiling_face:

5 Likes

Sure thing, @mcwumbly.

My first goal is to move the existing category sections. I’d like to move “(Chat) Channels” to the top, followed by “Categories” and then “Community”

My second goal is to edit the names of those default category sections.

However, if I could create custom sections I’d attempt to recreate what I’ve described in my first and second goal and then I’d want to remove the defaults. Yet that all seems pointless right now cos I’ll just wait for the ability to move category sections and the ability to edit category section titles.

3 Likes

Cool, good to hear how you are thinking of using “reorder sections”

This one in particular isn’t high on our list at the moment, but it can be done with an override:

Admin → Customize → Text ?

js.sidebar.sections.categories.header_link_text

3 Likes

Excellent. Thanks for the tip. Looks like that’s available for all category section titles except for “Channels”. When I do the following search nothing is returned. Is that expected?

3 Likes

Also wanted to say thanks for this progress.

It should be noted that enable custom sidebar sections needs to be enabled in the settings still, and only the groups permitted there will be able to see custom sections marked as “Make this section public and visible to everyone”. So to make certain groups see a global custom section it also requires allowing them to implement their own personal menus too.

Also, I think for globally visible sections provided by the admin to be most useful they would also need to be visible to anonymous (not logged in) visitors, which is currently not the case.

I definitely need this too, as well as the ability to customize the Community menu. But meanwhile don’t forget about this fantastic tip:

And here’s my take on it:

.sidebar-section-content {
  display: flex;
  flex-direction: column;
  .sidebar-more-section-links-details {
    order: +1;
  }
}
.sidebar-section[data-section-name="tags"] {
  display: none
}
.sidebar-section[data-section-name="categories"] {
  display: flex;
  flex-direction: column;
  order: +1;
}
.sidebar-custom-sections {
  display: flex;
  flex-direction: column;
  order: +1;
}
4 Likes

Oh, hmm… since chat is a plugin, it’s likely injected in some other way and uses one of the strings you’ll find if you just search for “chat” – but I’m not sure which one it is. Will have to track it down.

3 Likes

Oh, I see what you mean. Thanks for the info.

Might it be one of these?

I won’t try it “just in case” I get it wrong.

3 Likes

js.chat.chat_channels is what is shown in the sidebar and the channel list in the chat drawer. js.chat.browse.title is what is showin in the page to browse channels (e.g. when you click the edit pencil next to channels).

It’s possible they are used in other places, but I haven’t seen them.

It should be pretty safe to try overriding them. You can always find the text you’ve overridden and then revert it back to the default using the Revert button.

3 Likes

Thanks for your help, @mcwumbly. I’ll give it a try.

3 Likes

The link ordering is not working correctly on mobile view (touchscreen).
I think it is because the user-select: none is on the .sidebar-wrapper which is only used on desktop view (non-narrow).

I’ve added it here and works great on mobile too. :slightly_smiling_face:

.hamburger-panel .revamped {
  .panel-body-contents {
    .sidebar-hamburger-dropdown {
      @include unselectable;
    }
  }
}
2 Likes

I made a new session in the left menu, with the list of options I chose, how do I make other sections defined by discourse disappear through CSS? I want to remove the community and categories section

2 Likes

That’s great! Search did not work for me. My tablet and the website could not agree to show the keyboard. As you can see it disappears without me tapping something.

That may be a problem with my tablet, but how do users of a forum know what they need to search for? Especially if the default language isn’t English.
If users want to choose an emoji they can choose one from the menu. They don’t need to search (in a foreign language). Maybe there should be something similar for the icon.

3 Likes

Indeed, this issue occurs my tablet as well as on phones on which the form layout isn’t optimized for:

3 Likes

custom sidebar sections is nice, but how about editing existing ones like Community or Categories? is that planned? if so, about how far out is it?

for now, i wrote a nice script using promises and MutationObserver. if you want to try it, you can make a theme component and paste this in the head section:

any kind of collapsing, expanding, and refreshing should just “do it” in a performant way.

when the sidebar mutates, a promise is created for each link that is resolved when the link’s relevant section is available.

specify injections by section. kebab must be text in kebab case.

i made various ‘positioner’ options.you can append or prepend a section. you can also add a link before or after an existing link in a section.

you can also remove links. just make removals an empty array if you’re not using that.

you can remove/comment out the few console.log statements used for debugging once you’re confident it works.

please let me know if you find bugs.

is it worth posting this as an actual theme component? again, i wonder if the real feature is coming.

3 Likes

Allowing admins to edit the Community section is pretty high on our list now.

What kind of customization for something like Categories did you have in mind? (Aside from adding/removing categories as you can do today)

4 Likes

i’m using tags instead of subcategories for most things. a problem with this is you have basically no control over how this is presented to users in the navigational sense. you can’t order, emphasize, or de-emphasize tags, and they don’t really appear on /categories like subcategories do.

best solution i have so far is to create a site map topic and link to it wherever it makes sense. that could include in the sidebar (atop Categories section or somewhere in the Community section).

full details in this post:

4 Likes

If you have any screenshots or mockups of what you’d like the Categories section to look like on your site, I’m curious to see what you have in mind.

3 Likes

Great to hear! Would it be possible to make those customizations apply for anonymous visitors as well?

4 Likes

hey dave, here are my thoughts.

imo on discourse, by default, /categories page more or less functions as a site map to browse and find topics unless you want to see a feed like /latest.

for one thing, i want the site map (whatever it may be) to be more prominently displayed than at the bottom of the Categories sidebar section. my first thought was to have the All Categories link (/categories) moved to the top of the sidebar section.

however, i am mostly using tags (with rules assigned to categories via tag groups) for structure in the place of subcategories, so /categories isn’t really working for me.

currently, my Categories sidebar section starts like this with categories below it:

image

that’s a link to a topic that i described in my previous post.

ideally for me, instead of a sitemap topic, the /categories page could be used if it had some features to present tags as structure. i would be able to present a list of tags inside of each category. preferably, i would have the option to order these lists of tags however i want (fixed order), but an option for ordering based on tag popularity would also be cool. these lists may be multiple rows which may or may not correspond to tag groups, but that would be logical. i.e. each category may be using multiple tag groups with different logical organization. i do not have a mockup of this, but i guess i could try if that’s unclear.

4 Likes