Introducing experimental admin sidebar navigation

:mega: Update: the admin sidebar is no longer experimental and is now the only supported navigation in core Discourse.

The reason for the change is to reduce complexity and to make Discourse easier to set up, launch and manage especially for people who are not already experts at Discourse. The reason we no longer support the old horizontal navigation is that it is not practicable to maintain two navigation menus and in any case the structure of the admin section is changing.

Note for self hosters: if you do not see the admin sidebar, you need to change the hidden site setting admin_sidebar_enabled_groups to 1|2 following these instructions.


We have been working internally on some changes around how the navigation structure will work in the admin areas of Discourse. The first part of this work is introducing an admin sidebar. It looks like this:

This sidebar works similarly to the chat sidebar. It is contextual, and it only appears when an admin enters any part of the admin area of the site, and is replaced with the appropriate contextual sidebar when leaving the admin area.

In this first iteration, the navigation links are a simple 1-1 copy of the old top-of-page navigation links. In future, we plan to do some further restructuring here, but for now we wanted to get this initial form out to see what people think.

There are some of caveats, that we hope to address soon:

  • There is currently no replacement for the admin-menu outlet from the old navigation bar
  • There are some inconsistencies around how the UI looks now that the top bar is gone
  • We do not support custom sidebar sections and links in the admin sidebar
  • We are considering how to support Discourse sites that have their own custom theme-based sidebar

This is hidden behind an experimental admin_sidebar_enabled_groups site setting for now. We are opening up the floor for feedback. :rocket:

59 Likes

Only had a quick look so far but it looks good.

There’s no menu entry for Error Logs, but there’s still a horizontal menu for the Logs section which includes a link to Error Logs.

8 Likes

Yes I wasn’t sure about adding this one to the sidebar since it takes you to a completely separate (Logster) page…maybe it would be okay if it opened in a new tab. Will have a think about it :slight_smile:

7 Likes

Hello Martin :wave: Thank you for this awesome update :tada:

I’ve noticed the admin/upgrade page is missing from sidebar and on mobile it isn’t replace the sidebar content but appears under the default sidebar content.

13 Likes

Yes I have the Upgrade button on my list :+1: Can you please share a screenshot of what you mean for mobile?

10 Likes

Thanks, Yeah I mean I have to scroll down on mobile sidebar to see the admin sections. So now it is not works exactly like on desktop. On desktop it only shows the admin sections when I am in/admin but on mobile the admin section is appears below the default sidebar menus. I’ll make screenshot / video about this and update this post. :slightly_smiling_face:

7 Likes

Love this direction :dizzy:

One of my favorite admin sidebars is on the Ghost backend because the filter right on the sidebar is a joy to use. Just want to share the pattern as feedback:

14 Likes

New admin sidebar: when returning back to forum chat-button in the sidebar disappears. This one:

chat separate sidebar mode is full screen, if that means anything. What else… version is 3.2.0.beta4-dev (20f950a116) and I’m sure this started after that upgrading. And safe-mode didn’t help.

Not a major issue. And not too annoyimg either.

6 Likes

@sam brought this up to me in a call the other day too, so you are not alone in thinking this :slight_smile: We are considering this for the next iteration.

Thank you for reporting, I will look into this with the other bugs I have for this :+1:

This is quite odd, I would have expected them to work in the same way on mobile and desktop. I will look into this too.

10 Likes

Thanks Martin, I checked the chat sidebar too and experienced the same on mobile.

3 Likes

Awesome design!!! I like this new design very much

2 Likes

I find this to be a very cumbersome way to navigate on mobile.

If you don’t already know to look in the sidebar, there’s no obvious way to know the sidebar is filled with context specific options.

To navigate between pages, you have to reach the top corner of the screen, scroll to the bottom of the sidebar and do a percise touch to the correct submenu you want. Visually, the admin menu is indistinct from the rest of the sidebar.

In contrast, with the old method, you are immediately presented with the top level sections that are 0 to 1 swipes away and enable you to drill down to find the exact admin subsection you want instead of requiring the user to know in advance.

Overall I like the idea but I think it makes mobile UX worse, not better. I find in general I almost never use the sidebar on mobile. I think it is just too cumbersome to open and maybe the options are too detailed/tiny.

I compared other apps and one thing I noticed is that access to the sidebar is typically a very simple gesture. Discord and Twitter let you just do a quick horizontal swipe to open the sidebar. The ebay app has a button on the bottom menu. My banking app opens the sidebar when you press the back button. The common theme is that all these gestures I would normally do without even thinking but opening the Discourse sidebar on mobile feels like a very deliberate action.

I think for this experimental sidebar to work effectively for me, you need easier access to the mobile menu and also to hide all the non-admin specific settings. The “back to the forum” button is actually a nice touch because it really makes it feel like you are in a separate context when navigating the admin section.

But yeah I guess my advice overall for Discourse is that if the sidebar is going to become an essential navigation feature on mobile, you really need to improve how easy it is to open and close. The fact that my phone is a larger model and that the top part of my screen is currently dead zone for touch input has especially highlighted how inaccessible the sidebar is for me.

11 Likes

There is something weird going on for sure in mobile, and Martin will get it fixed next time he looks at this… likely after the holidays!

We are using the same basic functionality as the sidebar used for chat and forum. So the way they open/close and the way sections and links function will be pretty much the same.

That said, my personal preference has been to make the admin section visually distinct from the forum or chat, and to not allow sites to customize the look and feel of the backend. This way you will know you are in a “backend” admin section that you will want to exit again to rejoin the forum.

@awesomerobot what are your thoughts on this, for the sidebar and maybe even the notification menu? I know we allow swiping to close them by swiping left (sidebar) and swiping right (notificaiton menu). But could we allow more intuitive opening of these menus by swiping right and left?

6 Likes

Would it break back functionality then?

4 Likes

This is a little trickier for us than it is a native app, because we’re web based. Safari on iOS reserves swiping for back/forward nav and last I knew there’s not a good way to work around this… though maybe that’s changed? :thinking: Blocking Navigation Gestures On iOS Safari - PQINA

6 Likes

Also worth noting that in hub, regardless we have full flexibility

5 Likes

Switched in on and my initial reaction was: It keeps things tidy and things are easier to parse. Nice one! :smiley:

5 Likes

And different opinion, because I switched back to old school.

To the top is shorter route and options are easier to reach without need to move sideways and then scroll.

Plus anytime when there is need to work with smaller screen, and in that meaning any standard size iPad is smaller, the sidebar is too difficult to use.

Hopefully old style will stay there as an option.

4 Likes

very unlikely in the long term, we will continue iterating on this, try it out again in a few weeks after we iterate some more.

5 Likes

I would like to make a UX suggestion for this experimental sidebar.

My suggestion:

Add a tab while in the admin menu to switch between the forum menu and the admin sidebar menu at the top, so that you don’t have to exit the admin menu to access a forum menu, and it would allow one less click instead of scrolling down to the admin menu.

This can also improve the mobile issues, since instead of scrolling, you can tap a button and it will take you there.

My sketch of how I think this suggestion could look like:

4 Likes