Header navigation needs more thinking

[smolinari]

It was mentioned by a couple of other team members in our team discord server and I too feel the header, although overall it looks good, needs some more thought.

For instance, I'd like to see just one row of links, and they open up to more links (that second layer of navigation) when clicked on for mobile or hovered on desktop.

That first row of links would only be

Get Started
Why Quasar? (we can argue if this or Get Started should be first)
Learn
Support

Put the github, discord, etc. icons next to these main nav items to the right and make the search just the magnifying glass icon to click on to open up to search (like it is for mobile, smaller screen sizes).

The version of Quasar is unimportant on this page. Remove it.

Under Get Started, have the following links open up underneath with:

Quick Install (this page needs to be created I think)
Choose a flavour
How to Use Vue (maybe could go under Learn below)
Upgrade Guide
VS Code Configuration

Under Why Quasar?, have the following links:

App Extensions
Components
Awesome List
Icon Genie
Theme Builder
Dark Mode
Layout Builder

Under Learn

Docs
Blog
Announcements
Roadmap
Video Tutorials

Under Support

Become a Sponsor
Meet the Team (we can argue if this shouldn't be a main nav item itself)
Quasar Brand Resources
Contribute (is currently missing)

If I missed anything, I'm sure it will fit in those four main topics/ nav items.

Scott

[smolinari]

One other point, this suggestion would also mean the underlying "bright" pull-down menus could be removed too, solving: #76

Scott

[NiccoloMenozzi]

The nav bar content has been analyzed to support one of the main goals that we agreed with Razvan almost one year ago when we discussed the opportunity to improve the framework communication and all the side information that until now has been neglected.

Rebranding was the main step. The first step of the new website is exactly to valorise information that has not a direct link to technical aspects, which means focus on the people behind the project, goals, sponsorship necessity, informative content and others. The objective is: beginning a journey that will lead to more sponsorships AND improve the experience of new developers coming. Also we wanted to make a bit of space for managers and other not strictly technical company figures that may want to delve a bit into what they can understand about the framework.
Of course we will need to make other improvement but mainly this involves new pages and better copywriting rather than straight rethinking of navigation, again, now.

The double line is a test to try to highlight some pages and get a more vertical hierarchical structure of content. Font style, colors, vertical position and other choices are all meant to give the right space to everything. The animation to compress the bar during docs consulting is a way to minimize the presence when not needed.
Coming back to a simple nav bar won't allow us to check if bringing up some content will translate into a more informed and participated community. Also Callo tried to collect the pages relevant to newcomers and to put them in the bar.

What probably need more attention, and this is due to lack of time unfortunately, is how it behaves in smaller viewports. I agree that we can do better. Also the height could be reduced a bit, but again, the choice is also motivated by brand identity purpose so I would test it like this before deciding for a change.

[smolinari]

@NiccoloMenozzi - In my suggestion, all links (i.e. "bringing up some content") will be there (and even more), they just won't be directly visible. The header is simply too busy.

Scott