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

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 class="pure-menu pure-menu-open">
-                <ul id="unread-list">
-                </ul>
+            <div id="unread-list" class="pure-menu pure-menu-open">
                 <ul>
-                    <li><a href="#">Inbox <span class="email-count">(2)</span></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><a href="#">No unread mail.</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>