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 */
+// /* When "Menu" is clicked, the navbar should be 80% height */
-#nav.active {
+// #nav.active {
-    height: 80%;
+//     height: 80%;
-}
+// }
-/* Don't show the navigation items... */
+// 
-.nav-inner {
+// /* 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;
 }
-
+#nav {
-/* ...until the "Menu" button is clicked */
+    height: 80%;
-#nav.active .nav-inner {
+}
+#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;
+        margin-left: -280px;
-        width:350px;
+        width: 280px;
         height: 100%;
         border-right: 1px solid #ddd;
     }

static/index.html

@@ -19,17 +19,9 @@
         <a href="#" class="nav-menu-button">Menu</a>
 
         <div class="nav-inner">
-            <button class="primary-button pure-button">Compose</button>
+            <div id="unread-list" class="pure-menu pure-menu-open">
-
-            <div class="pure-menu pure-menu-open">
-                <ul id="unread-list">
-                </ul>
                 <ul>
-                    <li><a href="#">Inbox <span class="email-count">(2)</span></a></li>
+                    <li><a href="#">No unread mail.</a></li>
-                    <li><a href="#">Important</a></li>
-                    <li><a href="#">Sent</a></li>
-                    <li><a href="#">Drafts</a></li>
-                    <li><a href="#">Trash</a></li>
                     <li class="pure-menu-heading">Labels</li>
                     <li><a href="#"><span class="email-label-personal"></span>Personal</a></li>
                     <li><a href="#"><span class="email-label-work"></span>Work</a></li>
@@ -177,40 +169,9 @@
         </div>
     </div>
 </div>
-
-<script src="http://yui.yahooapis.com/3.14.1/build/yui/yui.js"></script>
-<script>
-    YUI().use('node-base', 'node-event-delegate', function (Y) {
-
-        var menuButton = Y.one('.nav-menu-button'),
-            nav        = Y.one('#nav');
-
-        // Setting the active class name expands the menu vertically on small screens.
-        menuButton.on('click', function (e) {
-            nav.toggleClass('active');
-        });
-
-        // Your application code goes here...
-
-</script>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script src="/js/react.js"></script>
 <script src="/js/JSXTransformer.js"></script>
 <script src="/js/unread.js" type="text/jsx"></script>
-
-<script>
-YUI().use('node-base', 'node-event-delegate', function (Y) {
-    // This just makes sure that the href="#" attached to the <a> elements
-    // don't scroll you back up the page.
-    Y.one('body').delegate('click', function (e) {
-        e.preventDefault();
-    }, 'a[href="#"]');
-});
-</script>
-
-
-
-
-
 </body>
 </html>

static/js/unread.js

@@ -0,0 +1,38 @@
+/** @jsx React.DOM */
+
+var UnreadCount = React.createClass({
+  getInitialState: function() {
+    return {
+      unreadCount: {}
+    };
+  },
+
+  componentDidMount: function() {
+    $.get(this.props.source, function(result) {
+        console.log('$.get', result);
+      this.setState({unreadCount: result});
+    }.bind(this));
+  },
+
+  render: function() {
+    var keys = Object.keys(this.state.unreadCount).sort();
+    console.log('unread keys', keys);
+    var lis = [];
+    for (var i in keys) {
+        var key = keys[i];
+        var value = this.state.unreadCount[key];
+        var dom = React.DOM.li({key: key}, React.DOM.a({href: '#'},
+                    React.DOM.span({className: 'email-count'}, '(', value, ')'),
+                    ' ', key
+                    ));
+        lis.push(dom);
+    }
+    console.log('Found', lis);
+    return React.DOM.ul({}, lis);
+  }
+});
+
+React.renderComponent(
+  <UnreadCount source="//mail.z.xinu.tv/unread" />,
+  $('#unread-list').get(0)
+);