diff --git a/_data/nav_docs.yml b/_data/nav_docs.yml index 86f44eb75..e3b5183ff 100644 --- a/_data/nav_docs.yml +++ b/_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 diff --git a/_plugins/sidebar_item.rb b/_plugins/sidebar_item.rb index a5dda30c7..bfb218b88 100644 --- a/_plugins/sidebar_item.rb +++ b/_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 "#{item["title"]}" end diff --git a/css/react.scss b/css/react.scss index a1d69446e..28858d79a 100644 --- a/css/react.scss +++ b/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 { diff --git a/img/external.png b/img/external.png new file mode 100644 index 000000000..423ec131b Binary files /dev/null and b/img/external.png differ diff --git a/img/external_2x.png b/img/external_2x.png new file mode 100644 index 000000000..fefbe2c1d Binary files /dev/null and b/img/external_2x.png differ