Collapsible left nav

[Mandily]

We can gain some screen real estate for heavy content pages by introducing a collapsible left navigation. Users that are working on small screens can manually reduce the width of the menu, while users on bigger screens can simply ignore it and not be affected.

While the menu is collapsed, the icons will still be visible and link to their respective pages. All sub-navs will also be collapsed, but still accessible by hovering over the icon.

Clicking on the collapsed menu will un-collapse the menu so that the user has automatic access to child menu items.

Because some of the menus can bit longer and may even trigger a scrollbar on small screens, I've put the button at the top of the navigation instead of after the nav links.

Please let me know your thoughts in the comments below.

[tvdeyen]

This would be a great addition. 👏

We need to assure, that the label of the menu item is visible while hovering over it. In current Spree 3 admin the label is not shown and therefore it's hard to guess what icon is the desired one.

[Mandily]

That's a good point. I've run into that in other interfaces as well. Are you picturing a browser tooltip-like thing or something more like the UI of the sub nav flyout?

[tvdeyen]

Like the fly out. We shouldn't introduce another visual for the main navigation. That could be confusing.

[sukhchander]

@tvdeyen @Mandily i've implemented the collapsed nav as well as hover. who is working on the implementation of the refactored admin? i'd like to contribute or should i just create a fork?

expanded:

collpased:

[tvdeyen]

@sukhchander I guess @Sinetheta will do the implementation, but please feel free to send a PR. We are happy about every contribution.

How do you handled the missing label in collapsed menus? Your screenshot does not show how a hover state of a collapsed menu item will look like.

[Mandily]

We've been chatting about this issue in the Slack #gui channel and it looks like we're leaning in favour of using a tooltip. It's the easiest to implement (some version of it was part of Spree) and seems the most intuitive out of our options.

I think the trick will be to play with it and get the right amount of delay on the hover. We'll also need to make sure that it's styled so that it's not confused with the sub-navigation.

[tvdeyen]

A delay in UI can be problematic for important information like the main navi entries.

What if we let the tooltip point from top of the icon, so that the fly out does not interfere with it?

[Mandily]

This was originally planned for the 1.2 release, but due to time constraints we'll be moving this to a future release.

[sukhchander]

sounds good

[Mandily]

We've been on pause for this one for a while, but you should see some traction on this one in the next few weeks. We're still aiming to get this in for 1.3.

[Mandily]

Had a quick chat with @Sinetheta to nail down the requirements for this.

• Default open on large screens.
• Default close on small screens.
• Remember user preferences on the computer/device they're using.
• Stays open/close until user changes the preference.
• Label on collapsed nav items to appear on hover. Tooltip should look consistent with admin, but different from menu styles.

[gmacdougall]

Closing due to staleness