Make navbar collapse to top left corner

This results in a menu that is easier to expand using a finger on a small touch screen, and at the same time giving more horizontal space for reading the main content.

css/MLS-navbar-left.css

@@ -32,15 +32,16 @@ nav > div.ltx_TOC {
 .ltx_page_navbar:before {
   position: fixed;
   z-index: 4;
-  left: 2px;
+  left: 0px;
   top: 0px;
   margin: 0px;
   padding: 0px;
-  font: 16px sans-serif;
+  font-size: 25px;
   color: #DE1D31; /* "Bouncing ball red" */
   height: 30px;
-  width: 16px;
+  width: calc(3rem - 8px);
   background: #F6F6F6;
+  text-align: center;
   content: "☰"; /* Chinese character that looks like hamburger. */
 }
 
@@ -90,22 +91,22 @@ nav > div.ltx_TOC {
   position: fixed;
   z-index: 3;
   top: 0px;
-  height: 3em;
-  padding: 0.5em 1em;
+  height: 2.5rem;
+  padding: 0.5rem 1rem;
   background: #F6F6F6; /* Same as body. */
   color: black; /* Same as side bar. */
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
 .ltx_page_content {
-  padding: 1em;
-  margin-top: 3em; /* Header height plus padding below, minus a little bit. */
+  padding: 1rem;
+  margin-top: 2.5rem; /* Header height plus padding below, minus a little bit. */
   background: white;
 }
 
 .ltx_page_footer {
-  padding: 1em;
+  padding: 1rem;
   background: white;
 }
 
@@ -143,22 +144,25 @@ nav > div.ltx_TOC {
     /* Leave just enough space to fit the hamburger plus the right border of the .ltx_page_navbar.
      * Don't define this in em units, since the em is not the same below in .ltx_page_navbar.
      */
-    margin-left: calc(2px + 16px + 8px); /* left + width + border */
+    margin-left: 0px;
   }
   .ltx_page_navbar {
     width: 500px;
-    left: calc(26px - (500px + 8px)); /* Position right extent where .lts_page_main starts, taking .ltx_page_navbar border-right-width into account. */
+    height: 3.5rem;
+    left: calc(3rem - (500px + 8px));
     transition: 0.3s;
   }
   .ltx_TOC {
     margin-top: 20px; /* Reserve space for hamburger. */
     height: calc(100% - 20px);
   }
   .ltx_page_header {
-    width: calc(100% - 26px - 2em); /* Subtract 2em for the total horizontal padding on this element. */
+    padding-left: 4rem;
+    width: calc(100% - (4rem + 1rem)); /* Subtract horizontal padding on this element. */
   }
   .ltx_page_navbar:hover {
     left: 0px;
+    height: 100%;
   }
   .ltx_page_navbar:before {
     display: block;