Greatly improve sidebar when width < 700px

src/librustdoc/html/layout.rs

@@ -65,6 +65,7 @@ pub fn render<T: fmt::Display, S: fmt::Display>(
     {before_content}
 
     <nav class="sidebar">
+        <div class="sidebar-menu">&#9776;</div>
         {logo}
         {sidebar}
     </nav>

src/librustdoc/html/render.rs

@@ -3542,6 +3542,7 @@ fn fmt(&self, fmt: &mut fmt::Formatter) -> fmt::Result {
         let cx = self.cx;
         let it = self.item;
         let parentlen = cx.current.len() - if it.is_mod() {1} else {0};
+        let mut should_close = false;
 
         if it.is_struct() || it.is_trait() || it.is_primitive() || it.is_union()
             || it.is_enum() || it.is_mod() || it.is_typedef()
@@ -3575,6 +3576,8 @@ fn fmt(&self, fmt: &mut fmt::Formatter) -> fmt::Result {
                 }
             }
 
+            write!(fmt, "<div class=\"sidebar-elems\">")?;
+            should_close = true;
             match it.inner {
                 clean::StructItem(ref s) => sidebar_struct(fmt, it, s)?,
                 clean::TraitItem(ref t) => sidebar_trait(fmt, it, t)?,
@@ -3625,6 +3628,10 @@ fn fmt(&self, fmt: &mut fmt::Formatter) -> fmt::Result {
             write!(fmt, "<script defer src=\"{path}sidebar-items.js\"></script>",
                    path = relpath)?;
         }
+        if should_close {
+            // Closes sidebar-elems div.
+            write!(fmt, "</div>")?;
+        }
 
         Ok(())
     }

src/librustdoc/html/static/main.js

@@ -106,6 +106,24 @@
         return (elem.offsetParent === null)
     }
 
+    function showSidebar() {
+        document.getElementsByClassName("sidebar-elems")[0].style.display = "block";
+        var sidebar = document.getElementsByClassName('sidebar')[0];
+        sidebar.style.position = 'fixed';
+        sidebar.style.width = '100%';
+        sidebar.style.marginLeft = '0';
+        document.getElementsByTagName("body")[0].style.marginTop = '45px';
+    }
+
+    function hideSidebar() {
+        document.getElementsByClassName("sidebar-elems")[0].style.display = "";
+        var sidebar = document.getElementsByClassName('sidebar')[0];
+        sidebar.style.position = '';
+        sidebar.style.width = '';
+        sidebar.style.marginLeft = '';
+        document.getElementsByTagName("body")[0].style.marginTop = '';
+    }
+
     // used for special search precedence
     var TY_PRIMITIVE = itemTypes.indexOf("primitive");
 
@@ -130,6 +148,8 @@
     }
 
     function highlightSourceLines(ev) {
+        // If we're in mobile mode, we should add the sidebar in any case.
+        hideSidebar();
         var search = document.getElementById("search");
         var i, from, to, match = window.location.hash.match(/^#?(\d+)(?:-(\d+))?$/);
         if (match) {
@@ -1459,7 +1479,7 @@
 
     // delayed sidebar rendering.
     function initSidebarItems(items) {
-        var sidebar = document.getElementsByClassName('sidebar')[0];
+        var sidebar = document.getElementsByClassName('sidebar-elems')[0];
         var current = window.sidebarCurrent;
 
         function block(shortty, longty) {
@@ -1829,6 +1849,22 @@
         removeClass(search, "hidden");
         search.innerHTML = '<h3 style="text-align: center;">Loading search results...</h3>';
     }
+
+    var sidebar_menu = document.getElementsByClassName("sidebar-menu")[0];
+    if (sidebar_menu) {
+        sidebar_menu.onclick = function() {
+            var sidebar = document.getElementsByClassName('sidebar')[0];
+            if (sidebar.style.position === "fixed") {
+                hideSidebar();
+            } else {
+                showSidebar();
+            }
+        };
+    }
+
+    window.onresize = function() {
+        hideSidebar();
+    };
 }());
 
 // Sets the focus on the search bar at the top of the page

src/librustdoc/html/static/rustdoc.css

@@ -263,6 +263,10 @@ nav.sub {
 	width: 100%;
 }
 
+.sidebar-menu {
+	display: none;
+}
+
 .content {
 	padding: 15px 0;
 }
@@ -823,7 +827,7 @@ span.since {
 		position: static;
 	}
 
-	.sidebar .location {
+	.sidebar > .location {
 		float: right;
 		margin: 0px;
 		margin-top: 2px;
@@ -843,16 +847,33 @@ span.since {
 		margin-top: 5px;
 		margin-bottom: 5px;
 		float: left;
+		margin-left: 50px;
 	}
 
-	nav.sub {
-		margin: 0 auto;
+	.sidebar-menu {
+		position: absolute;
+		font-size: 2rem;
+		cursor: pointer;
+		margin-top: 2px;
+		display: block;
 	}
 
-	.sidebar .block {
+	.sidebar-elems {
+		background-color: #F1F1F1;
+		position: fixed;
+		z-index: 1;
+		left: 0;
+		top: 45px;
+		bottom: 0;
+		overflow-y: auto;
+		border-right: 1px solid #000;
 		display: none;
 	}
 
+	nav.sub {
+		margin: 0 auto;
+	}
+
 	.content {
 		margin-left: 0px;
 	}