From 60a233ce0ec92ca6c6ee17bc8abd054667880c98 Mon Sep 17 00:00:00 2001
From: lvuch <laurenvuchetich@gmail.com>
Date: Wed, 25 Apr 2018 15:58:59 -0700
Subject: [PATCH] more tree fun and top level nav

---
 content/os/_index.md                |  1 +
 content/rancher/_index.md           |  1 +
 layouts/_default/list.html          |  7 ++-----
 layouts/_default/single.html        |  8 +++-----
 layouts/partials/docs-nav.html      |  7 ++++---
 layouts/partials/docs-side-nav.html |  8 +++-----
 src/sass/app.scss                   | 20 +-------------------
 7 files changed, 15 insertions(+), 37 deletions(-)

diff --git a/content/os/_index.md b/content/os/_index.md
index 676c702fffb..b4e087f0188 100644
--- a/content/os/_index.md
+++ b/content/os/_index.md
@@ -1,5 +1,6 @@
 ---
 title: RancherOS Documentation
+shortTitle: RancherOS
 description: RancherOS is a simplified Linux distribution built from containers, for containers. These documents describe how to install and use RancherOS.
 weight: 1
 ---
diff --git a/content/rancher/_index.md b/content/rancher/_index.md
index 4e8e7364c22..e005ada485e 100644
--- a/content/rancher/_index.md
+++ b/content/rancher/_index.md
@@ -1,5 +1,6 @@
 ---
   title: Rancher 2.0 Documentation
+  shortTitle: Rancher 2.0
   weight: 1
 ---
 
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 9ea877b7e6f..adae26a3482 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -17,15 +17,11 @@
 
 {{ define "main" }}
   <div class="wrapper">
-    {{ partial "breadcrumbs.html" . }}
-
     {{ partial "docs-nav.html" . }}
 
     <div class="row m-t-sm">
-      <aside class="col-sm-4 col-xs-12">
-       <div class="bg-default p-a-sm">
+      <aside class="col-sm-3 col-xs-12">
         {{ partial "docs-side-nav.html" . }}
-       </div>
       </aside>
       <article class="col-sm-8 col-xs-12 p-l-lg">
         <div class="main-content ">
@@ -82,5 +78,6 @@
         {{ template "_internal/pagination.html" . }}
       </article>
     </div>
+    {{ partial "breadcrumbs.html" . }}
   </div>
 {{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 348d5518b59..c3be0eb5f09 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -17,16 +17,13 @@
 
 {{ define "main" }}
   <div class="wrapper">
-    {{ partial "breadcrumbs.html" . }}
     {{ partial "docs-nav.html" . }}
 
     <div class="row m-t-sm">
-      <aside class="col-sm-4 col-xs-12">
-       <div class="bg-default p-a-sm">
+      <aside class="col-sm-3 col-xs-12">
         {{ partial "docs-side-nav.html" . }}
-       </div>
       </aside>
-      <article class="col-sm-8 col-xs-12 p-l-lg">
+      <article class="col-sm-8 col-xs-12 p-h-lg">
         <div class="main-content ">
 
       {{ .Content }}
@@ -81,5 +78,6 @@
         {{ template "_internal/pagination.html" . }}
       </article>
     </div>
+    {{ partial "breadcrumbs.html" . }}
   </div>
 {{ end }}
diff --git a/layouts/partials/docs-nav.html b/layouts/partials/docs-nav.html
index 1a1bb8e75ae..27bb1e6f209 100644
--- a/layouts/partials/docs-nav.html
+++ b/layouts/partials/docs-nav.html
@@ -4,7 +4,7 @@
 <nav>
   <!-- tabs -->
   <ul class="tabs row middle-xs">
-    <div class="pull-left m-v-sm">
+    <div class="pull-left p-v-xs">
       <ul class="dropdown sub-menu unstyled">
         <li>
           <a href="{{ .URL }}" class="btn bg-link p-a-0">
@@ -13,7 +13,7 @@
               {{if $.CurrentSection}}
                 {{ if .IsAncestor $.CurrentSection }}
                   {{ $.Scratch.Set "topLevel" . }}
-                  {{ .Title }}
+                  {{ .Params.shortTitle }}
                 {{end}}
               {{end}}
             {{end}}
@@ -23,8 +23,9 @@
 
           <ul class="sub dropdown-menu bg-white unstyled">
           {{ range .Site.Sections }}
-            <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
+            <li><a href="{{ .Permalink }}">{{ .Params.shortTitle }}</a></li>
           {{ end }}
+          <li><a href="https://rancher.com/docs/rancher/v1.6/en/" target="blank">Rancher 1.6</a></li>
           </ul>
         </li>
       </ul>
diff --git a/layouts/partials/docs-side-nav.html b/layouts/partials/docs-side-nav.html
index fd157ef7376..83886fdeb1c 100644
--- a/layouts/partials/docs-side-nav.html
+++ b/layouts/partials/docs-side-nav.html
@@ -1,5 +1,3 @@
-<h3>{{ .Title }}</h3>
-
 <div class="tree-nav">
   <ul>
     {{ template "section-tree-nav" ($.Scratch.Get "secondLevel") }}
@@ -7,12 +5,12 @@
 </div>
 {{ define "section-tree-nav" }}
   {{ range .Sections}}
-    <li class="tree-nav-item bg-white"><a href="{{ .RelPermalink}}">{{ .Title }}</a>
+    <li class="tree-nav-item"><a href="{{ .RelPermalink}}">{{ .Title }}</a>
       {{if gt (len .Sections) 0}}
-        <i class="material-icons pull-right expand-more">expand_more</i>
+        <i class="material-icons pull-right expand-more">add_box</i>
         <ul class="tree-nav-sublist hide">
           {{ range .Pages }}
-          <li class="tree-nav-item-child bg-white"><a href="{{ .RelPermalink}}">{{ .Title }}</a></li>
+          <li class="tree-nav-item-child"><a href="{{ .RelPermalink}}">{{ .Title }}</a></li>
           {{ end }}
           <ul>
             {{ template "section-tree-nav" . }}
diff --git a/src/sass/app.scss b/src/sass/app.scss
index ed371b2deff..36f328c6823 100644
--- a/src/sass/app.scss
+++ b/src/sass/app.scss
@@ -44,6 +44,7 @@
 '../../node_modules/rancher-website-theme/static/scss/components/button',
 '../../node_modules/rancher-website-theme/static/scss/components/dropdown',
 '../../node_modules/rancher-website-theme/static/scss/components/forms',
+'../../node_modules/rancher-website-theme/static/scss/components/tree',
 '../../node_modules/rancher-website-theme/static/scss/components/tabs';
 
 // 6. Page-specific styles
@@ -58,22 +59,3 @@
   visibility: hidden;
   display: none;
 }
-
-.tree-nav {
-  .tree-nav-item {
-    .tree-nav-sublist {
-      &.hide {
-        display: none;
-      }
-    }
-    &.open {
-      >.expand-more {
-        -webkit-transform: rotate(180deg);
-        -moz-transform: rotate(180deg);
-        -ms-transform: rotate(180deg);
-        -o-transform: rotate(180deg);
-        transform: rotate(180deg);
-      }
-    }
-  }
-}