From 16feeacbf6f4b6ad3fd61bc67849c31bcc0f4b9b Mon Sep 17 00:00:00 2001
From: Vincent Fiduccia <vincent@rancher.com>
Date: Fri, 27 Apr 2018 01:41:40 -0700
Subject: [PATCH] Nav

---
 .../running-rancheros/cloud/gce/_index.md     |  2 +-
 layouts/_default/list.html                    | 10 --
 layouts/partials/docs-nav.html                |  5 +-
 layouts/partials/docs-side-nav.html           | 10 +-
 src/js/app.js                                 | 99 ++++++++++---------
 5 files changed, 58 insertions(+), 68 deletions(-)

diff --git a/content/os/installation/running-rancheros/cloud/gce/_index.md b/content/os/installation/running-rancheros/cloud/gce/_index.md
index 2ba8ed6911d..d2e1f68a257 100644
--- a/content/os/installation/running-rancheros/cloud/gce/_index.md
+++ b/content/os/installation/running-rancheros/cloud/gce/_index.md
@@ -1,5 +1,5 @@
 ---
-title: Google Cloud Engine (GCE)
+title: Google Compute Engine (GCE)
 weight: 106
 ---
 
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 12b1bb123c5..90eebfdae89 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -3,16 +3,6 @@
 {{ end }}
 
 {{ define "hero" }}
-<section class="hero">
-    {{ with .Params.Title }}
-      <h1>{{ . }}</h1>
-    {{end}}
-
-    {{ with .Params.Author }}
-      <span class="byline bg-link">{{ . }}</span>
-    {{end}}
-</section>
-
 {{ end }}
 
 {{ define "main" }}
diff --git a/layouts/partials/docs-nav.html b/layouts/partials/docs-nav.html
index 27bb1e6f209..b0d26e900b5 100644
--- a/layouts/partials/docs-nav.html
+++ b/layouts/partials/docs-nav.html
@@ -33,11 +33,12 @@
     {{ $topLevel := .Scratch.Get "topLevel"}}
     {{ if $topLevel }}
       {{ range $topLevel.Sections }}
-        {{ if .IsAncestor $.CurrentSection }}
+        {{ $isCurrent := .IsAncestor $.CurrentSection }}
+        {{ if $isCurrent }}
           {{ $.Scratch.Set "secondLevel" . }}
         {{ end }}
 
-        <li><a href="{{ .Permalink }}" class="">{{ .Title }}</a></li>
+        <li class="{{if $isCurrent}}active{{end}}"><a href="{{ .Permalink }}">{{ .Title }}</a></li>
       {{ end }}
     {{ end }}
   </ul>
diff --git a/layouts/partials/docs-side-nav.html b/layouts/partials/docs-side-nav.html
index 83886fdeb1c..b87ef0c1100 100644
--- a/layouts/partials/docs-side-nav.html
+++ b/layouts/partials/docs-side-nav.html
@@ -1,4 +1,4 @@
-<div class="tree-nav">
+<div class="tree-nav invisible">
   <ul>
     {{ template "section-tree-nav" ($.Scratch.Get "secondLevel") }}
   </ul>
@@ -7,14 +7,12 @@
   {{ range .Sections}}
     <li class="tree-nav-item"><a href="{{ .RelPermalink}}">{{ .Title }}</a>
       {{if gt (len .Sections) 0}}
-        <i class="material-icons pull-right expand-more">add_box</i>
+        <i class="material-icons pull-right expand-toggle">add_box</i>
         <ul class="tree-nav-sublist hide">
           {{ range .Pages }}
-          <li class="tree-nav-item-child"><a href="{{ .RelPermalink}}">{{ .Title }}</a></li>
+            <li class="tree-nav-item-child"><a href="{{ .RelPermalink}}">{{ .Title }}</a></li>
           {{ end }}
