From 5343017acdea993f32217d70edc55c3a3b4236cf Mon Sep 17 00:00:00 2001
From: Keanu Lee <keanulee@google.com>
Date: Tue, 26 Feb 2019 14:43:50 -0800
Subject: [PATCH] Add section indicator in top nav

---
 _includes/topnav.html |  4 ++--
 css/main.css          | 12 +++++++++++-
 css/theme.css         |  4 ++++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/_includes/topnav.html b/_includes/topnav.html
index e52a938a..24a334c0 100644
--- a/_includes/topnav.html
+++ b/_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 }}/setup">Guide</a>
-  <a class="nav-item" href="{{ site.baseurl }}/faq">FAQ</a>
+  <a class="nav-item{% if page.url != '/' and '/overview/browser-support/sample-apps/setup/configuring-and-personalizing/redux-and-state-management/building-and-deploying/performance-testing/application-testing' contains page.url %} active{% endif %}" href="{{ site.baseurl }}/setup">Guide</a>
+  <a class="nav-item{% if page.url == '/faq' %} active{% endif %}" href="{{ site.baseurl }}/faq">FAQ</a>
   <a class="icon" href="https://github.com/polymer/pwa-starter-kit" title="GitHub">
     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentcolor">
       <path d="M12,2C6.48,2,2,6.59,2,12.25c0,4.53,2.87,8.37,6.84,9.73c0.5,0.09,0.68-0.22,0.68-0.49c0-0.24-0.01-0.89-0.01-1.74c-2.78,0.62-3.37-1.37-3.37-1.37c-0.45-1.18-1.11-1.5-1.11-1.5c-0.91-0.64,0.07-0.62,0.07-0.62c1,0.07,1.53,1.06,1.53,1.06c0.89,1.57,2.34,1.11,2.91,0.85c0.09-0.66,0.35-1.11,0.63-1.37c-2.22-0.26-4.56-1.14-4.56-5.07c0-1.12,0.39-2.03,1.03-2.75c-0.1-0.26-0.45-1.3,0.1-2.71c0,0,0.84-0.28,2.75,1.05c0.8-0.23,1.65-0.34,2.5-0.34c0.85,0,1.7,0.12,2.5,0.34c1.91-1.33,2.75-1.05,2.75-1.05c0.55,1.41,0.2,2.45,0.1,2.71c0.64,0.72,1.03,1.63,1.03,2.75c0,3.94-2.34,4.81-4.57,5.06c0.36,0.32,0.68,0.94,0.68,1.9c0,1.37-0.01,2.48-0.01,2.81c0,0.27,0.18,0.59,0.69,0.49c3.97-1.36,6.83-5.2,6.83-9.73C22,6.59,17.52,2,12,2"/>
diff --git a/css/main.css b/css/main.css
index 4c489172..692d12f9 100644
--- a/css/main.css
+++ b/css/main.css
@@ -139,6 +139,11 @@ time {
   color: inherit;
 }
 
+/* Override TypeDoc theme underline on hover. */
+.main-nav a:hover {
+  text-decoration: none;
+}
+
 .main-nav .nav-title {
   font-size: 18px;
 }
@@ -149,7 +154,8 @@ time {
 
 .main-nav .nav-item {
   font-size: 14px;
-  padding: 0 12px;
+  padding: 18px 12px;
+  align-self: stretch;
 }
 
 .main-nav .icon {
@@ -591,6 +597,10 @@ th, td {
     height: 56px;
     padding-left: 20px;
   }
+  
+  .main-nav .nav-item {
+    padding: 16px 12px;
+  }
 
   main {
     margin-top: 56px;
diff --git a/css/theme.css b/css/theme.css
index 066c8b74..30a2ac21 100644
--- a/css/theme.css
+++ b/css/theme.css
@@ -14,6 +14,10 @@ h1 {
   background: linear-gradient(315deg, #AF6AFF 0%, #6700DF 100%);
 }
 
+.nav-item.active {
+  border-bottom: 2px solid #fff;
+}
+
 .hero-title,
 .hero-link,
 .main-nav {