Topic list sidebar navigation

:warning: Because it uses modern CSS features, this component will not work in Internet Explorer (at all) or versions of Edge, Firefox, Safari, or Chrome that were released before May 2017 (version details here).

: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?


What does this theme component do?

The short version: 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.

The long version: 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.

To build this I used a combination of grid, flexbox, and a value for position called sticky. Sticky is very new to browsers (version support), and as you’d guess, it makes an element sticky on scroll… the nice thing about it is that unlike position: fixed, it doesn’t take your element out of its existing position in the layout. If your browser doesn’t support sticky, the sidebar simply doesn’t stick.

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

24 Likes

It would not be possible to use it with the plugin, if only :frowning:

Custom Layouts Plugin @angus

1 Like

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

10 Likes

Hello

Am using this component with this plugin

i have forked the above plugin and made changes on CSS to show it on the right side.
when install this component Topic list sidebar navigation its showing left but taking the sidebar also to the left

how i can show this component on left and keep the sidebar with HTML Content on right ? so the topic listing stays in middle ?

This theme component breaks when you’re viewing a tag page (site.com/tags/tagname)

See for yourself: Topics tagged quemuse

2 Likes