From cf5ab5c066fb3f3b5eb4fbf53d65ae4d811aee3f Mon Sep 17 00:00:00 2001
From: Vincent Fiduccia <vincent@rancher.com>
Date: Mon, 24 Jun 2019 17:20:13 -0700
Subject: [PATCH] Fix nav

---
 assets/sass/_ml-stack-nav.scss      | 136 ----------------------
 layouts/_default/list.html          | 172 +++++-----------------------
 layouts/partials/docs-side-nav.html | 127 +++++++++++++-------
 layouts/partials/page-nav.html      |   1 -
 package.json                        |   1 -
 5 files changed, 110 insertions(+), 327 deletions(-)
 delete mode 100644 assets/sass/_ml-stack-nav.scss

diff --git a/assets/sass/_ml-stack-nav.scss b/assets/sass/_ml-stack-nav.scss
deleted file mode 100644
index 19818e6f5ee..00000000000
--- a/assets/sass/_ml-stack-nav.scss
+++ /dev/null
@@ -1,136 +0,0 @@
-/*!
- * ml-stack-nav - v1.1.3
- * Customizable, responsive, accessible, easy-to-use multi-level stack navigation menu with slide effect.
- * https://github.com/damianwajer/ml-stack-nav
- * 
- * Author: Damian Wajer
- * License: MIT
- * 
- * @preserve
- */
-.ml-stack-nav-toggle {
-  position: relative;
-  display: inline-block;
-  overflow: hidden;
-  padding: 0;
-  width: 26px;
-  height: 22px;
-  border: 0;
-  background: none;
-  color: #525261;
-  cursor: pointer;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-}
-.ml-stack-nav-toggle__line {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: block;
-  width: 100%;
-  height: 4px;
-  border-radius: 9px;
-  background: #525261;
-  opacity: 1;
-  -webkit-transition: 0.3s ease-in-out;
-  transition: 0.3s ease-in-out;
-  -webkit-transform: rotate(0deg);
-          transform: rotate(0deg);
-}
-.ml-stack-nav-toggle__line:nth-child(2) {
-  top: 9px;
-}
-.ml-stack-nav-toggle__line:nth-child(3) {
-  top: 18px;
-}
-.ml-stack-nav-toggle.is-active .ml-stack-nav-toggle__line:nth-child(1) {
-  top: 9px;
-  left: 50%;
-  width: 0;
-}
-.ml-stack-nav-toggle.is-active .ml-stack-nav-toggle__line:nth-child(2) {
-  -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
-}
-.ml-stack-nav-toggle.is-active .ml-stack-nav-toggle__line:nth-child(3) {
-  top: 9px;
-  -webkit-transform: rotate(-45deg);
-          transform: rotate(-45deg);
-}
-
-.ml-stack-nav {
-  position: absolute;
-  right: 0;
-  left: 0;
-  z-index: -1;
-  overflow: hidden;
-  box-sizing: border-box;
-  height: 100%;
-}
-.ml-stack-nav *,
-.ml-stack-nav *:after,
-.ml-stack-nav *:before {
-  box-sizing: inherit;
-}
-.ml-stack-nav__menu {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 20px;
-  z-index: 900;
-  visibility: hidden;
-  margin: 0;
-  padding: 0;
-  border: 1px solid #000;
-  background-color: #fff;
-  list-style-position: inside;
-  -webkit-transition: visibility 0.3s, -webkit-transform 0.3s;
-  transition: visibility 0.3s, -webkit-transform 0.3s;
-  transition: transform 0.3s, visibility 0.3s;
-  transition: transform 0.3s, visibility 0.3s, -webkit-transform 0.3s;
-  -webkit-transform: translate3d(100%, 0, 0);
-          transform: translate3d(100%, 0, 0);
-}
-.ml-stack-nav > .ml-stack-nav__menu {
-  left: 0;
-}
-.ml-stack-nav--slide-left .ml-stack-nav__menu {
-  right: 20px;
-  left: 0;
-  -webkit-transform: translate3d(-100%, 0, 0);
-          transform: translate3d(-100%, 0, 0);
-}
-.ml-stack-nav--slide-left > .ml-stack-nav__menu {
-  right: 0;
-}
-.no-js .ml-stack-nav:target {
-  position: static;
-  visibility: visible;
-  -webkit-transform: translate3d(0, 0, 0);
-          transform: translate3d(0, 0, 0);
-}
-.no-js .ml-stack-nav:target .ml-stack-nav__menu {
-  position: static;
-  visibility: visible;
-  -webkit-transform: translate3d(0, 0, 0);
-          transform: translate3d(0, 0, 0);
-}
-.no-js .ml-stack-nav .ml-stack-nav__next,
-.no-js .ml-stack-nav .ml-stack-nav__back {
-  display: none;
-}
-
-.is-open > .ml-stack-nav__menu {
-  visibility: visible;
-  -webkit-transform: translate3d(0, 0, 0);
-          transform: translate3d(0, 0, 0);
-}
-
-.is-active > .ml-stack-nav__menu {
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-/*# sourceMappingURL=ml-stack-nav.css.map */
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index dec59458e2c..a08977e4c4e 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -18,36 +18,35 @@
 
       <div class="row max-sized contents-container background-base-gray-side">
         <div class="
-        col-xl-3 
-        col-lg-4 
-        col-md-4 
-        col-sm-12 
-        col-xs-12 
-        col-12 
+        col-xl-3
+        col-lg-4
+        col-md-4
+        col-sm-12
+        col-xs-12
+        col-12
         side-menus">
         <div class="search-container">
           <input class="search input" placeholder="SEARCH" />
         </div>
 
-        
         <!-- <div class="side-menus-wrap jquery-accordion-menu"> -->
         {{ partial "docs-side-nav.html" . }}
         <!-- </div> -->
       </div>
       <div class="
-        col-xl-9 
-        col-lg-8 
-        col-md-8 
-        col-sm-12 
-        col-xs-12 
-        col-12 
+        col-xl-9
+        col-lg-8
+        col-md-8
+        col-sm-12
+        col-xs-12
+        col-12
         texts-container">
         <div class="docs-wrap">
             {{ with .Params.Title }}
             <h1 class="m-t-0">{{ . }}</h1>
             <hr/>
           {{end}}
-    
+
           {{ if .Params.ctaBanner }}
             {{ with index .Site.Data.cta .Params.ctaBanner }}
               <div class="docs-banner">
@@ -69,23 +68,23 @@
               </div>
             {{ end }}
           {{ end }}
-    
+
           <div class="main-content docs-body">
             <!-- this is a test -->
             <!-- {{ partial "page-nav.html" . }} -->
             <!-- end test -->
             {{ .Content }}
-    
+
             {{ $paginator := .Scratch.Get "paginator" }}
             {{ range $paginator.Pages }}
               <div class="box m-b-md">
                 <div class="p-a-sm">
                   <h3><a href="{{.URL}}">{{.Title}}</a></h3>
-    
+
                   {{ if .Params.Image }}
                     <div class="thumbnail"><img src="{{ .Params.Image }}" alt="{{ .Params.Title }}"></div>
                   {{end}}
-    
+
                   <p>{{ .Summary | safeHTML }}</p>
                   {{ if .Truncated }}
                   <div>
@@ -95,38 +94,38 @@
                 </div>
                 <div class="bg-default">
                   <div class="row">
-    
+
                     {{ with .Params.Author }}
                       <div class="p-h-sm p-v-xs"><i class="material-icons">person_outline</i> By: {{ . }}</div>
                     {{end}}
-    
+
                     {{ if eq .Section "events" }}
                       {{ with .Params.EventDate }}
                         <div class="p-h-sm p-v-xs"><i class="material-icons">event</i> {{ . }}</div>
                       {{end}}
-    
+
                     {{ else }}
-    
+
                       {{ with .Params.Date }}
                         <div class="p-h-sm p-v-xs"><i class="material-icons">event</i> {{ .Format "January 2, 2006" }}</div>
                       {{end}}
                     {{end}}
-    
+
                     {{ if eq .Section "blog" }}
                       <div class="p-h-sm p-v-xs"><i class="material-icons">timer</i> Read Time: {{.ReadingTime}} minutes</div>
                     {{end}}
-    
+
                     {{ with .Params.Location }}
                       <div class="p-h-sm p-v-xs"><i class="material-icons">location_on</i> {{ . }}</div>
                       {{end}}
-    
+
                   </div>
                 </div>
               </div>
               {{ end }}
             </div>
             {{ template "_internal/pagination.html" . }}
-    
+
             <div class="p-v-xs">{{ partial "page-edit.html" . }}</div>
           </article>
           <!-- {{ with .TableOfContents }}
@@ -144,125 +143,8 @@
 
   <script>
     $(document).ready(function() {
-      // Side menu script
-      ;(function ( $, window, document, undefined ) {
-        var pluginName = "jqueryAccordionMenu";
-        var defaults = {
-          speed: 300,
-          showDelay: 0,
-          hideDelay: 0,
-          singleOpen: true,
-          clickEffect: true
-        };
-
-        function Plugin ( element, options ) {
-          this.element = element;
-          this.settings = $.extend( {}, defaults, options );
-          this._defaults = defaults;
-          this._name = pluginName;
-          this.init();
-        };
-          
-        $.extend(Plugin.prototype, {
-          
-          init: function () {
-            this.submenuIndicators();
-            this.openSubmenu();
-            if(this.settings.clickEffect){
-              this.addClickEffect();
-            }
-          },
-          
-          openSubmenu: function () {
-            var touchmoved;
-                opts = this.settings; //to differ from local variable "this"
-
-            $(this.element).children("ul").find("li").find('.submenu-indicator').bind("click", function(e){
-              var targetElement = $(this).parent().parent()
-              e.preventDefault();
-
-              if (targetElement.attr('class') === 'back-to-the-top') {
-                $('.side-menus-container').scrollTop(0);
-              }
-
-              if(targetElement.children(".submenu").length > 0) {
-                if(targetElement.children(".submenu").css("display") == "none") {
-                  targetElement.children(".submenu").delay(opts.showDelay).slideDown(opts.speed);
-                  targetElement.children(".submenu").siblings("a").addClass("submenu-indicator-minus");
-                  targetElement.addClass("activate");
-                  if(opts.singleOpen){
-                    targetElement.siblings().children(".submenu").slideUp(opts.speed);
-                    targetElement.siblings().children(".submenu").siblings("a").removeClass("submenu-indicator-minus");
-                    targetElement.removeClass("activate");
-                  }
-                  return false;
-                } else {
-                  targetElement.children(".submenu").delay(opts.hideDelay).slideUp(opts.speed);
-                  targetElement.removeClass("activate");
-                }
-                if(targetElement.children(".submenu").siblings("a").hasClass("submenu-indicator-minus")){
-                  targetElement.children(".submenu").siblings("a").removeClass("submenu-indicator-minus");
-                }
-              }
-            });
-            // .on('touchmove', function(e) {
-            //   touchmoved = true;
-            // }).on('touchstart', function(e) {
-            //   touchmoved = false;
-            // });
-          },
-          
-          submenuIndicators: function () {
-            if($(this.element).find(".submenu").length > 0){
-              $(this.element).find(".submenu").siblings("a").append("<span class='submenu-indicator'><span class='object1'></span><span class='object2'></span><span class='object3'></span></span>");
-            }
-          },
-          
-          addClickEffect: function () {
-            var ink, d, x, y;
-            $(this.element).find("a").bind("click touchstart", function(e){
-              $(".ink").remove();
-              
-              if($(this).children(".ink").length === 0){
-                $(this).prepend("<span class='ink'></span>");
-              }
-              
-              ink = $(this).find(".ink");
-              ink.removeClass("animate-ink");
-              
-              if(!ink.height() && !ink.width()){
-                d = Math.max($(this).outerWidth(), $(this).outerHeight());
-                ink.css({height: d, width: d});
-              }
-              
-              x = e.pageX - $(this).offset().left - ink.width()/2;
-              y = e.pageY - $(this).offset().top - ink.height()/2;
-  
-              ink.css({top: y+'px', left: x+'px'}).addClass("animate-ink");
-            });
-          }
-        });
-
-        $.fn[ pluginName ] = function ( options ) {
-          this.each(function() {
-            if ( !$.data( this, "plugin_" + pluginName ) ) {
-              $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
-            }
-          });
-          return this;
-        };
-      })( jQuery, window, document );
-
-      var sideNavMenus = $('.side-menus-container');
-      sideNavMenus.jqueryAccordionMenu();
-
-      var sideNavMenusMobile = $('.docs-container .side-menus');
       $('.guide-menus-activator').click(function() {
-        if (sideNavMenusMobile.hasClass('show')) {
-          sideNavMenusMobile.removeClass('show');
-        } else {
-          sideNavMenusMobile.addClass('show');
-        }
+        $('.docs-container .side-menus').toggleClass('show');
       });
 
       // anchor click control.
@@ -280,7 +162,7 @@
           if (scrn < scrn_check) {
             depth = 120;
           }
-          
+
           if (objt_mt > 0) {
             depth = depth + objt_mt
           }
diff --git a/layouts/partials/docs-side-nav.html b/layouts/partials/docs-side-nav.html
index 964e25524a5..2e24d5e5a94 100644
--- a/layouts/partials/docs-side-nav.html
+++ b/layouts/partials/docs-side-nav.html
@@ -12,26 +12,29 @@
 {{end}}
 
 <!-- product dropdown -->
-<div class="side-menus-container product-select jquery-accordion-menu">
+<div class="side-menus-container product-select tree-nav jquery-accordion-menu">
   <ul class="side-menus-wrap">
-    <li class="">
-      <a href="{{ ($.Scratch.Get "topLevel").Permalink }}" class="">
-        <span class="">
-          {{ range $product := $.Site.Sections }}
-            {{ range $version := .Sections }}
-              {{ range $language := .Sections }}
-                {{if $.CurrentSection}}
-                  {{ if .IsAncestor $.CurrentSection }}
-                    {{ .Params.shortTitle }}
-                  {{end}}
+    <li class="tree-nav-item">
+      <a>
+        {{ range $product := $.Site.Sections }}
+          {{ range $version := .Sections }}
+            {{ range $language := .Sections }}
+              {{if $.CurrentSection}}
+                {{ if .IsAncestor $.CurrentSection }}
+                  {{ .Params.shortTitle }}
                 {{end}}
               {{end}}
             {{end}}
           {{end}}
+        {{end}}
+        <span class="submenu-indicator">
+          <span class="object1"></span>
+          <span class="object2"></span>
+          <span class="object3"></span>
         </span>
       </a>
 
-      <ul class="submenu submenus-wrap">
+      <ul class="tree-nav-sublist submenu submenus-wrap hide">
         {{ range $product := $.Site.Sections }}
           {{ range $version := .Sections }}
             {{ range $language := .Sections }}
@@ -48,11 +51,11 @@
 </div>
 
 <div class="guide-menus-activator">
-{{ if .Title }}
-{{.Title}} 
-{{ else }}
-Quick Start Guide
-{{end}}
+  {{ if .Title }}
+    {{.Title}}
+  {{ else }}
+    (No Title)
+  {{end}}
 
   <span class="indicator">
     <span class="object1"></span>
@@ -60,36 +63,72 @@ Quick Start Guide
     <span class="object3"></span>
   </span>
 </div>
-<div class="side-menus-container guide-menus jquery-accordion-menu">
+<div class="side-menus-container guide-menus tree-nav jquery-accordion-menu">
   <ul class="side-menus-wrap second">
-    {{ template "section-tree-nav" ($.Scratch.Get "topLevel") }}
-
-    <li class="back-to-the-top">
-      <a href="#" class="submenu-indicator-close">
-        Back to the top 
-        <svg class="svg-icon" enable-background="new 0 0 34 34" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg">
-          <g class="svg-linear" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10">
-              <path d="m12 14.5 5-5 5 5"></path><path d="m17 9.5v15"></path>
-          </g>
-        </svg>
-
-        <span class="submenu-indicator"><span class="object1"></span><span class="object2"></span><span class="object3"></span></span>
-      </a>
-    </li>
+    {{ $activeNode := . }}
+    {{ range ($.Scratch.Get "topLevel").Sections }}
+      {{ template "menu" dict "node" . "activeNode" $activeNode }}
+    {{ end }}
   </ul>
 </div>
 
-{{ define "section-tree-nav" }}
-  {{ range .Sections}}
-    <li class="tree-nav-item"><a href="{{ .RelPermalink}}">{{ .Title }}</a>
-      {{if gt (len .Sections) 0}}
-        <ul class="tree-nav-sublist submenu submenus-wrap">
-          {{ range .Pages }}
-            <li class="tree-nav-item-child"><a href="{{ .RelPermalink}}">{{ .Title }}</a></li>
-          {{ end }}
-          {{ template "section-tree-nav" . }}
-        </ul>
-      {{end}}
-    </li>
+{{ define "menu" }}
+  {{/* .node and .activeNode come from the caller */}}
+  {{- $activeNode := .activeNode -}}
+  {{- with .node -}}
+    {{- $isActive := "" -}}
+    {{- if eq .UniqueID $activeNode.UniqueID -}}
+      {{- $isActive = "active" -}}
+    {{- end -}}
+
+    {{- $isOpen := false -}}
+    {{- if (or .Params.alwaysOpen (.IsAncestor $activeNode)) -}}
+      {{- $isOpen = true -}}
+    {{- end -}}
+
+    {{- if .IsSection -}}
+      {{- $children := (add (len .Pages) (len .Sections)) -}}
+      <li class="tree-nav-item {{ $isActive }}">
+        <a href="{{ .URL }}" class="{{if $isOpen}}submenu-indicator-minus{{end}}">
+          {{- if .Params.shortTitle -}}
+            {{ .Params.shortTitle}}
+          {{- else -}}
+            {{ .Title }}
+          {{- end -}}
+          {{- if gt $children 0 -}}
+            <span class="submenu-indicator">
+              <span class="object1"></span>
+              <span class="object2"></span>
+              <span class="object3"></span>
+            </span>
+          {{- end -}}
+        </a>
+        {{if gt $children 0}}
+        <ul class="tree-nav-sublist submenu submenus-wrap {{ if not $isOpen }}hide{{end}}">
+            {{- $pages := .Pages -}}
+
+            {{- if .Sections -}}
+              {{- $pages = (.Pages | union .Sections) -}}
+            {{- end -}}
+
+            {{- range $pages.ByWeight -}}
+              {{- if not .Params.hidden -}}
+                {{template "menu" dict "node" . "activeNode" $activeNode}}
+              {{- end -}}
+            {{- end -}}
+          </ul>
+        {{- end -}}
+      </li>
+    {{- else if not .Params.hidden -}}
+      <li class="{{ $isActive }}">
+        <a href="{{ .URL }}">
+          {{- if .Params.shortTitle -}}
+            {{ .Params.shortTitle}}
+          {{- else -}}
+            {{ .Title }}
+          {{- end -}}
+        </a>
+      </li>
+    {{- end -}}
   {{ end }}
 {{ end }}
diff --git a/layouts/partials/page-nav.html b/layouts/partials/page-nav.html
index 566e9c70ba3..0891b848c42 100644
--- a/layouts/partials/page-nav.html
+++ b/layouts/partials/page-nav.html
@@ -7,7 +7,6 @@
   {{ range .Sections}}
     <li class=""><a href="{{ .RelPermalink}}">{{ .Title }}</a>
       {{if gt (len .Sections) 0}}
-        <!-- <i class="material-icons expand-toggle">add_box</i> -->
         <ul class="hide">
           {{ range .Pages }}
             <li class=""><a href="{{ .RelPermalink}}">{{ .Title }}</a></li>
diff --git a/package.json b/package.json
index d00a476da44..d77551d3f4f 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,6 @@
     "jsdom": "^11.11.0",
     "lory.js": "^2.4.1",
     "md5": "^2.2.1",
-    "ml-stack-nav": "^1.1.2",
     "moment": "^2.20.1",
     "rancher-website-theme": "https://github.com/rancherlabs/website-theme.git",
     "request": "^2.87.0",