Add section indicator in top nav

ComcastSamples · Feb 26, 2019 · 5343017 · 5343017
1 parent ea844e2
commit 5343017
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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 {