[docs] Update site nav

_layouts/default.html

@@ -45,12 +45,16 @@
           <img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
           React
         </a>
-        <ul class="nav-site">
-          <li><a href="/react/docs/getting-started.html"{% if page.sectionid == 'docs' or page.sectionid == 'tips' %} class="active"{% endif %}>docs</a></li>
-          <li><a href="/react/support.html"{% if page.id == 'support' %} class="active"{% endif %}>support</a></li>
-          <li><a href="/react/downloads.html"{% if page.id == 'downloads' %} class="active"{% endif %}>download</a></li>
-          <li><a href="/react/blog/"{% if page.sectionid == 'blog' %} class="active"{% endif %}>blog</a></li>
-          <li><a href="https://github.com/facebook/react">github</a>
+        <ul class="nav-site nav-site-internal">
+          <li><a href="/react/docs/getting-started.html"{% if page.sectionid == 'docs' or page.sectionid == 'tips' %} class="active"{% endif %}>Docs</a></li>
+          <li><a href="/react/support.html"{% if page.id == 'support' %} class="active"{% endif %}>Support</a></li>
+          <li><a href="/react/downloads.html"{% if page.id == 'downloads' %} class="active"{% endif %}>Download</a></li>
+          <li><a href="/react/blog/"{% if page.sectionid == 'blog' %} class="active"{% endif %}>Blog</a></li>
+        </ul>
+
+        <ul class="nav-site nav-site-external">
+          <li><a href="https://github.com/facebook/react">GitHub</a>
+          <li><a href="http://facebook.github.io/react-native/">React Native</a>
         </ul>
       </div>
     </div>

css/react.scss

@@ -111,25 +111,30 @@ h1, h2, h3, h4, h5, h6 {
     text-decoration: none;
   }
 
-  .nav-site {
+  .nav-site-internal {
+    margin: 0 0 0 20px;
+  }
+
+  .nav-site-external {
     float: right;
     margin: 0;
+  }
 
+  .nav-site {
     li {
       margin: 0;
     }
 
     a {
-      padding: 0 8px;
-      text-transform: uppercase;
-      letter-spacing: 1px;
+      box-sizing: content-box;
+      padding: 0 10px;
       line-height: $navHeight;
       display: inline-block;
       height: $navHeight;
-      color: $mediumTextColor;
+      color: #ddd;
 
       &:hover {
-        color: $lightTextColor;
+        color: #fff;
       }
 
       &.active {
@@ -154,7 +159,8 @@ h1, h2, h3, h4, h5, h6 {
   }
 
   ul {
-    display: inline;
+    display: inline-block;
+    vertical-align: top;
   }
 
   li {