Merge pull request #6090 from joecritch/docs-external-link-icon

[Docs] Added icon for external links in nav

_data/nav_docs.yml

@@ -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

_plugins/sidebar_item.rb

@@ -4,7 +4,14 @@ module Jekyll
       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

css/react.scss

@@ -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 {