How to always show sidebar as menu panel?

Development

AI-generated summary

nolo wants to always show the sidebar as a menu panel, without switching between panel and sidebar views depending on the screen width. kris.kotlarek suggested creating a plugin to override the isNarrowDesktopView function to always return true, providing a code example. nolo successfully implemented this as a theme component, which works well for full-page layouts, but also affects the user-menu, causing it to always slide-in, which is not ideal.

nolo noted that the user-menu panel has different classes than the sidebar menu panel, suggesting the addition of a dedicated class .sidebar-menu to differentiate between the two. The theme component is available on GitHub: https://github.com/nolosb/discourse-sidebar-menu-panel.

1

On a community I’ve enabled the sidebar and adjusted the panel view like that:

image
image480×1313 23.6 KB

I’d always like to use that panel menu and not switch between panel and sidebar depending on view-width. Is there a simple declaration to achieve that?

3

Right now, it is not easily configurable via SiteSetting.

Behavior is controller by NarrowDesktop

The potential solution would be to create a plugin which would overwrite isNarrowDesktopView function to always return true.

Something like initializers/always-narrow-view.js

import NarrowDesktop from "discourse/lib/narrow-desktop";

export default {
  name: "always-narrow-view",

  initialize(container) {
    NarrowDesktop.isNarrowDesktopView = () => true;
  }
}
4

Thank you Kris!! :sunny:

I wrapped it in a theme component and so far seems to work like a charm :sparkles:

https://github.com/nolosb/discourse-sidebar-menu-panel

Will play around and test it a bit more still..

5

So I love how this works for full-page layouts, offering a generous sidebar menu without breaking the layout:

Unfortunately I realized it also changes the user-menu to always slide-in. That’s not such a good experience. I guess it will get more complicated to de-couple the behavior?

As a side-note, I saw that the user menu panel has the classes:
.user-menu.revamped.menu-panel.slide-in
But the sidebar menu panel only has the classes:
.revamped.menu-panel.slide-in
I think it could be helpful to have a dedicated class .sidebar-menu there as well.