From fa92a35f17654882a97e83ccda26a8440c45239e Mon Sep 17 00:00:00 2001
From: Cynthia Lin <cynthialin1004@gmail.com>
Date: Sun, 24 Dec 2017 09:22:33 -0800
Subject: [PATCH] user docs: Highlight currently selected user docs article.

Fixes #7053.
---
 static/js/portico/help.js | 15 ++++++++++++++-
 static/styles/portico.css |  9 +++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/static/js/portico/help.js b/static/js/portico/help.js
index 7d98fc7196..dca8cc5f33 100644
--- a/static/js/portico/help.js
+++ b/static/js/portico/help.js
@@ -17,10 +17,24 @@ function registerCodeSection($codeSection) {
     $li.eq(0).click();
 }
 
+function highlight_current_article() {
+    $('.help .sidebar a').removeClass('highlighted');
+    var path = window.location.href.match(/\/(help|api)\/.+/);
+
+    if (!path) {
+        return;
+    }
+
+    var article = $('.help .sidebar a[href="' + path[0] + '"]');
+    article.addClass('highlighted');
+}
+
 function render_code_sections() {
     $(".code-section").each(function () {
         registerCodeSection($(this));
     });
+
+    highlight_current_article();
 }
 
 (function () {
@@ -53,7 +67,6 @@ function render_code_sections() {
         var path = $(this).attr("href");
         var container = $(".markdown")[0];
 
-
         if (loading.name === path) {
             return;
         }
diff --git a/static/styles/portico.css b/static/styles/portico.css
index 59aabe3158..988a6c2fd3 100644
--- a/static/styles/portico.css
+++ b/static/styles/portico.css
@@ -205,6 +205,15 @@ body {
     display: block;
 }
 
+.help .sidebar li a.highlighted {
+    background-color: hsl(152, 40%, 42%);
+
+    /* Extend highlight to entire width of sidebar, not just link area */
+    width: calc(100% + 20px);
+    margin-left: -40px;
+    padding-left: 40px;
+}
+
 .app.help .hamburger {
     display: none;
 }