Top level Navigation, search and hierarchy merger

Looking at how Stack overflow redesigned their navigation bar, I noticed this one thing that could perhaps improve our own top level navigation.

jHJJI

It was the search bar, which was placed at the left, instead of the right (as it is currently).

navigation_currently

We always go on about how our all-gitlab-group-project hierarchy should be clear.. so in that sense what does our "semi-project" level search to in the right hand side?

So in that sense we might have a bit of duplication of content.. if you look at it that way.

Proposal

I propose we use this issue to see if this direction makes sense. I created a few mockups, which step-by-step move away from the current situation. Let's discuss those.

The idea is basically that we merge the search bar and the group/project chooser, which should result in:

  • A more minimal UI using up less space
  • Easy way to (if search field is selected) to search and move between different project by just using the keyboard, no mouse interactions needed.

@cperessini if we'd like this direction we should perhaps look into how we can get this to be consistent with the issue search functionality/looks.

Challenge: How do we make it clear that the user can move between projects and search between projects with this?

  1. navigation_1
  2. navigation_2
  3. navigation_3
  4. navigation_4
  5. navigation_5
  6. navigation_6
  7. navigation_7

The later stages (6. and 7.) do not take 2nd level navigation into account 😉

cc: @awhildy @pedroms @dzaporozhets @cperessini @tauriedavis @sarahod @hazelyang