rustdoc: merge source sidebar into main sidebar

Author: cynecx

src/librustdoc/html/static/css/rustdoc.css

@@ -311,7 +311,6 @@ li {
 }
 
 .source .content {
-	margin-top: 50px;
 	max-width: none;
 	overflow: visible;
 	margin-left: 0px;
@@ -335,7 +334,15 @@ nav.sub {
 }
 
 .source .sidebar {
-	display: none;
+	width: unset;
+	min-width: 0px;
+	max-width: 300px;
+	flex-grow: 0;
+	flex-shrink: 0;
+	flex-basis: auto;
+	border-right: 1px solid;
+	transition: width .5s;
+	overflow-x: hidden;
 }
 
 /* Improve the scrollbar display on firefox */
@@ -367,18 +374,6 @@ nav.sub {
 	display: none !important;
 }
 
-.logo-source {
-	display: none;
-}
-
-.source .logo-source {
-	display: block;
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 200px;
-}
-
 .logo-container {
 	height: 100px;
 	width: 100px;
@@ -742,7 +737,7 @@ nav:not(.sidebar) {
 	margin-bottom: 25px;
 }
 .source nav:not(.sidebar).sub {
-	margin-left: 230px;
+	margin-left: 32px;
 }
 nav.main {
 	padding: 20px 0;
@@ -1367,15 +1362,9 @@ pre.rust {
 	border-left: 0;
 }
 #source-sidebar {
-	position: fixed;
-	top: 0;
-	bottom: 0;
-	left: 0;
 	width: 300px;
 	z-index: 1;
 	overflow: auto;
-	transition: left .5s;
-	border-right: 1px solid;
 }
 #source-sidebar > .title {
 	font-size: 1.5em;
@@ -1696,7 +1685,7 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 		flex-direction: column;
 	}
 
-	.rustdoc > .sidebar {
+	.rustdoc:not(.source) > .sidebar {
 		width: 100%;
 		height: 45px;
 		min-height: 40px;
@@ -1707,6 +1696,14 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 		z-index: 11;
 	}
 
+	.rustdoc.source > .sidebar {
+		position: fixed;
+		top: 0;
+		left: 0;
+		margin: 0;
+		z-index: 11;
+	}
+
 	.sidebar > .location {
 		float: right;
 		margin: 0px;
@@ -1722,13 +1719,19 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 		padding: 0;
 	}
 
-	.sidebar .logo-container {
+	.rustdoc.source .sidebar .logo-container {
+		width: 100%;
+		height: 45px;
+		margin: 0 auto;
+	}
+
+	.rustdoc:not(.source) .sidebar .logo-container {
 		width: 35px;
-		height: 35px;
-		margin-top: 5px;
-		margin-bottom: 5px;
-		float: left;
-		margin-left: 50px;
+	    height: 35px;
+	    margin-top: 5px;
+	    margin-bottom: 5px;
+	    float: left;
+	    margin-left: 50px;
 	}
 
 	.sidebar .logo-container > img {
@@ -1944,10 +1947,6 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 	.search-results div.desc, .search-results .result-description, .item-right {
 		padding-left: 2em;
 	}
-
-	.source .logo-source {
-		display: none;
-	}
 }
 
 @media print {

src/librustdoc/html/static/css/themes/dark.css

@@ -66,7 +66,7 @@ pre, .rustdoc.source .example-wrap {
 }
 
 .source .sidebar {
-	background-color: #353535;
+    background-color: #565656;
 }
 
 .sidebar .location {

src/librustdoc/html/static/js/source-script.js

@@ -77,15 +77,15 @@ function createDirEntry(elem, parent, fullPath, currentFile, hasFoundFile) {
 }
 
 function toggleSidebar() {
-    var sidebar = document.getElementById("source-sidebar");
+    var sidebar = document.querySelector("nav.sidebar");
     var child = this.children[0].children[0];
     if (child.innerText === ">") {
-        sidebar.style.left = "";
+        sidebar.style.width = "300px";
         this.style.left = "";
         child.innerText = "<";
         updateLocalStorage("rustdoc-source-sidebar-show", "true");
     } else {
-        sidebar.style.left = "-300px";
+        sidebar.style.width = "0";
         this.style.left = "0";
         child.innerText = ">";
         updateLocalStorage("rustdoc-source-sidebar-show", "false");
@@ -120,15 +120,17 @@ function createSourceSidebar() {
     if (!window.rootPath.endsWith("/")) {
         window.rootPath += "/";
     }
-    var main = document.getElementById("main");
+    var main = document.querySelector("nav.sidebar");
 
     var sidebarToggle = createSidebarToggle();
     main.insertBefore(sidebarToggle, main.firstChild);
 
     var sidebar = document.createElement("div");
     sidebar.id = "source-sidebar";
     if (getCurrentValue("rustdoc-source-sidebar-show") !== "true") {
-        sidebar.style.left = "-300px";
+        main.style.width = "0px";
+    } else {
+        main.style.width = "300px";
     }
 
     var currentFile = getCurrentFilePath();
@@ -144,7 +146,7 @@ function createSourceSidebar() {
                                       currentFile, hasFoundFile);
     });
 
-    main.insertBefore(sidebar, main.firstChild);
+    main.insertBefore(sidebar, document.querySelector(".sidebar-logo").nextSibling);
     // Focus on the current file in the source files sidebar.
     var selected_elem = sidebar.getElementsByClassName("selected")[0];
     if (typeof selected_elem !== "undefined") {

src/librustdoc/html/templates/page.html

@@ -68,7 +68,7 @@
     {{- layout.external_html.before_content | safe -}}
     <nav class="sidebar"> {#- -#}
         <div class="sidebar-menu" role="button">&#9776;</div> {#- -#}
-        <a href='{{page.root_path | safe}}{{krate_with_trailing_slash | safe}}index.html'> {#- -#}
+        <a class="sidebar-logo" href='{{page.root_path | safe}}{{krate_with_trailing_slash | safe}}index.html'> {#- -#}
             <div class='logo-container rust-logo'> {#- -#}
             <img src='
                 {%- if layout.logo -%}
@@ -83,17 +83,6 @@
     </nav> {#- -#}
     <main> {#- -#}
         <div class="main-inner"> {#- -#}
-            <a class="logo-source" href='{{page.root_path | safe}}{{krate_with_trailing_slash | safe}}index.html'> {#- -#}
-                <div class='logo-container rust-logo'> {#- -#}
-                <img src='
-                    {%- if layout.logo -%}
-                    {{layout.logo}}
-                    {%- else -%}
-                    {{static_root_path | safe}}rust-logo{{page.resource_suffix}}.png
-                    {%- endif -%}
-                    ' alt='logo'> {#- -#}
-                </div> {#- -#}
-            </a> {#- -#}
             <nav class="sub"> {#- -#}
                 <div class="theme-picker"> {#- -#}
                     <button id="theme-picker" aria-label="Pick another theme!" aria-haspopup="menu" title="themes"> {#- -#}