feat: improvement of nav menu placement in header when in mobile view.

[StephenOTT]

🙋 Feature Request

Currently in the default app template the menu looks like:

Commonly as in the image above, devs will add menus and other options into the header with right alignment.

When you go into mobile view you get the re-placement of the menu hamburger into the top right, but as we see it overlaps with items in the header:

Feature request is to provide a better pattern for adding things into the header with responsiveness and alignment with the main nav.

[vnbaaij]

The template is just a starter application, not a solve-all, end-all solution. These kind of changes are something I feel should be left to the developer.

We could take a look at extending the header component to add some options to change/alter its layout. Seems like a good community contribution.

[StephenOTT]

What do you imagine missing from the header component?

You can pretty easily modify the current header with fluent Grid items using the hiddenWhen argument.

Agreed 100% that the template is a starter; however that starter ends up needing the same modifications (such as fixing css and layouts) so the top right of the app can be used with the default mobile menu. In its current form, if you use the top right, the menu behaviour makes the top right unusable for mobile sizes without modifications

[vnbaaij]

What do you imagine missing from the header component?

Maybe a more granular way of how items are placed in the available area?

You can pretty easily modify the current header with fluent Grid items using the hiddenWhen argument.

Exactly my point. It is not that hard to change

Agreed 100% that the template is a starter; however that starter ends up needing the same modifications (such as fixing css and layouts) so the top right of the app can be used with the default mobile menu. In its current form, if you use the top right, the menu behaviour makes the top right unusable for mobile sizes without modifications

You only need to make those (not so difficult) changes if you want to do something with that area. I'm not sure if that is such a heavily used requirement (but I might be wrong there). This is the first time this has come up.

The goal is to keep the templates as simple as possible and, like I said, a starting point. Rather than adding something like this, I would like to have an example of how it can be changed documented in the demo site so it can be easily copied and applied in a template based site/app.

[vnbaaij]

@StephenOTT Have you already made these kind of changes to the template? Can you post here a sample of what you have done to be included in the docs?

[vnbaaij]

I'm making a small change to the templates for accomodating this. Changing the .header-gutter class to make room for the nav menu icon for max-width: 600px. Anything placed to the right will kep out of the icon area.

And in RTL mode (which used to place the nav icon in the wrong place until now, nobod noticed apparently)