Highlight active link in side nav (#504)

Author: keanulee

docs/_config.yml

@@ -11,8 +11,10 @@ collections:
     output: true
   guide:
     output: true
+    permalink: /:collection/:title
   try: 
     output: true
+    permalink: /:collection/:title
 include:
   - "_*_.html"
   - "_*_.*.html"

docs/_guide/index.md

@@ -1,6 +1,7 @@
 ---
 layout: guide
 title: Introduction
+permalink: /guide
 ---
 
 {::options toc_levels="1..3" /}

docs/_includes/topnav.html

@@ -1,8 +1,8 @@
 <nav class="main-nav" markdown="0">
   <a class="nav-title" href="{{ site.baseurl }}/">{{ site.name }}</a>
   <div class="flex"></div>
-  <a class="nav-item" href="{{ site.baseurl }}/try/">Try</a>
-  <a class="nav-item" href="{{ site.baseurl }}/guide/">Guide</a>
+  <a class="nav-item" href="{{ site.baseurl }}/try">Try</a>
+  <a class="nav-item" href="{{ site.baseurl }}/guide">Guide</a>
   <a class="nav-item" href="{{ site.baseurl }}/api/index.html">API</a>
   <a class="icon" href="https://github.com/polymer/lit-element" title="GitHub">
     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentcolor">

docs/_layouts/guide.html

@@ -9,7 +9,7 @@
     <button id="toggleNavButton">Menu</button>
     <ul>
       {%- for item in site.data.guide.toc -%}
-      <li>
+      <li class="{% if page.url == item[1].url %}active{% endif %}">
         <a href="{{site.baseurl}}{{item[1].url}}">{{item[1].title}}</a>
       </li>
       {%- endfor -%}      

docs/_layouts/try.html

@@ -9,7 +9,7 @@
     <button id="toggleNavButton">Menu</button>
     <ul>
       {%- for item in site.data.try.toc -%}
-      <li>
+      <li class="{% if page.url == item[1].url %}active{% endif %}">
         <a href="{{site.baseurl}}{{item[1].url}}">{{item[1].title}}</a>
       </li>
       {%- endfor -%}      

docs/_try/index.md

@@ -1,6 +1,7 @@
 ---
 layout: try
 title: Try LitElement
+permalink: /try
 ---
 
 Try LitElement in live-editable code without installing anything. Build your first component, use it in a web page, and add style with CSS. 

docs/css/main.css

@@ -367,6 +367,10 @@ section p {
   line-height: 22px;
 }
 
+.side-nav li:not(.active) a {
+  color: #222;
+}
+
 /* Article area */
 article {
   flex: 1;