Hamburger toggle

UX
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.

discourse-hamburger-toggle

.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
2

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

I think most people use Discourse with the sidebar always enabled (I’d be curious to see stats on various forums). Having a large X that encourages, sort of speaking, of closing a part of the layout that is basically permanent for many users would look a bit weird to me. :thinking:

3 Likes
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:

image

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. . .

2 Likes
5

How do you open it again if the button is in the collapsed sidebar?

2 Likes
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:

image
image149×904 13.1 KB

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.

2 Likes
7

I know this is a different thing but I suspect the side-burger icon is still top right in mobile because on a small touchscreen, I can see tapping the logo by mistake would be a common thing if it were top left beside like on desktop view. Although same could be said about it being near avatar and search icons. :woman_shrugging:t2:

1 Like
8

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

gmail sidebar expanded
gmail sidebar expanded393×645 29.2 KB

gmail sidebar collapsed
gmail sidebar collapsed218×692 17.6 KB

2 Likes
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:

image

2 Likes
10

FWIW I prefer top left for UX designs balance and appearance and have no issue with its open-collapse functionality.

1 Like
11

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:

gamil sidebar label icons

1 Like
12

no to hover tags and category names. hovering is not ideal for touchscreen interfaces either. using desktop mode with hover stufff on an iPad doesn’t really work well.

1 Like
13

I like the hover, as long as the screen tap behaves the same as with a mouse.

Here’s one of my favorite style, on a highly customized Ghost CMS site I built for a client, where hovering anywhere over the sidebar slides open the vertical stack of click/tap links to reveal cascading submenus… it feels very smooth and easy to navigate. You can try it out here:

14

Have you checked this on mobile? Very buggy

15

Hello :wave: Thanks for sharing.

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

indent (show sidebar)
indent-solid

outdent (hide sidebar)
outdent-solid

2 Likes
16

Another possibility (for desktop) is demonstrated on Flarum…