Wp-calypso: Nav Unification: Responsive

[cpapazoglou]

Let's implement structural and styling changes so that we achieve a unified mobile experience between calypso and wp-admin when user is using the left nav.

Probably we will remove this

and make it like this, where the WP logo acts as the hamburger memu

Beware, that currently, WP logo in calypso doesn't close the menu. We need to fix that too.

Design

• [x] in calypso remove the white stripe containing the hamburger menu and site name
• [x] in calypso adjust the WP logo so that it toggles the menu without redirecting to home
• [x] check that spacing, padding, margin, font-size are in par with the designs
• [x] check that menus have the correct width
• [x] In wp-admin remove the hamburger menu, move the functionality to WP logo
• [ ] expand - collapse button?
• [ ] wp-admin sidebar state showing only icons?

[cpapazoglou]

@sfougnier Can you please link the final designs?

[obenland]

We have a decision on going with the full-width mobile styles (and removing the little ‘beak’ cutout):
pbAPfg-RE-p2#comment-1709

[cpapazoglou]

@sfougnier in wp-admin for 782px > breakpoint > 960px the sidebar shows only the icons

also this makes more evident that there is an expand - collapse button

Shall we inherit this UI - UX in calypso?

Moreover, as wp-admin makes the menu mobile in < 782px whereas calypso < 660px which one do you suggest following? I would be in favor of following wp-admin so that we don't have not expected surprises in the future.

[sfougnier]

Shall we inherit this UI - UX in calypso?

I would say it would be best to inherit this and not deviate from wp-admin. My only question is whether it would be weird to then click Reader and have the full menu appear.

Moreover, as wp-admin makes the menu mobile in < 782px whereas calypso < 660px which one do you suggest following? I would be in favor of following wp-admin so that we don't have not expected surprises in the future.

Yeah, I agree it makes sense to follow wp-admin for this.

Also, links to the latest designs in Figma: https://www.figma.com/file/9cy0DIowQkPAu0rodb9jsL/WP-Admin-for-Dotcom?node-id=325%3A1681

[cpapazoglou]

Thanks @sfougnier !

My only question is whether it would be weird to then click Reader and have the full menu appear.

I guess we can keep a global state of the sidebar being collapsed, would that work for you?

What I have just thought:
1) is that we can't keep a global state between jumps from calypso and wp-admin. So if a user has collapsed the sidebar in only one of these interfaces, they will see it expanded when clicking a link leading to the other.
2) what are we going to do with site switcher, site card and nudges when collapsed?

We could avoid this by hiding the expand / collapse 😄! Your call!

[sfougnier]

is that we can't keep a global state between jumps from calypso and wp-admin. So if a user has collapsed the sidebar in only one of these interfaces, they will see it expanded when clicking a link leading to the other.

Yeah, I agree this isn't great but I'm not so sure removing the ability to expand/collapse is an option at this point, since we're trying to stick to Core as much as possible.

what are we going to do with site switcher, site card and nudges when collapsed?

Something like this I think makes sense for the collapsed state.

I'm just not so sure about the nudges. The contextual nudge scales well, but the upgrade nudge doesn't really translate to a collapsed version since it has no icon. Do we hide it or add an icon in for the collapsed view? Not sure if that is possible or even makes sense, but I can try to think about this a little more.

[cpapazoglou]

Great @sfougnier, please share here any mockups as soon as you have something! The hover state of the site-switcher, site-card and notices would be useful too!