Navbar Should have a responsive behaviour

[developer-diganta]

Is your feature request related to a problem? Please describe.

Currently navbar does not show responsive behaviour i.e. if screen size decreases the navbar options decrease.

Describe the solution you'd like

Just like most navbars, a hamburger dropdown can be used for small screen sizes.

Additional context

I would like to give this issue a try if it is valid!

[m0ksem]

It would be nice to have some "template" approach or example in Navbar docs.
If you can explain your solution in text without implementation first, I'd like to discuss it! Thanks!

fyi: Previously we were hiding left and right slots on small screen sizes, but it was an awful solution, which leads to unexpected behavior and confuse devs.

[developer-diganta]

what I was thinking was sort of controlling it more using CSS.. like have a hamburger icon (hidden for large devices) and then use the slots to display it in say a dropdown/over the entire screen sort of submenu (like some mobile navbars)? We could use device widths to trigger them?

[m0ksem]

what I was thinking was sort of controlling it more using CSS.. like have a hamburger icon (hidden for large devices) and then use the slots to display it in say a dropdown/over the entire screen sort of submenu (like some mobile navbars)? We could use device widths to trigger them?

You can combine VaLayout and breakpoint service to achieve this. (see Playground)

This way, dev can make any type of layout he needs. e.g. having sidebar on the right side, modal, control fixed position, etc.

[developer-diganta]

Yeah was thinking something on these lines... Should I give it a try then?

[m0ksem]

Yeah was thinking something on these lines... Should I give it a try then?

If we can have this as ready to use templates somewhere in docs similar to layout, then I'm all in for it. We can also simply improve layout templates.