[MRG+1] DOC Modified the navbar menu to be responsive with mobile. (scikit-learn#7098)

* Modified the navbar menu to be responsive with mobile.

* Gave the navbar a fixed height

* Gave more padding to the hamburger

* Fixed text overflow issue on mobile menu

* Got rid of extra line

* Made the whole hamburger clickable

Author: Ajackster

doc/themes/scikit-learn/layout.html

@@ -38,6 +38,14 @@
            $(this).css('background-color', '#A7D6E2');
        }
     );
+    function showMenu() {
+      var topNav = document.getElementById("scikit-navbar");
+      if (topNav.className === "navbar") {
+          topNav.className += " responsive";
+      } else {
+          topNav.className = "navbar";
+      }
+    };
   </script>
 {% endblock %}
 
@@ -61,7 +69,7 @@
         {%- endif %}
 
         {%- block navbar -%}
-        <div class="navbar">
+        <div class="navbar" id="scikit-navbar">
             <ul>
                 <li><a href="{{pathto('index')}}">Home</a></li>
                 <li><a href="{{pathto('install')}}">Installation</a></li>
@@ -87,7 +95,13 @@
         </li>
             <li><a href="{{pathto('auto_examples/index')}}">Examples</a></li>
             </ul>
-
+            <a href="javascript:void(0);" onclick="showMenu()">
+                <div class="nav-icon">
+                    <div class="hamburger-line"></div>
+                    <div class="hamburger-line"></div>
+                    <div class="hamburger-line"></div>
+                </div>
+            </a>
             <div class="search_form">
                 <div id="cse" style="width: 100%;"></div>
             </div>

doc/themes/scikit-learn/static/nature.css_t

@@ -42,6 +42,7 @@ ul.horizontal, ul.horizontal li {
 div.header {
     /* for the logo to correctly expand when showing results
        but remain cut when not */
+       height: 60px;
 }
 
 
@@ -94,6 +95,105 @@ div.navbar ul li a:hover {
     color: #EEE;
 }
 
+div.navbar div.nav-icon a,
+div.navbar div.nav-icon a:link,
+div.navbar div.nav-icon a:visited,
+div.navbar div.nav-icon a:hover {
+    color: white;
+    text-decoration: none;
+}
+div.navbar div.nav-icon {
+    display: none;
+}
+/* Nav bar collapses for mobile phones and shows the hamburger */
+@media screen and (max-width: 680px) {
+    div.navbar div.nav-icon {
+        position: absolute;
+        display: inline-block;
+        right: 0;
+        top: 12px;
+        margin-right: 10px;
+        background: #ff9c34;
+        padding: 5px 10px;
+        border-radius: 5px;
+    }
+    div.navbar ul li {
+        display: none;
+    }
+    div.navbar ul {
+        visibilty: hidden;
+        background: #FFFFFF;
+    }
+    div.navbar.responsive > ul li.btn-li {
+        margin-left: 6px;
+    }
+    div.navbar.responsive > ul li.btn-li + li {
+        margin-top: -5px;   
+    }
+    div.navbar.responsive > ul {
+        visiblity: visible;
+        position: absolute;
+        right: 0;
+        top: 10px;
+        margin-right: 10px;
+        background: #ff9c34;
+    }
+    div.navbar.responsive > ul li {
+        display: flex;
+        justify-content: flex-start;
+        visibility: visible;
+        width: 130px;
+    }
+    div.navbar .dropdown-menu li {
+        white-space: normal;
+    }
+    div.navbar div.nav-icon .hamburger-line {
+        background: white;
+        width: 20px;
+        height: 2px;
+        margin-bottom: 5px;
+        -webkit-transition: .1s ease-in-out;
+        -moz-transition: .1s ease-in-out;
+        -o-transition: .1s ease-in-out;
+        transition: .1s ease-in-out;
+    }
+    div.navbar div.nav-icon .hamburger-line:nth-child(1) {
+        margin-top: 5px;
+        -webkit-transform-origin: left center;
+        -moz-transform-origin: left center;
+        -o-transform-origin: left center;
+        transform-origin: left center;
+    }
+    div.navbar div.nav-icon .hamburger-line:nth-child(2) {
+        -webkit-transform-origin: left center;
+        -moz-transform-origin: left center;
+        -o-transform-origin: left center;
+        transform-origin: left center;
+    }
+    div.navbar div.nav-icon .hamburger-line:nth-child(3) {
+        -webkit-transform-origin: left center;
+        -moz-transform-origin: left center;
+        -o-transform-origin: left center;
+        transform-origin: left center;
+    }
+    div.navbar.responsive div.nav-icon .hamburger-line:nth-child(1) {
+        -webkit-transform: rotate(45deg);
+        -moz-transform: rotate(45deg);
+        -o-transform: rotate(45deg);
+        transform: rotate(45deg);
+    }
+    div.navbar.responsive div.nav-icon .hamburger-line:nth-child(2) {
+        width: 0;
+        opacity: 0%;
+    }
+    div.navbar.responsive div.nav-icon .hamburger-line:nth-child(3) {
+        -webkit-transform: rotate(-45deg);
+        -moz-transform: rotate(-45deg);
+        -o-transform: rotate(-45deg);
+        transform: rotate(-45deg);
+    }
+}
+
 /*-------------------------------------------------------------*/
 /* The next few elements have to do with the gsc (referring to */
 /* Google's custom search bar */