Responsive header, mobile view, search bar

[clagom]

This proposal is especially for brochure websites, with centered header navigation, but can be applied generally across website and web applications for a more flexible responsive behavior. Currently, the length of the search bar combined with the number of items creates a very wide breaking point for the mobile responsive menu to appear.

E.g. in JAAS.ai:

Normal view

The mobile menu appears already at 1030px, hiding both the menu and the search bar

This results in a lot of wasted space, disappearing both the main navigation and the search bar into a collapsed menu for a width that should still be optimized to allow the desktop navigation.

Proposed solution

I would propose a responsive search bar, implementing a collapsed version with just the search icon when the width hits the breaking point, instead of making the navigation disappear, recovering much space for it.

Clicking on the icon we could expand the search bar, allowing for a type entry. Clicking out of the search bard would collapse it again. On further breaking point of the width, the whole thing would get into the mobile "menu".

On a side note, I think the current default search bar is very wide.

[kwm14]

 WG

• Agreed to reduce the width of the search box
• +1 @clagom proposed solution
• @spencerbygraves to explore the design style
• Agreed to add as a modifier to our current search component

[spencerbygraves]

@clagom here are some designs for review, let me know what you think.

Dark version

Light version (for Vanilla, not JAAS)

[clagom]

That's great @spencerbygraves thank you 👍

[bartaz]

We need to clarify with UX the exact behaviour (when the search turns into a collapsed state).

[clagom]

I think this proposal has then been somehow addressed by the work that @anasereijo and @cassiocassio did on the navigation, log-in, search pattern. Still, the specs you are mentioning might still be necessary.

[clagom]

@bartaz @sowasred2012 for this issue could you please have a look at the current implementation on ubuntu.com, would this be enough to bring it in Vanilla?

[clagom]

Continuing here: #3635