August 20, 2023, 7:37pm 1

Hello, I’m new to Discourse and hope this is a helpful observation- the hamburger menu never changes to a ‘close’ ui so I’ve found myself clicking it thinking I’m about to reveal more stuff, but it closes unexpected. It was already open. I’ve got a few lines of css that I plan on adding as a topic in the ‘theme component’ category when I have more access. Luckily the codebase has proper classes so we can hook onto those based on the sidebar showing or not showing.

.btn-sidebar-toggle::before {
    transition:.2s ease-out all;
    opacity:0;
    content: "+";
    font-size: 32px;
    transform: rotate(0deg);
    position:absolute; left:12px;
}

.btn-sidebar-toggle  svg {
    transition:.2s ease-out all
}

body.has-sidebar-page .btn-sidebar-toggle::before {
    opacity:1;
    transform: rotate(45deg);
}

body.has-sidebar-page .btn-sidebar-toggle svg {
    opacity:0
}

4 Likes

Thank you for this! I would also suggest that the X Close button be moved to inside the Menu itself, at the very top. (In that position I would also add “Close Menu” text to the button, and perhaps use a left-pointing arrow instead of the X.)

← Close Menu or << Close Menu

4 Likes

3 Likes

pfaffman (Jay Pfaffman)

August 24, 2023, 12:18pm 4

I agree that having the little-used hamburger-to-close icon taking up the most valuable upper left easy target space on the window is non-optimal.

Here’s what cloudflare has at the bottom of their sidebar:

Seems like someone who knew a bit more than I about CSS (or maybe the DOM?) could make a theme component pretty quickly, but probably the thing is a PR that fixes the template.

It could even be the top item in the sidebar. . .

3 Likes

2 Likes

pfaffman (Jay Pfaffman)

August 24, 2023, 12:32pm 6

doh!

You make a really good point!

I never said I was a UX guy.

. . . hmm . . . OK

What they do is have the sidebar get collapsed like this:

and the thing at the bottom expands it.

So maybe collapsing the sidebar rather than removing it is a solution. Then if you know what the icons/colors are, you can use it without having it expanded.

Pretty much every site makes the home/icon at the upper left, and having the hamburger there seems wrong.

3 Likes

2 Likes

Ah yes, that makes sense. I think Googlemail have similar, though they keep the hamburger button in the top left:

2 Likes

pfaffman (Jay Pfaffman)

August 24, 2023, 12:39pm 9

With this theme you can see that the hamburger is on a sidebar, though, so it’s sort-of not the upper left corner:

2 Likes

1 Like

I’ve not really played with it before, but it also has an ‘expand on hover’ thing going on too which is quite nice.

I think they have a more distinctive set of icons, which makes deciphering it when collapsed easier than a first glance at Meta’s one leads me to think. Though if you start adding in things like multiple labels then it does suffer the same ambiguity our tags might have:

1 Like

1 Like

Don

December 29, 2023, 9:55am 15

Hello Thanks for sharing.

I use the indent, outdent icons combo to the sidebar toggle on my site.

indent (show sidebar)

outdent (hide sidebar)

2 Likes

I wonder if someone else thinks this needs to be taken up by the Core team.

There are a lot of top communities using the previous UI (with no sidebar) on Discourse because of that.

I found the sidebar super useful to organize large communities like ours, but the current behavior on Discourse is the opposite.

It feels like non-technical folks just don’t know how to use our forums because of small but significant details like this one.

There is always room to improve

Meanwhile I’m testing this Theme Component:

2 Likes

oh i made a theme component for this