Topic list sidebar navigation

What does this theme component do?

This takes our standard topic list navigation and puts it into a sticky sidebar (as long as your browser is wider than 768px). You also have the option in the settings to show the sidebar on the right.
We’ve talked about this layout a little bit on Meta previously (Proposing a left-aligned slide out hamburger menu), and I was curious to see what it would be like to simply move our existing navigation to a sidebar.

Keep in mind that since this is a drastic layout change, this component may not be immediately compatible with other themes.

:microscope: Preview it on the theme creator

:link: Github repo: https://github.com/awesomerobot/discourse-sidebar-nav.git

:man_shrugging: How do I install a theme component?

36 Likes

Could you “push” the sidebar further to the side?

It’s possible, but it’s currently designed to use the standard 1110px width that Discourse content exists within.

You could add CSS like this to make the content on pages with the sidebar wider

@media screen and (min-width: 1110px) {
  .navigation-topics,
  .categories-list,
  .tags-page,
  body[class*="category-"]:not(.archetype-regular):not(.archetype-banner) { 
    .wrap {
        max-width: 1400px;
    }
}

You could even go really crazy and set something like max-width: unset; and have a browser-wide topic list

11 Likes

Hello, i wanna display this sidebar on every topic and every category
When in homepage, top menu unstill display normal
How can i do that?

Everytime we wanna search, we must comback to homepage and search them, so lost a long time! :slight_smile:
We should solve this problem!
Thank you!

3 Likes

Incredible theme component!

I think the topic list sidebar should appear in tag lists as well, so when you view say subfolder the sidebar will remain consistent across all pages and serve to be more useful. This will be a very neat feature. :slight_smile:

1 Like

I’m also wondering if this is possible.

1 Like