Closed Sidebar by Default

Customization Thema component
1
:information_source: Summary allows admins to control the default behaviour of the Discourse sidebar per group
:hammer_and_wrench: Repository GitHub - nathan-nz/closed-sidebar-by-default: Allows control of the default sidebar behaviour · GitHub
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

This simple Theme Component allows admins to control the default behaviour of the Discourse sidebar per group.

Use case

The most common use-case is a cleaner and simpler UI for casual visitors. For example, if use for Discourse Meta, people would land on this:

image
image1969×1488 262 KB

instead of the rather busier:

image
image1969×1488 416 KB

Settings

There is one setting, a simple group selector. It defaults to anonymous_users (ID 4), but you can use any group(s).

Acknowledgements

Many thanks to @don for making the original Theme Component which this is forked from:

8 likes
Configuring the default sidebar for your users
2

yes, I have been using Don’s version for some months and really like it. I think when a brand new user lands on the site, it can be a little overwhelming, they have no idea what they are looking at. Hiding the sidebar makes the UI a little less confusing. By my way of thinking, once someone visits the site many times they know where to look for the menu when they need it.

3

I like the idea of having the sidebar closed by default. What is the difference between the two theme components?

4

Don’s version doesn’t have a group setting

2 likes
5

Thank you very much. I tried to give you a thumbs up but messed it up by clicking the heart too much, and ended up having to wait “54 seconds”! Hence this short message.

1 like
6

I can see the appeal of having the sidebar closed by default, especially on smaller screens where every bit of space helps. Maybe making it a user preference (or remembering the last state) would be the best compromise, since some people rely on the sidebar constantly while others rarely use it.

7

It does remember the last state usually. However, this component does nix that when active.

Perhaps there is a smarter way to make it so.

1 like
8

Hello :waving_hand:

Thanks @nathank for creating a topic for this theme component! :hugs:

I think something like this should work nowadays. This approach will only close the sidebar on the initial load, and after that, it will fall back to the default behavior (remembering the user’s preference).

import { apiInitializer } from "discourse/lib/api";

const HIDE_SIDEBAR_KEY = "sidebar-hidden";
const INITIALIZED_KEY = "closed-sidebar-by-default-initialized";

export default apiInitializer("1.8.0", (api) => {
  const keyValueStore = api.container.lookup("service:key-value-store");
  const userGroups = settings.user_in_closed_sidebar_groups;

  if (userGroups) {
    if (!keyValueStore.getItem(INITIALIZED_KEY)) {
      keyValueStore.setItem(HIDE_SIDEBAR_KEY, "true");
      keyValueStore.setItem(INITIALIZED_KEY, "true");
    }
  } else {
    if (keyValueStore.getItem(INITIALIZED_KEY)) {
      keyValueStore.removeItem(HIDE_SIDEBAR_KEY);
      keyValueStore.removeItem(INITIALIZED_KEY);
    }
  }
});
1 like
9

The component re-hides the sidebar when you refresh a page. It would be cool if it could be a default state but remember any subsequent changes.