Switch nav design

website/core/HeaderLinks.js

@@ -12,28 +12,39 @@
 var React = require('React');
 
 var HeaderLinks = React.createClass({
-  links: [
+  linksInternal: [
-    {section: 'docs', href: '/react-native/docs/getting-started.html#content', text: 'docs'},
+    {section: 'docs', href: '/react-native/docs/getting-started.html#content', text: 'Docs'},
-    {section: 'support', href: '/react-native/support.html', text: 'support'},
+    {section: 'support', href: '/react-native/support.html', text: 'Support'},
-    {section: 'react', href: 'http://facebook.github.io/react', text: 'react'},
-    {section: 'github', href: 'http://github.com/facebook/react-native', text: 'github'},
   ],
+  linksExternal: [
+    {section: 'github', href: 'http://github.com/facebook/react-native', text: 'GitHub'},
+    {section: 'react', href: 'http://facebook.github.io/react', text: 'React'},
+  ],
+
+  makeLinks: function(links) {
+    return links.map(function(link) {
+      return (
+        <li key={link.section}>
+          <a
+            href={link.href}
+            className={link.section === this.props.section ? 'active' : ''}>
+            {link.text}
+          </a>
+        </li>
+      );
+    }, this)
+  },
 
   render: function() {
     return (
-      <ul className="nav-site">
+      <div className="nav-site-wrapper">
-        {this.links.map(function(link) {
+        <ul className="nav-site nav-site-internal">
-          return (
+          {this.makeLinks(this.linksInternal)}
-            <li key={link.section}>
+        </ul>
-              <a
+        <ul className="nav-site nav-site-external">
-                href={link.href}
+          {this.makeLinks(this.linksExternal)}
-                className={link.section === this.props.section ? 'active' : ''}>
+        </ul>
-                {link.text}
+      </div>
-              </a>
-            </li>
-          );
-        }, this)}
-      </ul>
     );
   }
 });

website/src/react-native/css/react-native.css

@@ -249,7 +249,15 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
   text-decoration: none;
 }
 
-.nav-main .nav-site {
+.nav-main .nav-site-wrapper {
+  display: inline;
+}
+
+.nav-main .nav-site-internal {
+  margin: 0 0 0 20px;
+}
+
+.nav-main .nav-site-external {
   float: right;
   margin: 0;
 }
@@ -259,21 +267,20 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
 }
 
 .nav-main .nav-site a {
-  padding: 0 8px;
+  box-sizing: content-box;
-  text-transform: uppercase;
+  padding: 0 10px;
-  letter-spacing: 1px;
   line-height: 50px;
   display: inline-block;
   height: 50px;
-  color: #aaa;
+  color: #ddd;
 }
 
 .nav-main .nav-site a:hover {
-  color: #fafafa;
+  color: #fff;
 }
 
 .nav-main .nav-site a.active {
-  color: #fafafa;
+  color: #fff;
   border-bottom: 3px solid #05A5D1;
   background: #333;
 }
@@ -294,7 +301,8 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
 }
 
 .nav-main ul {
-  display: inline;
+  display: inline-block;
+  vertical-align: top;
 }
 
 .nav-main li {