More responsive menu on phones?

[MikiVanousek]

Should we embrace the standard UX design of hidden menu bar on small devices?

Something, in this manner - it disappears when the user scrolls down, but reappears as soon as they change direction. They don't have to scroll all the way down.

I don't think it should be too difficult with Tailwind CSS. I would take care of it.

[jpanther]

Thanks for the suggestion @MikiVanousek, I think it's about time to deal with this issue. I've made some comments previously on this topic (see #88 (comment)) and I'd still like to keep the simple design of the current layout however there have been so many requests for a mobile menu that it does need to be an option.

I personally have not had the time to invest in implementing this feature properly so if you want to have a go at it, I'm happy to look at a PR. Tailwind should be able to handle the CSS side (including transitions) but it will need some basic JS to handle the menu interaction.

It would be good if we can agree on a direction before starting a PR. My general thoughts on this (and I'm happy for any feedback and suggestions here too) are:

• FontAwesome bars SVG icon for the menu link
• Simple list of links that follows the design pattern of the current menu
• Not sure about multi-level menu - do people want this?
• I don't mind your suggestion that the header follows the viewport and reappears on direction change
• No complicated third-party JS libraries to handle the interactions
• Any accessibility and i18n considerations baked in
• Theme config flag to opt-in to the mobile menu (I still prefer the current design to be default as it's a no-JS, clean solution)
• Potential second config flag to opt-in for a hamburger menu even on desktop clients (because I know as soon as we implement this feature someone will want it everywhere and it is probably preferable for people who want a lot of menu links)

Ping @AntoineSoetewey and @cbelena in case you have any feedback to add to this.

[AntoineSoetewey]

This sounds great to me!

Regarding your last point, I think you're right; some people will want to use hamburger menus even on desktop.

[MikiVanousek]

How do I build the documentation? I tried running hugo server -D in both themes/congo and themes/congo/exampleSite.

[jpanther]

How do I build the documentation?

You should be able to use the command npm run example in the congo directory and it will build and run the example site.

[cbelena]

Hi! I agree with all of your points. I would prefer a non-JS solution but I don't know if that is even possible. I think multi-level menus is not necessary.

Thanks to everyone!

[MikiVanousek]

Ok, I will go ahead and implement it with your points of consideration. I will probably skip the multilayer menu. I think someone in need of this feature is in better position to implement it.

[AntoineSoetewey]

Hello @MikiVanousek, may I ask if any progress has been made on this matter?

[MikiVanousek]

I don't know much about web development. It turned out to be a bit more difficult than I anticipated.

Let me try to tackle it again this Saturday. I will let you know.

[MikiVanousek]

I am sorry to let you down, but I have to work on finishing a university project due next Friday this weekend. If you or someone else wants to pick up this enhancement because you don't want to wait, feel free, but let me know. 🙂

[AntoineSoetewey]

Thanks for letting me know and thanks for trying!

Not having a responsive menu is not an option for my friend, which makes sense since most visitors come from mobile and the links in the menu force a huge white space on the left:

Unfortunately, I don’t have the skills to do it myself so if no one is willing to do it, I’ll just change the theme for her website.

Good luck with your university project!

[jpanther]

Thanks for the screenshot. That many links is certainly not what I had in mind when I designed the theme. I have looked at adding a responsive menu a couple of times lately. I think the main issue with this feature will be that everyone will want it to work differently. Even looking at your example on a desktop client, I think that the menu across the top looks ridiculous.

[jpanther]

You will all be pleased to hear that the next release of the theme will finally include a hamburger menu!

I've structured this new feature to now allow various header styles to be selected and it is configurable through a new header.layout theme parameter.

The new hamburger style is now the first style other than the default, which is named basic. I would caution that this is only an initial pass at this feature and it's something that can be expanded upon over time. Currently the hamburger style will simply replace the main menu with a hamburger menu at all viewport sizes. My thinking behind this is that if your menu is long enough to want to hide it under a toggle then you probably want to hide the links on desktops too. Oh, and it's entirely CSS driven so there's no JavaScript required. I'll either further expand this to be more responsive, or create an entirely new style that lets you pick your preferred behaviour but I have no ETA on this because I'm still very busy with my normal work commitments.

Anyway for now this is a step in the right direction. I'd appreciate any feedback or suggestions on how it can be improved... or indeed on other possible header styles entirely.

[AntoineSoetewey]

After having implemented it, I only have one question:

how could I vertically align the text I placed next to the hamburger icon ?

It seems that the text is aligned with the title of the site, but the icon is slightly below.

Here is my file: https://github.com/AntoineSoetewey/docteurelsavancaster/blob/4480ceab027e4d35696f799dff71cb153070146b/layouts/partials/header/hamburger.html#L33

Apart from that, it’s perfect, thanks a lot!

[jpanther]

The simplest way to do this is to make the div containing the icon a flex box. Add flex to the class list and then items-center to align them. You can then wrap the "Menu" text in a span to apply some padding or margins. Note that if you need RTL support you'd need to add extra classes to handle this too. But the simple case is below...

Example:

<div class="flex items-center cursor-pointer ...">
  <span class="mr-2">Menu</span>
  {{ partial "icon.html" "bars" }}
</div>

Output:

[cbelena]

Thank you very much for this, @jpanther! Lately I don't feel very good (personal problems... 😔), but when I feel better, I will try on my yet-to-be-updated site 😉

[jpanther]

Sorry to hear it @cbelena, I hope you feel better soon.

[AntoineSoetewey]

The simplest way to do this is to make the div containing the icon a flex box. Add flex to the class list and then items-center to align them. You can then wrap the "Menu" text in a span to apply some padding or margins. Note that if you need RTL support you'd need to add extra classes to handle this too. But the simple case is below...

Example:

<div class="flex items-center cursor-pointer ...">
  <span class="mr-2">Menu</span>
  {{ partial "icon.html" "bars" }}
</div>

Output:

Thank you very much @jpanther !

[AntoineSoetewey]

Food for thoughts:

I believe some people will want to have the basic layout when the screen is wide, then automatically switch to the hamburger layout when the screen is narrower or on mobile. An example with apple.be:

• It automatically switches from basic to hamburger on desktop:

Screen.Recording.2022-06-27.at.10.04.09.mov

• Hamburger menu on mobile:

Again, your solution is already very nice and I cannot imagine how many hours you spent on your theme, so I am not requesting this feature, but rather proposing ideas.

[jpanther]

Yep, this is exactly the style I had in mind when I was saying that it should be expanded to be further responsive. I think this will probably end up being a third header style choice as there will be some people who just want the hamburger all the time.

[shin-sforzando]

I strongly sympathized with your dialogue here.

#236 is a poor example, but this is what you want to do, right?

[jpanther]

Version 2.4.0 of Congo now has a hybrid menu option that switches between basic and hamburger menus based upon the viewport size.

[AntoineSoetewey]

Thanks a lot @jpanther !