sidebar hide on css

Author: Titan-C

doc/themes/scikit-learn/layout.html

@@ -5,7 +5,6 @@
     Layout for scikit-learn, after a design made by Angel Soler
     (http://angelsoler.net)
 
-    Update: Collapsable sidebar added - 13/03/2012 - Jaques Grobler
     Update: Next-page button added - 16/03/2012 - Jaques Grobler
 
 
@@ -25,9 +24,6 @@
 
 {% block extrahead %}
   {% if pagename != 'index' %}
-   {% if theme_collapsiblesidebar|tobool %}
-       <script type="text/javascript" src="{{ pathto('_static/sidebar.js', 1) }}"></script>
-   {% endif %}
   {% endif %}
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <script src="{{ pathto('_static/js/bootstrap.min.js', 1)}}" type="text/javascript"></script>
@@ -43,8 +39,6 @@
        }
     );
     var bodywrapper = $('.bodywrapper');
-    var sidebarbutton = $('#sidebarbutton');
-    sidebarbutton.css({'height': '900px'});
   </script>
 {% endblock %}
 
@@ -276,6 +270,10 @@ <h2>Machine Learning in Python</h2>
     {{ toc }}
     </div>
 </div>
+{% if theme_collapsiblesidebar|tobool %}
+<input type="checkbox" id="nav-trigger" class="nav-trigger" checked />
+<label for="nav-trigger"></label>
+{% endif %}
 {% endif %}
 
 

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

@@ -142,8 +142,10 @@ div.content-wrapper {
 }
 
 div.content {
-    margin-left: 210px;
-    padding-bottom: 10px;
+    z-index: 1;
+    position: relative;
+    background-color: #FFF;
+    padding-left: 25px;
 }
 
 div.example_digits {
@@ -254,6 +256,7 @@ div.sphinxsidebar {
     border-left-width: 0;
     border-bottom-width: 0;
     margin-top: 0;
+    position: absolute;
 }
 
 div.sphinxsidebar h3 {
@@ -277,9 +280,31 @@ div.sphinxsidebarwrapper {
 
 {% if theme_collapsiblesidebar|tobool %}
 /* for collapsible sidebar */
-div#sidebarbutton {
-    background-color: #F6F6F6;
-    position: relative;
+.nav-trigger {
+    position: fixed;
+    clip: rect(0, 0, 0, 0);
+}
+
+label[for="nav-trigger"] {
+    position: fixed;
+    margin-top: 55px;
+    margin-left: 0px;
+    z-index: 2;
+      width: 30px;
+    height: 30px;
+    cursor: pointer;
+    background-image: url(http://github.com/"data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20version='1.1'%20x='0px'%20y='0px'%20width='30px'%20height='30px'%20viewBox='0%200%2030%2030'%20enable-background='new%200%200%2030%2030'%20xml:space='preserve'><rect%20width='30'%20height='6'/><rect%20y='24'%20width='30'%20height='6'/><rect%20y='12'%20width='30'%20height='6'/></svg>");
+    background-size: contain;
+}
+.nav-trigger:checked + label {
+    margin-left: 190px;
+}
+
+.nav-trigger:checked ~ div.content {
+    margin-left: 190px;
+}
+.nav-trigger + label, div.content {
+    transition: left 0.4s;
 }
 {% endif %}
 

doc/tune_toc.rst

@@ -11,8 +11,6 @@
                             (!$(this).children('ul').is(':hidden')) ? '\u25ba' : '\u25bc');
                        $(this).children('ul').toggle();
                    }
-		   // Update the sidebar height when expanding/collapsing toctree elemements
-		   $('#sidebarbutton').animate({height : $('.toctree-wrapper').height() + 50}, 0);
                    return true; //Makes links clickable
                }
            })
@@ -22,8 +20,6 @@
        $('li.toctree-l2:not(:has(ul))').attr('data-content', '-');
        $('li.toctree-l2:has(ul)').attr('data-content', '\u25ba');
        $('li.toctree-l2:has(ul)').css('cursor', 'pointer');
-       //Initialise the sidebar button with the collapsing toctree
-       $('#sidebarbutton').animate({height : $('.toctree-wrapper').height() + 50}, 0);
 
        $('.toctree-l2').hover(
            function () {