[SPARK-12324][MLLIB][DOC] Fixes the sidebar in the ML documentation

NOTICE

@@ -606,4 +606,11 @@ Vis.js uses and redistributes the following third-party libraries:
 
 - keycharm
   https://github.com/AlexDM0/keycharm
-  The MIT License
+  The MIT License
+
+===============================================================================
+
+The CSS style for the navigation sidebar of the documentation was originally 
+submitted by Óscar Nájera for the scikit-learn project. The scikit-learn project
+is distributed under the 3-Clause BSD license.
+===============================================================================

docs/_layouts/global.html

@@ -128,19 +128,31 @@
 
             {% if page.url contains "/ml" %}
               {% include nav-left-wrapper-ml.html nav-mllib=site.data.menu-mllib nav-ml=site.data.menu-ml %}
+              <input id="nav-trigger" class="nav-trigger" checked="" type="checkbox">
+              <label for="nav-trigger"></label>
+                <div class="content-with-sidebar" id="content">
+                  {% if page.displayTitle %}
+                    <h1 class="title">{{ page.displayTitle }}</h1>
+                  {% else %}
+                    <h1 class="title">{{ page.title }}</h1>
+                  {% endif %}
+
+                  {{ content }}
+
+                </div> <!-- /container -->
+            {% else %}
+                <div class="content" id="content">
+                      {% if page.displayTitle %}
+                        <h1 class="title">{{ page.displayTitle }}</h1>
+                      {% else %}
+                        <h1 class="title">{{ page.title }}</h1>
+                      {% endif %}
+
+                      {{ content }}
+
+                </div> <!-- /container -->
             {% endif %}
 
-
-            <div class="container" id="content">
-              {% if page.displayTitle %}
-                <h1 class="title">{{ page.displayTitle }}</h1>
-              {% else %}
-                <h1 class="title">{{ page.title }}</h1>
-              {% endif %}
-
-              {{ content }}
-
-            </div> <!-- /container -->
         </div>
 
         <script src="js/vendor/jquery-1.8.0.min.js"></script>

docs/css/main.css

@@ -39,13 +39,26 @@
   margin-left: 10px;
 }
 
+/*
 body .container-wrapper {
   position: absolute;
   width: 100%;
   display: flex;
 }
+*/
 
-body #content {
+body .container-wrapper {
+  background-color: #FFF;
+  color: #1D1F22;
+  max-width: 1024px;
+  margin-top: 10px;
+  margin-left: auto;
+  margin-right: auto;
+  border-radius: 15px;
+  position: relative;
+}
+
+body #contentREMOVE {
   position: relative;
 
   line-height: 1.6; /* Inspired by Github's wiki style */
@@ -101,6 +114,24 @@ a:hover code {
   max-width: 914px;
 }
 
+.content {
+  z-index: 1;
+  position: relative;
+  background-color: #FFF;
+  padding-left: 15px;
+  max-width: 914px;
+  line-height: 1.6; /* Inspired by Github's wiki style */
+  background-color: white;
+}
+
+.content-with-sidebar {
+  z-index: 1;
+  position: relative;
+  background-color: #FFF;
+  padding-left: 30px;
+  max-width: 914px;  
+}
+
 .dropdown-menu {
   /* Remove the default 2px top margin which causes a small
     gap between the hover trigger area and the popup menu */
@@ -171,24 +202,104 @@ a.anchorjs-link:hover { text-decoration: none; }
  * The left navigation bar.
  */
 .left-menu-wrapper {
-  position: absolute;
-  height: 100%;
-
-  width: 256px;
-  margin-top: -20px;
-  padding-top: 20px;
+  margin-left: 0px;
+  margin-right: 0px;
   background-color: #F0F8FC;
+  border-top-width: 0px;
+  border-left-width: 0px;
+  border-bottom-width: 0px;
+  margin-top: 0px;
+  width: 210px;
+  float: left;
+  position: absolute;
 }
 
 .left-menu {
-  position: fixed;
-  max-width: 350px;
-
-  padding-right: 10px;
-  width: 256px;
+  padding: 0px;
+  width: 199px;
 }
 
 .left-menu h3 {
   margin-left: 10px;
   line-height: 30px;
+}
+
+/**
+ * The collapsing button for the navigation bar.
+ */
+.nav-trigger {
+    position: fixed;
+    clip: rect(0, 0, 0, 0);
+}
+
+.nav-trigger + label:after {
+    content: '»';
+}
+
+label {
+  z-index: 10;
+}
+
+label[for="nav-trigger"] {
+    position: fixed;
+    margin-left: 0px;
+    padding-top: 100px;
+    padding-left: 5px;
+    width: 10px;
+    height: 80%;
+    cursor: pointer;
+    background-size: contain;
+    background-color: #D4F0FF;
+    border-radius: 10px 0px 0px 10px;
+}
+
+label[for="nav-trigger"]:hover {
+    background-color: #BEE9FF;
+}
+
+.nav-trigger:checked + label {
+    margin-left: 200px;
+}
+
+.nav-trigger:checked + label:after {
+    content: '«';
+}
+
+.nav-trigger:checked ~ div.content-with-sidebar {
+    margin-left: 200px;
+}
+.nav-trigger + label, div.content-with-sidebar {
+    transition: left 0.4s;
+}
+
+/**
+ * Rules to collapse the menu automatically when the screen becomes too thin.
+ */
+
+@media all and (max-width: 780px) {
+
+  div.content-with-sidebar {
+    margin-left: 200px;
+  }
+  .nav-trigger + label:after {
+    content: '«';
+  }
+  label[for="nav-trigger"] {
+    margin-left: 200px;
+  }
+
+  .nav-trigger:checked + label {
+    margin-left: 0px;
+  }
+  .nav-trigger:checked + label:after {
+    content: '»';
+  }
+  .nav-trigger:checked ~ div.content-with-sidebar {
+    margin-left: 0px;
+  }
+
+  div.container-index {
+    margin-left: -215px;
+  }
+
 }

docs/js/main.js

@@ -83,7 +83,7 @@ $(function() {
   // Display anchor links when hovering over headers. For documentation of the
   // configuration options, see the AnchorJS documentation.
   anchors.options = {
-    placement: 'left'
+    placement: 'right'
   };
   anchors.add();