New doc nav (#47)

Automate doc nav bar generation.

.gitignore

@@ -1,4 +1,5 @@
 _site
+.bundle
 
 # Eclipse artifacts
 .project

_config.yml

@@ -4,6 +4,10 @@ kramdown:
 
 markdown:
   kramdown
+kramdown:
+    input: GFM
+    hard_wrap: false
+    syntax_highlighter: rouge
 
 baseurl: ""
 
@@ -17,3 +21,22 @@ paginate: 2
 paginate_path: "/blog/page:num/"
 
 excerpt_separator: <!--more-->
+
+collections:
+  docs:
+    output: true
+
+gems:
+  - jekyll-redirect-from
+  - jekyll-sitemap
+
+exclude:
+  - README.md
+  - LICENSE
+  - Gemfile
+  - Gemfile.lock
+  - CNAME
+  - CONTRIBUTING.md
+  - .gitignore
+  - Vagrantfile
+  - .vagrant

_docs/concepts/architecture.md

@@ -1,10 +1,14 @@
 ---
-title: What is Istio?
-headline: What is Istio?
-sidenav: doc-side-concepts-nav.html
+title: Architecture
+headline: Architecture
+sidenav: doc-side-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Concepts
+parent: What is Istio?
+order: 30
 ---
 
 {% capture overview %}

_docs/concepts/attributes.md

@@ -1,10 +1,14 @@
 ---
 title: Attributes
 headline: Attributes
-sidenav: doc-side-concepts-nav.html
+sidenav: doc-side-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Concepts
+parent: Policies and Control
+order: 10
 ---
 {% capture overview %}
 The page describes Istio attributes, what they are and how they are used.

_docs/concepts/goals.md

@@ -1,10 +1,14 @@
 ---
 title: Design Goals
 headline: Design Goals
-sidenav: doc-side-concepts-nav.html
+sidenav: doc-side-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Concepts
+parent: What is Istio?
+order: 20
 ---
 
 {% capture overview %}

_docs/concepts/index.md

@@ -1,10 +1,14 @@
 ---
 title: Concepts
 headline: Concepts
-sidenav: doc-side-concepts-nav.html
+sidenav: doc-side-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+index: true
+category: Concepts
+order: 10
 ---
 
 # Concepts

_docs/concepts/mixer-config.md

@@ -1,10 +1,14 @@
 ---
 title: Mixer Configuration
 headline: Mixer Configuration Model
-sidenav: doc-side-concepts-nav.html
+sidenav: doc-side-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Concepts
+parent: Policies and Control
+order: 30
 ---
 
 {% capture overview %}

_docs/concepts/mixer.md

@@ -1,10 +1,14 @@
 ---
 title: Mixer
 headline: Mixer
-sidenav: doc-side-concepts-nav.html
+sidenav: doc-side-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Concepts
+parent: Policies and Control
+order: 20
 ---
 {% capture overview %}
 The page explains Mixer's role and general architecture.

_docs/concepts/network-and-auth.md

@@ -0,0 +1,6 @@
+---
+title: Network and Auth
+category: Concepts
+marker: true
+order: 30
+---

_docs/concepts/overview.md

@@ -1,10 +1,14 @@
 ---
-title: Context and Overview
-headline: Context and Overview
-sidenav: doc-side-concepts-nav.html
+title: Overview
+headline: Overview
+sidenav: doc-side-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Concepts
+parent: What is Istio?
+order: 15
 ---
 
 {% capture overview %}

_docs/concepts/policy.md

@@ -0,0 +1,6 @@
+---
+title: Policies and Control
+category: Concepts
+marker: true
+order: 40
+---

_docs/concepts/request-routing.md

@@ -2,9 +2,13 @@
 bodyclass: docs
 headline: Request Routing
 layout: docs
-sidenav: doc-side-concepts-nav.html
+sidenav: doc-side-nav.html
 title: Request Routing
 type: markdown
+
+category: Concepts
+parent: Traffic Management
+order: 20
 ---
 
 {% capture overview %}

_docs/concepts/resiliency.md

@@ -5,6 +5,10 @@ layout: docs
 sidenav: doc-side-concepts-nav.html
 title: Resiliency
 type: markdown
+
+category: Concepts
+parent: Traffic Management
+order: 30
 ---
 
 {% capture overview %} 

_docs/concepts/service-model.md

@@ -2,11 +2,14 @@
 bodyclass: docs
 headline: Service Model
 layout: docs
-sidenav: doc-side-concepts-nav.html
+sidenav: doc-side-nav.html
 title: Service Model
 type: markdown
----
 
+category: Concepts
+parent: Traffic Management
+order: 0
+---
 {% capture overview %}
 The page explains Istio's overall service model.
 {% endcapture %}

_docs/concepts/traffic-management.md

@@ -0,0 +1,6 @@
+---
+title: Traffic Management
+category: Concepts
+marker: true
+order: 20
+---

_docs/concepts/what-is-istio.md

@@ -0,0 +1,6 @@
+---
+title: What is Istio?
+category: Concepts
+marker: true
+order: 10
+---

_docs/index.md

@@ -1,10 +1,13 @@
 ---
-title: Docs
+title: Welcome
 headline: Welcome
 sidenav: doc-side-home-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+index: true
+order: 0
 ---
 
 # Welcome

_docs/reference/attribute-vocabulary.md

@@ -5,6 +5,9 @@ sidenav: doc-side-reference-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Reference
+order: 30
 ---
 
 Attributes are a central concept used throughout Istio. You can find a description of what attributes are
@@ -23,11 +26,11 @@ deployments will have agents (Envoy or Mixer adapters) that produce these attrib
 |------|------|-------------|--------------------|
 | source.ip | ip_address | The IP address of the client that sent the request. | 10.0.0.117 |
 | source.port | int64 | The port on the client that sent the request. | 9284 |
-| source.name | string | The fully qualified name of the application that sent the request. | redis-master.my-namespace.svc.cluster.local |
-| source.uid | string | A unique identifier for the particular instance of the application that sent the request. | kubernetes://redis-master-2353460263-1ecey.my-namespace |
-| source.namespace | string | The namespace of the sender of the request. | my-namespace |
+| source.name | string | The fully qualified name of the application that sent the request. | redis-master.namespace.deps.cluster.local |
+| source.uid | string | A unique identifier for the particular instance of the application that sent the request. | redis-master-2353460263-1ecey.namespace.pods.cluster.local |
+| source.namespace | string | The namespace of the sender of the request. | namespace.cluster.local |
 | source.labels | map | A map of key-value pairs attached to the source. | |
-| source.user | string | The user running the target application. | service-account |
+| source.user | string | The user running the target application. | service-account@namespace.cluster.local |
 | target.ip | ip_address | The IP address the request was sent to. | 10.0.0.104 |
 | target.port | int64 | The port the request was sent to. | 8080 |
 | target.service | dns_name | The hostname that was the target of the request. | my-svc.my-namespace.svc.cluster.local |
@@ -35,7 +38,7 @@ deployments will have agents (Envoy or Mixer adapters) that produce these attrib
 | target.uid | string | A unique identifier for the particular instance of the application that received the request. | |
 | target.namespace | string | The namespace of the receiver of the request. | |
 | target.labels | map | A map of key-value pairs attached to the target. | |
-| target.user | string | The user running the target application. | service-account |
+| target.user | string | The user running the target application. | service-account@namespace.cluster.local |
 | request.headers | map | A map of HTTP headers attached to the request. | |
 | request.id | string | A unique ID for the request, which can be propagated to downstream systems. This should be a guid or a psuedo-guid with a low probability of collision in a temporal window measured in days or weeks. | |
 | request.path | string | The HTTP URL path including query string | |

_docs/reference/contribute/contributing.md

@@ -0,0 +1,12 @@
+---
+title: Contributing to the Docs
+headline: Contributing to the Docs
+sidenav: doc-side-reference-nav.html
+bodyclass: docs
+layout: docs
+type: markdown
+
+category: Reference
+marker: true
+order: 100
+---

_docs/reference/contribute/creating-a-pull-request.md

@@ -1,10 +1,15 @@
 ---
-title: Doc Pull Requests
+title: Creating a Pull Request
 headline: Creating a Doc Pull Request
 sidenav: doc-side-reference-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Reference
+parent: Contributing to the Docs
+order: 20
+
 ---
 
 To contribute to Istio documentation, create a pull request against the

_docs/reference/contribute/editing.md

@@ -5,6 +5,10 @@ sidenav: doc-side-reference-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Reference
+parent: Contributing to the Docs
+order: 10
 ---
 
 <script language="JavaScript">

_docs/reference/contribute/overview.md

@@ -1,10 +1,14 @@
 ---
-title: Contributing
+title: Overview
 headline: Contributing to the Docs
 sidenav: doc-side-reference-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Reference
+order: 0
+parent: Contributing to the Docs
 ---
 
 # Contributing

_docs/reference/contribute/reviewing-doc-issues.md

@@ -5,6 +5,10 @@ sidenav: doc-side-reference-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Reference
+parent: Contributing to the Docs
+order: 60
 ---
 
 This page explains how documentation issues are reviewed and prioritized for the

_docs/reference/contribute/staging-your-changes.md

@@ -1,10 +1,14 @@
 ---
-title: Staging Docs
+title: Staging Your Changes
 headline: Staging Doc Changes
 sidenav: doc-side-reference-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Reference
+parent: Contributing to the Docs
+order: 40
 ---
 
 This page shows how to stage content that you want to contribute

_docs/reference/contribute/style-guide.md

@@ -5,6 +5,10 @@ sidenav: doc-side-reference-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Reference
+parent: Contributing to the Docs
+order: 70
 ---
 
 TBD: This needs to be updated with Istio examples instead of Kubernetes examples.

_docs/reference/contribute/using-page-templates.md

@@ -1,10 +1,14 @@
 ---
-title: Doc Templates
+title: Using Page Templates
 headline: Using Page Templates
 sidenav: doc-side-reference-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Reference
+parent: Contributing to the Docs
+order: 50
 ---
 
 Individual topics are built using page templates which provide some consistent

_docs/reference/contribute/writing-a-new-topic.md

@@ -1,10 +1,15 @@
 ---
-title: New Doc Topic
+title: Writing a New Topic
 headline: Writing a New Topic
 sidenav: doc-side-reference-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Reference
+parent: Contributing to the Docs
+order: 30
+
 ---
 
 This page shows how to create a new Istio documentation topic.

_docs/reference/glossary.md

@@ -6,6 +6,8 @@ bodyclass: docs
 layout: docs
 type: markdown
 
+category: Reference
+order: 40
 ---
 <div class="container">
     <div class="row">

_docs/reference/index.md

@@ -5,6 +5,11 @@ sidenav: doc-side-reference-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+index: true
+order: 40
+
+category: Reference
 ---
 
 # Reference

_docs/reference/istioctl.md

@@ -1,10 +1,13 @@
 ---
-title: istioctl
+title: The istioctl Command
 headline: 'The istioctl Command'
 sidenav: doc-side-reference-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Reference
+order: 10
 ---
 
 `istioctl` is a command line interface for managing an Istio service mesh.  This overview covers

_docs/reference/release-notes.md

@@ -5,6 +5,9 @@ sidenav: doc-side-reference-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Reference
+order: 50
 ---
 
 TBD

_docs/reference/release-roadmap.md

@@ -1,10 +1,13 @@
 ---
-title: Release Roadmap
+title: Roadmap
 headline: Release Roadmap
 sidenav: doc-side-reference-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Reference
+order: 60
 ---
 
 TBD

_docs/reference/routing-and-traffic-management.md

@@ -5,6 +5,9 @@ layout: docs
 title: Routing & Traffic Management
 type: markdown
 sidenav: doc-side-reference-nav.html
+
+category: Reference
+order: 20
 ---
 
 ## Overview

_docs/reference/writing-config.md

@@ -5,6 +5,9 @@ sidenav: doc-side-reference-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Reference
+order: 70
 ---
 
 {% capture overview %}

_docs/samples/bookinfo.md

@@ -1,10 +1,13 @@
 ---
 title: BookInfo
 headline: 'BookInfo - A Polyglot Microservice App'
-sidenav: doc-side-samples-nav.html
+sidenav: doc-side-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Samples
+order: 10
 ---
 
 {% capture overview %}

_docs/samples/index.md

@@ -1,10 +1,14 @@
 ---
 title: Samples
 headline: Samples
-sidenav: doc-side-samples-nav.html
+sidenav: doc-side-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+index: true
+order: 30
+category: Samples
 ---
 # Samples
 

_docs/tasks/configuring-mixer.md

@@ -1,10 +1,14 @@
 ---
-title: Task X
+title: Configuring Mixer
 headline: Task X
-sidenav: doc-side-tasks-nav.html
+sidenav: doc-side-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Tasks
+order: 110
+
 ---
 {% capture overview %}
 This task shows how to do X in a Kubernetes cluster. You'll learn

_docs/tasks/fault-injection.md

@@ -1,10 +1,13 @@
 ---
-title: Task X
+title: Fault Injection
 headline: Task X
-sidenav: doc-side-tasks-nav.html
+sidenav: doc-side-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Tasks
+order: 60
 ---
 {% capture overview %}
 This task shows how to do X in a Kubernetes cluster. You'll learn

_docs/tasks/index.md

@@ -1,10 +1,15 @@
 ---
 title: Tasks
 headline: Tasks
-sidenav: doc-side-tasks-nav.html
+sidenav: doc-side-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+index: true
+order: 20
+
+category: Tasks
 ---
 # Tasks
 

_docs/tasks/ingress-egress-envoy.md

@@ -1,10 +1,13 @@
 ---
-title: Task X
+title: Configuring Ingress/Egress with Envoy
 headline: Task X
-sidenav: doc-side-tasks-nav.html
+sidenav: doc-side-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+category: Tasks
+
+order: 30
 ---
 {% capture overview %}
 This task shows how to do X in a Kubernetes cluster. You'll learn

_docs/tasks/integrating-services-into-istio.md

@@ -1,10 +1,12 @@
 ---
-title: Task X
+title: Integrating Services into the Mesh
 headline: Task X
-sidenav: doc-side-tasks-nav.html
+sidenav: doc-side-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+category: Tasks
+order: 20
 ---
 {% capture overview %}
 This task shows how to do X in a Kubernetes cluster. You'll learn

_docs/tasks/istio-auth.md

@@ -1,10 +1,13 @@
 ---
-title: Task X
+title: Enabling Istio Auth
 headline: Task X
-sidenav: doc-side-tasks-nav.html
+sidenav: doc-side-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Tasks
+order: 70
 ---
 {% capture overview %}
 This task shows how to do X in a Kubernetes cluster. You'll learn

_docs/tasks/istio-installation.md

@@ -1,10 +1,13 @@
 ---
-title: Installing Istio
+title: Installation
 headline: Installing Istio
-sidenav: doc-side-tasks-nav.html
+sidenav: doc-side-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Tasks
+order: 10
 ---
 {% capture overview %}
 This task shows how to install Istio in a Kubernetes cluster. You'll learn

_docs/tasks/metrics-logs.md

@@ -1,10 +1,13 @@
 ---
-title: Task X
+title: Collecting Metrics and Logs
 headline: Task X
-sidenav: doc-side-tasks-nav.html
+sidenav: doc-side-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Tasks
+order: 80
 ---
 {% capture overview %}
 This task shows how to do X in a Kubernetes cluster. You'll learn

_docs/tasks/request-routing.md

@@ -1,10 +1,13 @@
 ---
-title: Task X
+title: Configuring Request Routing
 headline: Task X
-sidenav: doc-side-tasks-nav.html
+sidenav: doc-side-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Tasks
+order: 50
 ---
 {% capture overview %}
 This task shows how to do X in a Kubernetes cluster. You'll learn

_docs/tasks/resilience-features.md

@@ -1,10 +1,13 @@
 ---
-title: Task X
+title: Adding Resilience Features
 headline: Task X
-sidenav: doc-side-tasks-nav.html
+sidenav: doc-side-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Tasks
+order: 40
 ---
 {% capture overview %}
 This task shows how to do X in a Kubernetes cluster. You'll learn

_docs/tasks/timeout-injection.md

@@ -5,6 +5,9 @@ sidenav: doc-side-tasks-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+category: Tasks
+order: 65
 ---
 
 {% capture overview %}

_docs/tutorials/index.md

@@ -1,10 +1,14 @@
 ---
 title: Tutorials
 headline: Tutorials
-sidenav: doc-side-tutorials-nav.html
+sidenav: doc-side-nav.html
 bodyclass: docs
 layout: docs
 type: markdown
+
+#index: true
+#order: 6
+category: Tutorials
 ---
 
 # Tutorials

_includes/doc-nav.html

@@ -1,15 +0,0 @@
-<div class="container">
-	<div class="row">
-		<div class="col-md-11 nofloat center-block" style="margin-top: 3px;">
-			<ul class="col-sm-10 nav nav-tabs">
-				{% assign active = page.url | downcase | split: '/' %}
-				<li role="presentation" {% if page.url == '/docs/' %}class='active'{% endif %}><a href="{{ site.baseurl }}/docs/">Welcome</a></li>
-				<li role="presentation" {% if active[2] == 'concepts' %}class='active'{% endif %}><a href="{{ site.baseurl }}/docs/concepts">Concepts</a></li>
-				<li role="presentation" {% if active[2] == 'tasks' %}class='active'{% endif %}><a href="{{ site.baseurl }}/docs/tasks">Tasks</a></li>
-				<li role="presentation" {% if active[2] == 'samples' %}class='active'{% endif %}><a href="{{ site.baseurl }}/docs/samples">Samples</a></li>
-				<li role="presentation" {% if active[2] == 'reference' %}class='active'{% endif %}><a href="{{ site.baseurl }}/docs/reference">Reference</a></li>
-			 </ul>
-			 {% include contribute-links.html %}
-		</div>
-	</div>
-</div>

_includes/doc-side-concepts-nav.html

@@ -1,34 +0,0 @@
-<ul class="doc-side-nav doc-side-nav-concepts">
-	{% assign current = page.url | downcase | split: '/' %}
-	<li><h5 class="doc-side-nav-title">Concepts</h5></li>
-	<li class="submenu">
-		<h6 class="arrow-r">What is Istio?</h6>
-		<div class="submenu-content">
-			<a class="submenu-link {% if current[3] == 'overview.html' %}active{% endif %}" href="{{ site.baseurl }}/docs/concepts/overview.html">Overview</a>
-			<a class="submenu-link {% if current[3] == 'goals.html' %}active{% endif %}" href="{{ site.baseurl }}/docs/concepts/goals.html">Goals</a>
-			<a class="submenu-link {% if current[3] == 'architecture.html' %}active{% endif %}" href="{{ site.baseurl }}/docs/concepts/architecture.html">Architecture</a>
-		</div>
-	</li>
-
-	<li class="submenu">
-		<h6 class="arrow-r">Traffic Management</h6>
-		<div class="submenu-content">
-			<a class="submenu-link {% if current[3] == 'service-model.html' %}active{% endif %}" href="{{ site.baseurl }}/docs/concepts/service-model.html">Service Model</a>
-			<a class="submenu-link {% if current[3] == 'request-routing.html' %}active{% endif %}" href="{{ site.baseurl }}/docs/concepts/request-routing.html">Request Routing</a>
-			<a class="submenu-link {% if current[3] == 'resiliency.html' %}active{% endif %}" href="{{ site.baseurl }}/docs/concepts/resiliency.html">Resiliency</a>
-		</div>
-	</li>
-
-	<li class="submenu">
-		<h6 class="arrow-r">Network and Auth</h6>
-	</li>
-
-	<li class="submenu">
-		<h6 class="arrow-r">Policies and Control</h6>
-		<div class="submenu-content">
-			<a class="submenu-link {% if current[3] == 'attributes.html' %}active{% endif %}" href="{{ site.baseurl }}/docs/concepts/attributes.html">Attributes</a>
-			<a class="submenu-link {% if current[3] == 'mixer.html' %}active{% endif %}" href="{{ site.baseurl }}/docs/concepts/mixer.html">Mixer</a>
-			<a class="submenu-link {% if current[3] == 'mixer-config.html' %}active{% endif %}" href="{{ site.baseurl }}/docs/concepts/mixer-config.html">Mixer Configuration</a>
-		</div>
-	</li>
- </ul>

_includes/doc-side-home-nav.html

@@ -1,4 +0,0 @@
-<ul class="doc-side-nav doc-side-nav-home">
-	{% assign current = page.url | downcase | split: '/' %}
-	<li><h5 class="doc-side-nav-title">Welcome</h5></li>
-</ul>

_includes/doc-side-nav.html

@@ -0,0 +1,53 @@
+<ul class="doc-side-nav doc-side-nav-concepts">
+	{% assign current = page.url | downcase | split: '/' %}
+	<li><h5 class="doc-side-nav-title">{{page.category}}</h5></li>
+	{% assign cats = site.docs | where:"category",page.category | sort:"order" %}
+	{% for cat in cats %}
+		{% assign cat_name = cat.title | default: "EMPTY" %}
+		{% assign cat_parent = cat.parent | default: "EMPTY" %}
+		{% unless cat.url contains "index" %}
+			{% if cat_name != "EMPTY" %}
+				{% if cat.marker == true %}
+				<li class="doc-side-nav-list-item">
+					<label class="tree-toggle">
+						<i class="fa fa-lg fa-caret-down"></i>
+						{{ cat_name }}
+					</label>
+					<ul class="list-unstyled tree">
+						{% assign children = site.docs | where:"parent",cat.title | sort:"order" %}
+						{% for child in children %}
+							<li><a href="{{child.url}}">{{ child.title }}</a></li>
+						{% endfor %}
+					</ul>
+				</li>
+				{% endif %}
+				{% if cat.marker != true and cat_parent == "EMPTY" %}
+				<li class="doc-side-nav-list-item">
+					<a href="{{ cat.url }}">{{ cat_name }}</a>
+				</li>
+				{% endif %}
+			{% endif %}
+		{% endunless %}
+	{% endfor %}
+ </ul>
+
+<style>
+    .tree li { padding-left: 20px; }
+    .tree-toggle {
+        cursor: pointer;
+		margin-left: -1em;
+    }
+</style>
+
+<script type="text/javascript">
+(function($) {
+	$(document).ready(function() {
+		/* toggle category tree */
+		$(document).on('click', '.tree-toggle', function () {
+			$(this).children('i.fa').toggleClass('fa-caret-right');
+			$(this).children('i.fa').toggleClass('fa-caret-down');
+			$(this).parent().children('ul.tree').toggle(200);
+		});
+	});
+}(jQuery));
+</script>

_includes/doc-side-reference-nav.html

@@ -1,23 +0,0 @@
-<ul class="doc-side-nav doc-side-nav-reference">
-	{% assign current = page.url | downcase | split: '/' %}
-	<li><h5 class="doc-side-nav-title">Reference</h5></li>
-	<li class="doc-side-nav-list-item"><a href="{{ site.baseurl }}/docs/reference/istioctl.html" {% if current[3] == 'istioctl.html' %}class='current'{% endif %}>The istioctl Command</a></li>
-	<li class="doc-side-nav-list-item"><a href="{{ site.baseurl }}/docs/reference/routing-and-traffic-management.html" {% if current[3] == 'routing-and-traffic-management.html' %}class='current'{% endif %}>Routing and Traffic Management</a></li>
-	<li class="doc-side-nav-list-item"><a href="{{ site.baseurl }}/docs/reference/attribute-vocabulary.html" {% if current[3] == 'attribute-vocabulary.html' %}class='current'{% endif %}>Attribute Vocabulary</a></li>
-	<li class="doc-side-nav-list-item"><a href="{{ site.baseurl }}/docs/reference/glossary.html" {% if current[3] == 'glossary.html' %}class='current'{% endif %}>Glossary</a></li>
-	<li class="doc-side-nav-list-item"><a href="{{ site.baseurl }}/docs/reference/release-notes.html" {% if current[3] == 'release-notes.html' %}class='current'{% endif %}>Release Notes</a></li>
-	<li class="doc-side-nav-list-item"><a href="{{ site.baseurl }}/docs/reference/release-roadmap.html" {% if current[3] == 'release-roadmap.html' %}class='current'{% endif %}>Roadmap</a></li>
-	<li class="doc-side-nav-list-item"><a href="{{ site.baseurl }}/docs/reference/writing-config.html" {% if current[3] == 'writing-config.html' %}class='current'{% endif %}>Writing Configuration</a></li>
-	<li class="submenu">
-		<h6 class="arrow-r"><a href="{{site.baseurl}}/docs/reference/contribute/index.html">Contributing to the Docs</a></h6>
-		<div class="submenu-content">
-			<a class="submenu-link {% if current[4] == 'editing.html' %}active{% endif %}" href="{{ site.baseurl }}/docs/reference/contribute/editing.html">Editing Docs</a>
-			<a class="submenu-link {% if current[4] == 'creating-a-pull-request.html' %}active{% endif %}" href="{{ site.baseurl }}/docs/reference/contribute/creating-a-pull-request.html">Creating a Pull Request</a>
-			<a class="submenu-link {% if current[4] == 'writing-a-new-topic.html' %}active{% endif %}" href="{{ site.baseurl }}/docs/reference/contribute/writing-a-new-topic.html">Writing a New Topic</a>
-			<a class="submenu-link {% if current[4] == 'staging-your-changes.html' %}active{% endif %}" href="{{ site.baseurl }}/docs/reference/contribute/staging-your-changes.html">Staging Your Changes</a>
-			<a class="submenu-link {% if current[4] == 'using-page-templates.html' %}active{% endif %}" href="{{ site.baseurl }}/docs/reference/contribute/using-page-templates.html">Using Page Templates</a>
-			<a class="submenu-link {% if current[4] == 'reviewing-doc-issues.html' %}active{% endif %}" href="{{ site.baseurl }}/docs/reference/contribute/reviewing-doc-issues.html">Reviewing Issues</a>
-			<a class="submenu-link {% if current[4] == 'style-guide.html' %}active{% endif %}" href="{{ site.baseurl }}/docs/reference/contribute/style-guide.html">Style Guide</a>
-		</div>
-	</li>
- </ul>

_includes/doc-side-samples-nav.html

@@ -1,5 +0,0 @@
-<ul class="doc-side-nav doc-side-nav-samples">
-    {% assign current = page.url | downcase | split: '/' %}
-    <li><h5 class="doc-side-nav-title">Samples</h5></li>
-    <li class="doc-side-nav-list-item"><a href="{{ site.baseurl }}/docs/samples/bookinfo.html" {% if current[3] == 'bookinfo.html' %}class='current'{% endif %}>BookInfo</a></li>
-</ul>

_includes/doc-side-tasks-nav.html

@@ -1,13 +0,0 @@
-<ul class="doc-side-nav doc-side-nav-tasks">
-    {% assign current = page.url | downcase | split: '/' %}
-    <li><h5 class="doc-side-nav-title">Tasks</h5></li>
-    <li class="doc-side-nav-list-item"><a href="{{ site.baseurl }}/docs/tasks/istio-installation.html" {% if current[3] == 'istio-installation.html' %}class='current'{% endif %}>Installation</a></li>
-    <li class="doc-side-nav-list-item"><a href="{{ site.baseurl}}/docs/tasks/integrating-services-into-istio.html" {% if current[3] == 'integrating-services-into-istio.html'%}class='current'{% endif %}>Integrating Services into the Mesh</a></li>
-    <li class="doc-side-nav-list-item"><a href="{{ site.baseurl}}/docs/tasks/ingress-egress-envoy.html" {% if current[3] == 'ingress-egress-envoy.html'%}class='current'{% endif %}>Configuring Ingress/Egress with Envoy</a></li>
-    <li class="doc-side-nav-list-item"><a href="{{ site.baseurl}}/docs/tasks/resilience-features.html" {% if current[3] == 'resilience-features.html'%}class='current'{% endif %}>Adding Resilience Features</a></li>
-    <li class="doc-side-nav-list-item"><a href="{{ site.baseurl}}/docs/tasks/request-routing.html" {% if current[3] == 'request-routing.html'%}class='current'{% endif %}>Configuring Request Routing</a></li>
-    <li class="doc-side-nav-list-item"><a href="{{ site.baseurl}}/docs/tasks/fault-injection.html" {% if current[3] == 'fault-injection.html'%}class='current'{% endif %}>Fault Injection</a></li>
-    <li class="doc-side-nav-list-item"><a href="{{ site.baseurl}}/docs/tasks/istio-auth.html" {% if current[3] == 'istio-auth.html'%}class='current'{% endif %}>Enabling Istio-Auth</a></li>
-    <li class="doc-side-nav-list-item"><a href="{{ site.baseurl}}/docs/tasks/metrics-logs.html" {% if current[3] == 'metrics-logs.html'%}class='current'{% endif %}>Collecting Metrics and Logs</a></li>
-    <li class="doc-side-nav-list-item"><a href="{{ site.baseurl}}/docs/tasks/configuring-mixer.html" {% if current[3] == 'configuring-mixer.html'%}class='current'{% endif %}>Configuring Mixer</a></li>
-</ul>

_includes/doc-side-tutorials-nav.html

@@ -1,4 +0,0 @@
-<ul class="doc-side-nav doc-side-nav-tutorials">
-	{% assign current = page.url | downcase | split: '/' %}
-	<li><h5 class="doc-side-nav-title">Tutorials</h5></li>
- </ul>

_includes/doc-top-nav.html

@@ -0,0 +1,17 @@
+<div class="container">
+	<div class="row">
+		<div class="col-md-11 nofloat center-block" style="margin-top: 3px;">
+			<ul class="col-sm-10 nav nav-tabs">
+				{% assign cats = site.docs | where:"index","true" | sort:"order" %}
+				{% for cat in cats %}
+					{% assign active = cat.url | downcase | split: '/' %}
+					{% assign cat_name = cat.title | default: "EMPTY" %}
+					{% if cat.url contains "index" && cat_name != "EMPTY" %}
+					<li role="presentation" {% if page.url == cat.url %}class='active'{% endif %}><a href="{{ site.baseurl }}{{ cat.url }}">{{ cat_name }}</a></li>
+					{% endif %}
+				{% endfor %}
+			 </ul>
+			 {% include contribute-links.html %}
+		</div>
+	</div>
+</div>

_layouts/docs.html

@@ -4,15 +4,15 @@ layout: default
 bodyclass: docs
 ---
 
-{% include doc-nav.html %}
+{% include doc-top-nav.html %}
 
 {% assign current = page.url | downcase | split: '/' %}
-        {% if current[1] == 'docs' and page.sidenav != null %}
+        {% if current[1] == 'docs' %}
         <div class="container">
             <div class="row">
                 <div class="col-md-11 nofloat center-block ">
                     <div class="col-sm-3">
-                        {% include {{page.sidenav}} %}
+                        {% include doc-side-nav.html %}
                     </div>
                     <div class="col-sm-7 {{ page.type }}">
                         {{ content }}

_sass/base/_colors.scss

@@ -1,7 +1,7 @@
 // Brand Colors
-$mainBrandColor: #466BB0;
-$secondBrandColor: #286AC7;
-$thirdBrandColor: #98B2E0;
+$mainBrandColor: #466BB0; //#2DA6B0;
+$secondBrandColor: #286AC7; //#01959f;
+$thirdBrandColor: #98B2E0; //#E7F3F4;
 $inverseBrandColor: #FFFFFF;
 
 // Use as an accent color in small quantities to balance out the main theme.

_sass/modules/_doc-nav.scss

@@ -76,7 +76,7 @@
 	// Add caret to current page
 	.current:before{
 		content: '> ';
-		background-color: $gray;
+		//background-color: $gray;
 	}
 
 	.doc-side-nav-title {

_sass/modules/_nav.scss

@@ -2,6 +2,7 @@
 #common-nav{
   background-color: transparent;
   padding-top: $spacing--xs;
+  padding-bottom: $spacing--xs;
 
   .nav {
     display: none;
@@ -204,7 +205,7 @@
     width: 100%;
     z-index: 9000;
     top: -61px;
-    padding-bottom: 10px;
+    padding-bottom: $spacing--xs;
     transition: $transition--secondary;
     &.on-page {
       top: 0;