Start experiment with local CSS tweaks. Add react based loading of unread data.

static/css/layouts/email.css

@@ -63,22 +63,33 @@ a {
     position: absolute;
 }
 
-/* When "Menu" is clicked, the navbar should be 80% height */
-#nav.active {
-    height: 80%;
-}
-/* Don't show the navigation items... */
-.nav-inner {
+// /* When "Menu" is clicked, the navbar should be 80% height */
+// #nav.active {
+//     height: 80%;
+// }
+// 
+// /* Don't show the navigation items... */
+// .nav-inner {
+//     display: none;
+// }
+// 
+// /* ...until the "Menu" button is clicked */
+// #nav.active .nav-inner {
+//     display: block;
+//     padding: 2em 0;
+// }
+
+#nav .nav-menu-button {
     display: none;
 }
-
-/* ...until the "Menu" button is clicked */
-#nav.active .nav-inner {
+#nav {
+    height: 80%;
+}
+#nav .nav-inner {
     display: block;
     padding: 2em 0;
 }
 
-
 /*
  * -- NAV BAR STYLES --
  * Styling the default .pure-menu to look a little more unique.
@@ -213,10 +224,11 @@ a {
         top: 0;
         bottom: 0;
         overflow: auto;
+        overflow-x: hidden;
     }
     #nav {
         margin-left:-500px; /* "left col (nav + list)" width */
-        width:150px;
+        width: 220px;
         height: 100%;
     }
 
@@ -232,7 +244,7 @@ a {
     }
 
     #list {
-        margin-left: -350px;
+        margin-left: -280px;
         width: 100%;
         height: 33%;
         border-bottom: 1px solid #ddd;
@@ -243,7 +255,7 @@ a {
         top: 33%;
         right: 0;
         bottom: 0;
-        left: 150px;
+        left: 220px;
         overflow: auto;
         width: auto; /* so that it's not 100% */
     }
@@ -259,8 +271,8 @@ a {
 
     /* This will take up the entire height, and be a little thinner */
     #list {
-        margin-left: -350px;
-        width:350px;
+        margin-left: -280px;
+        width: 280px;
         height: 100%;
         border-right: 1px solid #ddd;
     }