Allow user to undo the collapse of the left side menu on small screens

Report https://twitter.com/untitaker/status/698937923975188480

When I use a large screen I can collapse and expand the left side menu.

On a smaller screen the menu should collapse but I should still be able to expand it.

Currently it collapses but I can't expand it.

/cc @jschatz1 @JobV @dzaporozhets

IMO Mouse-over tooltips for the labels would be the way to go for the collapsed menu. I shouldn't have to expand the whole menu to figure out what stuff means.

1. This looks like a duplicate of https://gitlab.com/gitlab-org/gitlab-ce/issues/12717

"You should be able to collapse and expand on a small screen too."

2. @untitaker That issue about tooltips might be separate? Also, there are currently mouseover tooltips on a collapsed menu. Are you not able to see them? Below is Chrome:

mentioned in issue #12717 (closed)

I agree with @sytses. It should just overlay instead of squeeze on smaller screens.

Milestone changed to 8.8

@JobV @sytses there is a MR for this !2620 (merged)

@jschatz1 woot

This doesn't address the reason why you'd need this request in the first place: "wall of icons". If the icons were listed in a more logical order and organized into groups, they'd be much easier to use.

Here's an example. I reordered them based on what made sense to me, but if it gets implemented, the order should reflect some general users' workflow pattern.

Milestone changed to 8.6

I'd tend to agree with @aaaxx. This issue was responded after I publicly ranted about GitLab's wall of icons, and now it seems to be going in a completely unrelated direction.

@aaaxx like your idea. cc @creamzy @skyruler

Me too @aaaxx @JobV.

mentioned in issue #13594 (closed)

Can we just make it a hamburger menu that slides out from the left for smaller devices? Horizontal space is pretty precious on mobile, and having the Readme/Issue/MR text wrapping constantly is really annoying to read. The sidebar should be hidden by default on mobile, in my opinion.

Something like this is what I'm thinking:

The user would be able to toggle the hamburger menu to open/close the sidebar.

This is what the site looks like (at least, as of a few days ago) on an iPhone 6, it's taking up a solid sixth of the screen:

On an iPhone 5 or other similarly sized device that'd be between 25% and 33% of the screen!

---

Some other things I wanted to suggest now that we're on the topic:

• You may want to rethink the Merge Requests icon, it makes no sense to me and I've been trying to figure it out for a while. Initially I thought it was supposed to be a server rack.
• A "More" flyout for less commonly-used sections, e.g. Forks, Snippets, Graphs, Labels (may want analytics to back this up, but I'd assume those are the least frequently visited). The less options to choose from, the better for new users.
• Maybe go so far as to move Labels to just be accessible through the Issues and Merge Requests views?

I don't know if there's a better issue to put this feedback in, or if I should make my own. Apologies if a better place for this!

This currently works on master.

Tested on actual phone.

Still under discussion if the sidebar should be hidden by default on mobile browsers @dzaporozhets @DouweM please comment on this

I like @connorshea point here.

@creamzy On mobile, can we just show the << so the issue sidebar doesn't take up 1/6th of the screen, like @connorshea points out? Same deal with the navigation sidebar, maybe.

@DouweM @creamzy I can fix in my mr https://gitlab.com/gitlab-org/gitlab-ce/issues/13866

@creamzy yes sidebar should be hidden by default but have button to show it. Mobile screen is very narrow so we should save all horizontal space we can

Mobile screen is very narrow so we should save all horizontal space we can

@dzaporozhets I think the best way to save space on narrow screens is to replace the sidebar completely e.g. by a burger menu, like @connorshea proposed.

@0xffff you mean when left sidebar slides over content by certain trigger?

@dzaporozhets something like here, and my clicking hamburger it overflow the content, I would suggest it from 560 px and less @0xffff @connorshea right?

@creamzy I'd have to see what the open sidebar looks like, but yeah that looks about right!

@connorshea if @dzaporozhets approves the approach, I'll do some responsive video to present

@creamzy approve

@dzaporozhets @creamzy That's exactly what I was thinking.

mentioned in issue #13586 (closed)

Can we close this? looks like already fixed

Good call @alfredo1 I agree.

Status changed to closed