Style conversation menu

conversation.html

@@ -15,14 +15,19 @@
         <div id='file-modal'></div>
         <script type='text/x-tmpl-mustache' id='conversation'>
             <div class='title-bar' id='header'>
-                {{#group}}
-                    <button class='new-group-update'>Update group</button>
-                    <button class='leave-group'>Leave group</button>
-                {{/group}}
-                {{^group}}
-                    <button class='end-session'>End Session</button>
-                {{/group}}
-                <button class='destroy'>Delete this conversation</button>
+                <div class='menu'>
+                  <button class='hamburger'></button>
+                  <ul class='menu-list'>
+                      {{#group}}
+                          <li><a class='new-group-update'>Update group</a></li>
+                          <li><a class='leave-group'>Leave group</a></li>
+                      {{/group}}
+                      {{^group}}
+                          <li><a class='end-session'>End Session</a></li>
+                      {{/group}}
+                      <li><a class='destroy'>Delete messages</a></li>
+                  </ul>
+                </div>
             </div>
 
             <div class='discussion-container'></div>

js/views/conversation_view.js

@@ -50,7 +50,12 @@
             'click .destroy': 'destroyMessages',
             'click .new-group-update': 'newGroupUpdate',
             'click .settings-btn': 'toggleSettings',
-            'click .go-back': 'toggleSettings'
+            'click .go-back': 'toggleSettings',
+            'click .hamburger': 'toggleMenu'
+        },
+
+        toggleMenu: function() {
+            this.$el.find('.menu-list').toggle();
         },
 
         newGroupUpdate: function() {

stylesheets/manifest.css

@@ -134,6 +134,29 @@ body {
     outline: 0;
     color: white; }
 
+.menu {
+  position: relative;
+  float: left;
+  height: 36px;
+  line-height: 36px;
+  padding-left: 8px; }
+  .menu .hamburger {
+    width: 36px;
+    background: url("/images/menu.png") no-repeat center; }
+  .menu .menu-list {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin: 0;
+    padding: 0;
+    border: solid 1px #2a92e7; }
+    .menu .menu-list li {
+      display: block;
+      cursor: pointer;
+      white-space: nowrap;
+      padding: 5px; }
+
 button {
   cursor: pointer; }
 

stylesheets/view/_conversation.scss

@@ -30,6 +30,36 @@ body {
     outline: 0;
     color: white;
   }
+
+}
+
+.menu {
+  position: relative;
+  float: left;
+  height: 36px;
+  line-height: 36px;
+  padding-left: 8px;
+
+  .hamburger {
+    width: 36px;
+    background: url('/images/menu.png') no-repeat center;
+  }
+  .menu-list {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin: 0;
+    padding: 0;
+    border: solid 1px $blue;
+
+    li {
+      display: block;
+      cursor: pointer;
+      white-space: nowrap;
+      padding: 5px;
+    }
+  }
 }