featheredtoast introduced a theme component designed to move the mobile hamburger menu icon from the right side to the left side of the header. This change aims to improve single-handed usability, as menus in the upper-left corner are more reachable. The component includes an optional feature to center the logo in the header bar, which was added after Paracelsus suggested it as a logical UX improvement. ozkn thanked the author, while featheredtoast clarified that desktop modifications are out of scope for this specific component.
Later in the thread, Lilly reiterated the usability benefits of the left-aligned menu. However, Robin.Grant reported a conflict with another theme component, custom-header-links-icons, which caused layout issues where icons were pushed to a second row. benji identified the cause and featheredtoast implemented a fix in pull request #2. Subsequently, fokx opened a PR to address compatibility issues with a recent Discourse core change. nathank praised the component but noted that the center logo functionality appeared broken on their new site. Finally, Lilly submitted a pull request to fix header issues on foldable phones and tablets when using the Horizon theme.
One thing we never got around to and caused some confusion after our work on Full height, slide out hamburger menu was that the hamburger menu, on the right side, opens a menu from the left side. For those interested in rearranging the header, this is for you:
Mobile menus appearing in the upper-left corner of the screen is not very reachable single-handedly which is why this is a standalone theme component. Options, yanno?
Very nice. Is it possible to extend the component and add the option for the logo to be in the middle of the bar when the menu icon is on the left? I think it’s the most logical way (speaking of ux).
I’d consider desktop out of scope for this particular theme component.
You could certainly do something similar for desktop if you were looking to reposition elements as adopting the same techniques I used here for desktop certainly wouldn’t be too difficult in a separate theme if you’ve got something in mind you’d like to do.
It can be enabled only on tablet? Because that UX fits really good with tablets but not so much with mobile (a lot of people use their smartphones with one hand).
This does not work. Since the hamburger button is already on the top-left corner on desktop, can we make it too on mobile UI in the core code? If not, what is the reason blocking this kind of unification of design.
Thanks for pointing out something I have definitely missed reading. I understand. But can we make it configurable?
The idea is that some users with relatively small-sized mobile phones (e..g. Pixel 7) may not have the reach ability issue and menu popping up from left is very unnatural. If at least something must appear at some corner, why couldn’t it be configured to be menu button (currently is site logo linking to homepage)?
Happy Monday, @Robin.Grant! Just wanted to confirm that these screenshots were taken after downloading the update to the “Left side” theme? Trying to recreate this locally now.
