coderbm1
diff --git a/‎docs/_data/nav_docs.yml
Lines changed: 2 additions & 0 deletions b/‎docs/_data/nav_docs.yml
Lines changed: 2 additions & 0 deletions
diff --git a/‎docs/_plugins/sidebar_item.rb
Lines changed: 8 additions & 1 deletion b/‎docs/_plugins/sidebar_item.rb
Lines changed: 8 additions & 1 deletion
diff --git a/‎docs/css/react.scss
Lines changed: 16 additions & 0 deletions b/‎docs/css/react.scss
Lines changed: 16 additions & 0 deletions
diff --git a/‎docs/img/external.png
1.22 KB b/‎docs/img/external.png
1.22 KB
diff --git a/‎docs/img/external_2x.png
1.12 KB b/‎docs/img/external_2x.png
1.12 KB
@@ -14,8 +14,10 @@
     title: Videos
   - id: complementary-tools
     title: Complementary Tools
+    href: https://github.com/facebook/react/wiki/Complementary-Tools
   - id: examples
     title: Examples
+    href: https://github.com/facebook/react/wiki/Examples
 - title: Guides
   items:
   - id: why-react
 
@@ -4,7 +4,14 @@ def sidebar_item_link(item)
       pageID = @context.registers[:page]["id"]
       itemID = item["id"]
       href = item["href"] || "/react/docs/#{itemID}.html"
-      className = pageID == itemID ? ' class="active"' : ''
+      classes = []
+      if pageID == itemID
+        classes.push("active")
+      end
+      if item["href"]
+        classes.push("external")
+      end
+      className = classes.size ? "class=\"#{classes.join(' ')}\"" : "";
 
       return "<a href=\"#{href}\"#{className}>#{item["title"]}</a>"
     end
 
@@ -260,6 +260,22 @@ h1, h2, h3, h4, h5, h6 {
     &.active {
       color: $primary;
     }
+
+    &.external {
+      &:after {
+        content: "";
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        padding-left: 5px;
+        @include retina-image('../img/external', 10px 10px);
+        background-position: 100% 0;
+        background-repeat: no-repeat;
+        font-size: 10px;
+        line-height: 1em;
+        opacity: 0.5;
+      }
+    }
   }
 
   .nav-docs-section {