From bcd3c02ae42273fb2f68fe1e120a13cd50b7aac9 Mon Sep 17 00:00:00 2001
From: Janic Duplessis <janicduplessis@gmail.com>
Date: Sun, 13 Mar 2016 19:37:23 -0700
Subject: [PATCH] Improve website menu on mobile

Summary:Update the layout of the navbar on mobile.

![image](https://cloud.githubusercontent.com/assets/2677334/13731791/a95ab05a-e948-11e5-837e-ca14c96abb1f.png)

**Test plan (required)**

Tested locally in mobile chrome and safari.
Closes https://github.com/facebook/react-native/pull/6438

Differential Revision: D3046701

Pulled By: vjeux

fb-gh-sync-id: 5c8e10867160db584a9055b29f9dd54e4a4d028f
shipit-source-id: 5c8e10867160db584a9055b29f9dd54e4a4d028f
---
 website/core/HeaderLinks.js                   |  2 +-
 website/src/react-native/css/react-native.css | 69 +++++++++++++++++--
 2 files changed, 65 insertions(+), 6 deletions(-)

diff --git a/website/core/HeaderLinks.js b/website/core/HeaderLinks.js
index 339b4290b..b1921be2a 100644
--- a/website/core/HeaderLinks.js
+++ b/website/core/HeaderLinks.js
@@ -35,7 +35,7 @@ var HeaderLinks = React.createClass({
           </a>
         </li>
       );
-    }, this)
+    }, this);
   },
 
   render: function() {
diff --git a/website/src/react-native/css/react-native.css b/website/src/react-native/css/react-native.css
index a434245dd..d61d0a695 100644
--- a/website/src/react-native/css/react-native.css
+++ b/website/src/react-native/css/react-native.css
@@ -262,7 +262,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
 
 .nav-main .nav-site-external {
   float: right;
-  margin: 0;
+  margin: 0 12px 0 0;
 }
 
 .nav-main .nav-site li {
@@ -299,6 +299,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
   margin-left: 1px;
   width: 34px;
 }
+
 .nav-main a.nav-home {
   color: white;
 }
@@ -316,10 +317,65 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
   font-size: 16px;
   font-weight: 800;
   color: #05A5D1;
-  margin-left: 5px;
+  margin-left: 8px;
   text-decoration: underline;
 }
 
+@media screen and (max-width: 680px) {
+  .nav-main .nav-home {
+    font-size: 20px;
+  }
+
+  .nav-main a.nav-version {
+    font-size: 14px;
+  }
+
+  .nav-main .nav-site-wrapper {
+    display: block;
+    overflow: hidden;
+  }
+
+  .nav-main ul {
+    display: -webkit-flex;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .nav-main li {
+    -webkit-flex: 1;
+    flex: 1;
+  }
+
+  .nav-main .nav-site li a {
+    width: 100%;
+    padding: 0;
+    text-align: center;
+    font-size: 14px;
+  }
+
+  .nav-main .nav-site a.active {
+    color: #05A5D1;
+    font-weight: bold;
+    background-color: transparent;
+  }
+
+  .nav-main .nav-site-internal {
+    margin: 0;
+    width: 100%;
+  }
+
+  .nav-main .nav-site-external {
+    position: absolute;
+    top: 0;
+    right: 0;
+    float: none;
+  }
+
+  .nav-main .nav-site-external li a {
+    padding: 0 6px;
+  }
+}
+
 .hero {
   background: #05A5D1;
   padding: 50px 0;
@@ -1232,10 +1288,13 @@ div[data-twttr-id] iframe {
     margin: 0;
   }
   .nav-main .nav-site a {
-    padding: 0 4px;
+    padding: 0 8px;
+  }
+  .nav-main .nav-home {
+    margin-left: 8px;
   }
   .nav-main .wrap {
-    padding: 0 2px 0 4px;
+    padding: 0;
   }
   .home-divider {
     display: none;
@@ -1258,7 +1317,7 @@ div[data-twttr-id] iframe {
   .nav-docs {
     float: none;
     width: auto;
-    margin-top: -20px;
+    margin-top: -8px;
     margin-bottom: 20px;
   }
   h1 {