Sidebar Categories Organizer

[Drew-ART (Drew)]

I made a sidebar organiser. There was a lot of discussions about it a while back and others felt it wasn’t needed, but i always felt the my users aren’t very techy or know how the forum works well enough at the beginning, so i’ve made this drop down organiser to help.

Install this theme component

There’s a little toggle at the top so users can switch between default and this, and choose whichever they prefer. I put it there as i think many experienced users would want to customise their nav-sidebar, but most newer users don’t.

Sidebar Categories Organizer

A Discourse theme component that organizes sidebar categories into customizable collapsible color-coded sections with advanced features.

Features

• 10 Collapsible Sections: Group categories into up to 10 custom sections
• Color Customization: Set background and text colors for each section header
• Gradient Backgrounds: Optional gradient fade effect like in the photos
• Category Badges: Default discourse colored badges next to categories can be toggled on and off
• Subcategories Support: Per-section toggle to show/hide subcategories (indented display)
• Category Hiding: Hide specific categories from all views
• Bidirectional Toggle: Switch between custom sections and default Discourse view (toggle button appears in both views)
• Persistent State: Remembers which sections are open/closed and user’s view preference
• Permission Aware: Only shows categories users have access to
• Ungrouped Categories: Automatically displays any uncategorized categories in a separate section
• Mobile Responsive: Works on all device sizes

Installation

1. Go to Admin → Customize → Themes in your Discourse instance
2. Click Install → From a Git repository
3. Enter: https://github.com/focallocal/sidebar-categories-organizer
4. Click Install
5. Add the component to your active theme

Configuration

Global Settings

• Enable Sidebar Organizer: Turn the custom view on/off
• Show Toggle Button: Display icon to switch between views (appears in both custom and default view headers)
• Show Category Badges: Display colored squares next to category names
• Use Gradient Fade: Enable gradient background effect on section headers (50% solid color, 50% fade to transparent)
• Categories to Hide: Comma-separated category slugs to hide from all views (e.g., staff,private)
• Default View: Choose which view loads by default (custom or default)

Section Settings (1-10)

Each section has:

• Enabled: Toggle section on/off
• Title: Section header text
• Background Color: Color picker for section header background
• Text Color: Color picker for header text
• Categories: Comma-separated category slugs (e.g., general,support,feedback)
• Show Subcategories: Toggle to show/hide subcategories for this section
• Default Open: Whether section starts expanded or collapsed

Finding Category Slugs

Category slugs are in the URL:

• yoursite.com/c/general/5 → slug is general
• yoursite.com/c/feature-requests/12 → slug is feature-requests

Usage

Once installed and configured:

1. Custom View: Categories are grouped into your configured sections with colored headers
2. Expand/Collapse: Click section headers to toggle content visibility
3. Toggle Views: Click the icon in the header to switch between custom and default views
   • In custom view: Toggle button appears in the custom view header
   • In default view: Toggle button appears in the default “Categories” header
4. Subcategories: When enabled per section, subcategories appear indented below parent categories
5. Category Badges: Small colored squares (if enabled) show each category’s color
6. Ungrouped Categories: Any categories not assigned to sections appear in “Other Categories”
7. Preferences: Your view choice and open/closed state are saved per browser

Advanced Features

Gradient Backgrounds

When enabled, section headers use a smooth gradient:

• 50% solid color (your chosen background color)
• 50% fade to transparent
• Creates a modern, sleek appearance

Category Hiding

Specify category slugs to completely hide from the sidebar:

• Useful for staff-only or deprecated categories
• Applies to both custom and default views
• Comma-separated list (e.g., staff,private,archived)

Subcategories

• Toggle per section (not global)
• Indented display with slightly smaller font
• Reduced opacity for visual hierarchy
• Maintains category badge colors

Version

• Current: 1.0.1
• Minimum Discourse: 3.3.0
• Author: Andy@Focallocal

License

MIT License - See LICENSE file

Support

Report issues: GitHub · Where software is built

[Lilly]

Nice work

Category settings tip

Instead of making admins enter category slugs, you can use this in your settings.yml file, for example:

categories_to_hide:
  type: list
  list_type: category
  default: ""
  description:
    en: "Categories to hide from sidebar completely."

which will give you a setting like this:

You can also do the same thing with groups if you ever want to do a group drop down:

groups_this_setting_applies_to:
  type: list
  list_type: group
  default: ""
  description:
    en: "Groups this setting will apply to."

which will give something like this:

[jenmck (jen)]

I really like this and it’s definitely something that’s crossed my mind, so thank you!

Question - if a user doesn’t have access to any categories in a given section, does the section itself still appear to the user?

[NateDhaliwal]

Yes, it does:

javascripts%2Fdiscourse%2Fapi-initializers%2Fsidebar-organizer.js

@Drew-ART Should the condition there be !currentUser || cat.read_restricted instead?

[Drew-ART (Drew)]

No, the category/sub-category is hidden if they don’t have access to it. You can also manually hide any that you choose from it via the settings.

[Drew-ART (Drew)]

Thank you Lilly. I’ll update that and my other recent components to make them better.

[Drew-ART (Drew)]

The component is updated with lovely drop-down category selectors now.

[jenmck (jen)]

Right, got that part - but I mean the actual section, not just the category.

For instance, if I have this setup:

Animals

• Cats
• Dogs

Clouds

• Nimbus
• Cumulus

Days

• Saturday
• Sunday

Let’s say a user does not have access to either the Nimbus or Cumulus categories. Would the Clouds section still appear to the user but with no categories, like this:

Animals

• Cats
• Dogs

Clouds

Days

• Saturday
• Sunday

Or would the Clouds section not appear at all, like this:

Animals

• Cats
• Dogs

Days

• Saturday
• Sunday

[Drew-ART (Drew)]

if a user doesn’t have permission to see any categories in a section, the entire section (tab) would be hidden

[Heliosurge (Dan DeMontmorency)]

This is quite cool!

Keeps me rethinking ideas lol.

I have been toying with the idea to use Doc Categories plugin for laying out custom sections with focused menus. But need a dress up to allow color and icons.

There is a markdown to add the “Install component” to Op.

Did something change in Meta? I can’t seem to highlight something to quote on Android here. - ok seems to have resolved.

[Heliosurge (Dan DeMontmorency)]

Hey Lily could we have the Markdown for “Install Component”

[NateDhaliwal]

Here’s one for this component:

Install this theme component

Markdown format (replace repoName and repoUrl):

[wrap=theme-install-button repoName="Component's name" repoUrl="GitHub repository link"]
Install this theme component
[/wrap]

[Heliosurge (Dan DeMontmorency)]

Thanks Nate. Tried to do a search but maybe too general terms.

[NateDhaliwal]

Oh, I’m not sure if it’s even mentioned anywhere. I took it off the Theme component topic template .

[Heliosurge (Dan DeMontmorency)]

That is cool for sure. Meta may want to consider the zOp’s other TC as it can pre insert a template on topic creation.