Improve Docs navigation on handheld devices.

[Andreyco]

Fixes#7519

Summary:
JS detects handheld device by sniffing UA string (very primitive detection). If on handheld device, event listener is registered. Event handler toggles Docs Navigation overlay after clicking on "Docs" nav button.
Original Docs Navigation panel is taken out of the natural page flow using pure CSS and is styled to look "good" on device. As a result of this, Navigation overlay is ONLY visible when you are at Docs page, otherwise "Docs" nav button takes you Docs page first.

iPhone/iPad previews

[ghost]

By analyzing the blame information on this pull request, we identified @vjeux and @janicduplessis to be potential reviewers.

[Andreyco]

Also, I am thinking about additional changes.
1. Further improvement
See the picture, current state on the left, proposed state on the right

Right now, nav bar is position: fixed to the top. Part of Scrollable area is underneath, which results in problem - nav bar of unknown height can overflow content underlying scrollable area and it's content. This does happen on small screens, where nav bar is 2 line tall. Padding are used to fix this but as we know this is error prone.

Instead, I propose to make nav bar position: static and use flex to make fill the rest of viewport height and make that area scrollable. Flex is used already, we should not avoid it here.

2. Scrollable sidebar on desktop
There are possible two scenarios:
a, tall content vs short sidebar
b, short content vs tall sidebar

Either of these results in unnecessary scrolling. Making sidebar scrollable will make it independent from page scroll position. Will need to play with it, try out scrolling active link to viewport on page load, ...

Number 2 is possible standalone PR

[Andreyco]

cc @vjeux

[vjeux]

Can you test the same media query that we use in the css to figure out if we should display the mobile version? Or are there cases like on tablet where you want two different versions?

[vjeux]

Actually, I answered my question, it is for tablet. Looks good

[vjeux]

I fear that people may no know how to close that menu. Do you think we should add a X icon at the top right?

[vjeux]

I'm down for your suggestion #2 as well. Flexbox is now well supported (except for ie8-9 but I hope developers don't use those...). As you mentioned, it would indeed be better in a different pull request

[vjeux]

@facebook-github-bot shipit

[vjeux]

Thanks a lot!

[ghost]

Thanks for importing. If you are an FB employee go to Phabricator to review.

[Andreyco]

Can you test the same media query that we use in the css to figure out if we should display the mobile version? Or are there cases like on tablet where you want two different versions?

I certainly could use device screen width (similar to max-device-width used in CSS) and make decision (not) to attach event handler and drop UA sniffing.

I fear that people may no know how to close that menu. Do you think we should add a X icon at the top right?

You are right, I will add close button soon. Also, are you down for proposed change #1 - to make nav bar static If you are, I can deliver both in another PR

I'm down for your suggestion #2 as well. Flexbox is now well supported (except for ie8-9 but I hope developers don't use those...). As you mentioned, it would indeed be better in a different pull request

Great, will work on this...