-          <ul>
-            {{ template "section-tree-nav" . }}
-          </ul>
+          {{ template "section-tree-nav" . }}
         </ul>
       {{end}}
     </li>
diff --git a/src/js/app.js b/src/js/app.js
index b36c4a63037..9339ad197ff 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -110,32 +110,6 @@ const bootstrapSlider = function() {
 
 }
 
-const getEvents = function() {
-  return $.get('/events/feed/index.json', (resp)=> {
-    buildEventsList(resp.events);
-  });
-}
-
-const buildEventsList = function(events) {
-  let htmlOut = '';
-  events.sort((a,b) => {
-    return moment(a.eventDate).isBefore(b.eventDate);
-  });
-  events.forEach((el) => {
-    if (moment(el.eventDate).isAfter()) {
-      htmlOut += `<div class="row aside-item">
-            <div class="bg-accent col-md row middle-md center-md"><i class="material-icons">event_available</i></div>
-            <div class="col-md aside-info">
-              <a href="${el.permalink}">${el.title}</a>
-              ${el.eventDate}
-            </div>
-          </div>`;
-    }
-  });
-
-  $('#events-list-injected').html(htmlOut);
-}
-
 const bootstrapSorts = function() {
   if (window.location.pathname.includes('events')) {
     $('.sort-button').on('click', (el)=> {
@@ -176,6 +150,35 @@ const bootstrapSorts = function() {
   }
 }
 
+const toggleNav = function(input, mode="toggle"/*show, hide*/) {
+  let $target = $(input);
+  let children = $target.find('>UL');
+  let icon = $target.find('>.expand-toggle');
+
+  let show = ((mode === 'toggle' && children.hasClass('hide')) || mode === 'show' );
+
+  if (children.length > 0) {
+    if ( show ) {
+      children.removeClass('hide');
+      icon.html('indeterminate_check_box');
+    } else {
+      children.addClass('hide');
+      icon.html('add_box');
+    }
+  }
+
+  if ( show ) {
+    let parent = $target.parent().parent();
+    if ( parent && parent.length ) {
+      toggleNav(parent, 'show');
+    }
+
+    $target.addClass('open');
+  } else {
+    $target.removeClass('open');
+  }
+}
+
 const bootstrapNav = function () {
   // mobile nav
   // init-attaches to js object
@@ -184,35 +187,33 @@ const bootstrapNav = function () {
   $(".js-ml-stack-nav").mlStackNav();
 
   // sidenav
-  $('.tree-nav .tree-nav-item').on('click', function(e) {
+  $('.tree-nav').on('click', '.tree-nav-item', function(e) {
     // actual clicked element
     let target = e.target;
 
-    if (!target.href) {
-      let sub = $(e.currentTarget).find('>ul.tree-nav-sublist');
-
-      // stop it from affecting other nodes
-      e.preventDefault();
-      e.stopPropagation();
-
-      if (sub.length > 0) {
-        sub.toggleClass('hide');
-
-        // parent li rather then actual el clicked
-        $(e.currentTarget).toggleClass('open');
-      }
+    if (target.href) {
+      return;
     }
 
+    // stop it from affecting other nodes
+    e.preventDefault();
+    e.stopPropagation();
+
+    toggleNav(e.currentTarget);
   });
+
+  // epand the current page
+  let cur = $('.tree-nav A[href="'+window.location.pathname+'"]').closest('LI');
+  cur.addClass('active');
+  toggleNav(cur, 'show');
+  $('.tree-nav').removeClass('invisible');
 }
 
 
-bootstrapNav();
-bootstrapDropdowns();
-bootstrapModals();
-bootstrapSorts();
-bootstrapSlider();
-
-if ($('#events-list-injected').length > 0) {
-  getEvents();
-}
+$(document).ready(() => {
+  bootstrapNav();
+  bootstrapDropdowns();
+  bootstrapModals();
+  bootstrapSorts();
+  bootstrapSlider();
+});