Page MenuHomePhabricator

Use better site navigation on large screens for Minerva
Open, NormalPublic

Description

Problem

We use hamburger menu for site navigation (home, random, user menu etc)
The hamburger menu UI pattern is not meant for desktops or tablets as it takes way too much space and doesn't provide value.
here>

Solution

We need appropriate navigation on desktop and tablets for Minerva.
We can use the same menu items from hamburger menu and group them into 3 groups

  1. Explore = Home, Random, Nearby

Ways to explore wikipedia and our content

  1. User = Sign in OR userpage, watchlist, contributions, sign out

Ways to access user related pages and tools

  1. Settings

For now there's only 1 item in this list but as we are creating menu ui, it can be expanded as well

Design

Just the menu

  • No hamburger menu at all
  • 3 Menu icons on top right, next to notifications
  • Show dropdown on Hover with highlight effect

Explore

Anonymous user

Signed in user

Developer notes

  • This can be done only using css

Event Timeline

Nirzar created this task.Jul 26 2017, 2:59 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 26 2017, 2:59 AM

This can be done only using css

I think this is oversimplifying things. We'll need to be careful here as these are 2 very different menus. We'll need to think about how we ship the HTML, the CSS and JS. Can you expand on what you mean by this?

Am interested in claiming this once requirements/details are clearer.

Jdlrobson added a subscriber: alexhollender.

@Shreyasminocha I think there may be newer designs and a new direction for making this happen. @alexhollender is there a more up to date ticket that captures providing a better navigation on desktop? I'd love to set @Shreyasminocha with what they need to work on this!

alexhollender triaged this task as Normal priority.Mar 23 2019, 3:09 PM