Ability to display category icons in sidebar

[craigconstantine]

This sort of seems to be mentioned in a few places, but I couldn’t find a clear answer — a way to work around this, or “it’s coming” in the sidebar or the component, or “nope”, etc…

I’ve enabled the experimental sidebar on my Discourse-hosted site. I get colored blocks next to my categories. And notably, I do not get the category icons I’ve configured with the Category Icons theme component.

My first thought is that I have the “Category Style” setting as “none” for this site. Feels to me like there shouldn’t be colored blocks in the sidebar with “none”.

…and in my screenshot you can see the icons I have for the categories. Feels to me like those same icons should be in the sidebar.

Thoughts?

[mcwumbly (Dave McClure)]

@craigconstantine

I couldn’t find a clear answer — a way to work around this, or “it’s coming” in the sidebar or the component, or “nope”, etc…

The current answer is that we don’t have any specific plans for this.

There’s been some discussion about making category icons a first class feature, though - I know this is something that @tobiaseigen is interested in, for example. But it’s not currently on our list of priorities.

In the meantime, I’m not sure what it’d take to work around this or to add support for it in the category icons theme component. @pmusaraj do you have any thoughts on what might be entailed to do that?

@craigconstantine - what would you expect the sidebar to look like when icons are used? would you expect the icons to have the category color in this scenario?

[pmusaraj (Penar Musaraj)]

The category icons component overrides a core category link renderer to add its icons. The sidebar, for good reason, doesn’t use the same renderer, so we need to add a way to extend/override the sidebar category links in core before a component can do something here.

Similar story for tags, but it’s probably a little easier given that we are currenly showing a default icon for each tag in the sidebar.

[tobiaseigen]

We’ve been talking internally about getting closer to parity of features between tags and categories, and to let tags be decorated with colors in the same way as categories, and to let both be decorated with icons.

Differentiating tags and categories with colors and icons can make a big difference in helping distinguish them and not “making people think” as they navigate through the discussions in their community.

So yes, I am in favor of making this happen across the board in core discourse. But I am not in favor of creating a chaotic colorful experience or making the sidebar functionality harder to use with icons. I do like @pmusaraj’s screenshot example of category style set to box - this could work quite well in the sidebar.

@pmusaraj

Here is how this would look with category style set to box:

The Discourse for Teams sidebar handled the category decoration a little better than the new sidebar, I think. You could use the category style admin setting to choose bar, box, bullet or none, and the categories in the sidebar were displayed with the style chosen and all of them looked very nice! See screenshots.

[craigconstantine]

@mcwumbly

@craigconstantine - what would you expect the sidebar to look like when icons are used? would you expect the icons to have the category color in this scenario?

The same as they do in the old-style ≡ menu?

I flipped off enable-exp-sidebar, blew out my browser cash, refreshed… thinking I’d take a screenshot of my old ≡ showing the categories with icons… but that’s not working now either??

This didn’t used to have the color boxes—color does not convey any inherent meaning, in general. All my categories have painstakingly-chosen icons. Help has an FA ?, Listen has headphones, supporters has a user-silhouette-with-+ (which we use as avatar flair for people in a certain group), workbench has a tools icon, etc.

But to try to answer your specific question at the top: It should look like this (no colors since category-style is none) and the icon next to the names… here’s the icons for a few of our categories (this was also in my original post though.)

[mcwumbly (Dave McClure)]

@craigconstantine

I flipped off enable-exp-sidebar, blew out my browser cash, refreshed

To go back to the old way you also have to turn off the “enable experimental sidebar hamburger” setting.

[craigconstantine]

derp …you are of course correct. Here’s a screenshot of how icons should appear next to categories, in the sidebar when category-style is none:

[Lilly]

re: category icons
i don’t particularly care for them myself. i agree it would be clutter IMO. i was more addressing @craigconstantine’s concerns because they were sort of available in the legacy menu.

[tobiaseigen]

Yeah, this may be an unrealistic and unnecessary suggestion.

The colors in the sidebar match the category colors used in many places in the UI.

[Lilly]

yea myself, i have no issue with those colored bullets (other than the lock icons, but i can code them out). just give me the ability to mod the community section and i’ll be chuffed.

[Jagster (Jakke Lehtonen)]

@tobiaseigen

The colors in the sidebar match the category colors used in many places in the UI.

Yes, but that isn’t same as purpose

What ever. I just don’t believe users can and will identify categories per different colors, so I have disabled them where I can and otherwise I tried to use same color forum wide. I don’t see any other purpose for category colors than decorative aspect and that is purely matter of taste.

And that’s why I would very much like to get an option to disable those at the sidebar as I can on rest of a forum.

[Lilly]

here you go:

common css

.sidebar-section-link-prefix span {
    display: none;
}

[Jagster (Jakke Lehtonen)]

Thanks.

But now even I am back to on-topic Ability to display category icons in sidebar would be more really nice solution…

[Lilly]

for anyone who wants to change the appearance of those category bullets in the navigator sidebar menu, you can do something like what i did on my forum - in common css:

.sidebar-section-link-wrapper .sidebar-section-link-prefix .prefix-span {
    width: .6em;
    height: .6em;
    border-radius: 100%;
}

which will look like this:

notice sub-category Help Desk bullet. the Lounge is secured for TL1 but i removed the lock icon with code. i leave lock icon on for staff categories so they can easily see them…

[tgxworld (Alan Tan)]

Just dropping a quick note here, we’re working on making the category icons and tag icons theme components compatible with Sidebar in the short term. This should land by next week. Longer term though, we intend to make customizable icons for category or tags a core feature.