Discourse Category Sidebars

This theme component takes a topic and applies it as a sidebar for a category’s topic list. These sidebars are only visible when the browser is 767px or wider (most tablets and monitors).

Want sidebars for tags? Check out Discourse Tag Sidebars.

:eye: Preview it on theme creator

:hammer_and_wrench: Github repo: https://github.com/awesomerobot/discourse-category-sidebars

:thinking: How do I install a Theme or Theme Component?

What can I do with this theme component?

  • Choose a topic and display its content as a sidebar for a category.

  • Set a sidebar to be displayed on the /latest, /new, /unread, and /top pages by using all as the category name in your settings.

  • Choose for the sidebars to appear on the left or the right of the topic list.

  • By default a category’s sidebar will also display for all its subcategories unless a subcategory has its own sidebar defined (you can disable this by unchecking the inherit parent sidebar setting).

How do I configure it?

Simply insert the category slug (from the category url, e.g. example.com/c/staff) and the id of the topic (e.g. example.com/t/example-topic/57)

I recommend creating sidebar topics in their respective categories, closing the topic so there are no replies, and unlisting it (so it doesn’t appear in the topic list).

Note that you can not use a topic in a private category as a sidebar in a public category (you can, but users without access to that private topic will just see a blank sidebar!).

Custom CSS

Each category sidebar is wrapped with a class that contains the category slug, so for the staff category that would be .category-sidebar-staff. You can use these classes to style the individual sidebars.

The body tag on pages with sidebars also has a class added so you can use body.custom-sidebar to apply styles on all pages that have a sidebar.


:heart: Special thanks to @xrav3nz for laying the groundwork to make this component possible!

41 Likes

As far as I can see, this does nothing on mobile, right?

In case of long posts, the scroll is rather weird: the sidebar scrolls down only when the page is almost scrolled down, as if the bottom of the sidebar is linked with the bottom of the page. But since we have infinite scrolling, as soon as more posts are loaded, the sidebar is reset to the top again.

This feels weird. What could work (maybe?) is make the sidebar scroll position remain the same: eg. i scroll down until i read the whole post and stop there even if new posts are loaded in the normal list. But when i scroll up, then scroll the sidebar normally up, just like the topic list does. This would help (i think) with reading the whole sidebar post more easily.


If you wanna check what i’m talking about: https://forum.duplicacy.com/

1 Like

ah - I see… this is due to the way position: sticky; works (it’s a fairly new CSS feature).

I think there are a few possible solutions…

  1. I could add a setting to optionally disable position: sticky, so the sidebar scrolls like normal content.

  2. I could restrict the sidebar height to never be taller than the viewport and make it scrollable if the content is too long. You’d end up with double scrollbars though… which isn’t the best

  3. I could abandon using CSS for positioning entirely and use JS instead… I think this way I could accomplish what you’re describing.

  4. Of course, you could also just use a shorter sidebar :wink: (I think I should have something in here for longer sidebars either way to avoid the current issue)

I’ll figure something out this week.

For now if you want to disable the sticky functionality entirely you can add this CSS:

.custom-sidebar .topic-list.with-sidebar>.category-sidebar {
  position: relative;
  top: 0;
}
8 Likes

I just pushed an update that makes both options 1 & 2 available.

  1. I’ve added a “stick on scroll” option in the settings. When it’s disabled sidebars will no longer be sticky on scroll and have no height restriction (so you can view the full sidebar content by scrolling the page).

  2. When enabled (default) the sidebars will remain sticky on scroll but aren’t allowed to be taller than the browser (if it is taller than the browser it will get its own scrollbar).

I gave a JS solution a shot and made some progress, but I’m not an engineer and scrolling is pretty tricky. It’s definitely possible, so if anyone wants to make a PR I’d be happy to take a look and merge it in.

7 Likes

We discussed the Category Sidebars with our moderators and one thing we feel is missing is the option to ‘fold’ or ‘close’ the block once you’ve read it. Personally I prefer folding as this lets users access it again at a later time. Would you consider adding that?

4 Likes

Yes. And would be nice if that was optional for the admin so you could prevent folding if desired.

4 Likes

Sure, that shouldn’t be too difficult to add as an option.

4 Likes

How hard would it be to use the ideas in here to build a “tags sidebar”?

I’m thinking it’d be like this, and sidebars for each tag with an associated topic would just stack on top of each other.

3 Likes

I really like the tag idea, too!

Agree that one specific to a tag would be cool. Right now if in a category then you change tag filter from All to a specific tag the side bar disappears.

Obviously one can filter tags outside of a category so I get why, but it would be neat

Trying to figure out how to make this work with tags as well. (we use tags heavily rather than having tons of categories.)

It looks like it may be about replacing controller:navigation/category with whatever the equivalent for tags is but not sure.

2 Likes

I just took a quick look and it’s possible to do this for tags… I have a working proof of concept in a branch here: GitHub - awesomerobot/discourse-category-sidebars at tag-sidebars

I’ll probably work on this more tomorrow and spin it off into its own repo.

Yep, that’s the core of it — this seems to work for tags:

const controller = container.lookup("controller:tags-show");
const tag = controller.get("tag");
8 Likes

Since I am using the header submenu plugin, A part of the text is covered by my header bar. It would be great if it was possible to add extra margin/offset or whatever it’s called for the case when additional elements before the header are covering the sidebar’s content.

Also: is there any way to keep the category drop down menu above the sticky sidebar’s content? that would make it easy for users to jump between categories quickly.

altogether I think the category sidebar is a great plugin and has huge potential to add useful information to the forum structure!

can i display it only for quest /new visitors ?

1 Like

This is great when you have users that don’t know how to read check the pinned topic.

But there seems to be some odd behavior when leaving a category are entering it again. The sidebar snaps to the top instead of the side. This happens regardless of the sticky position setting too.

This is easily triggered by leaving a category/sub-category using the dropdown on the top and entering it again.

I have the same issue @awesomerobot