Fix navbar menu on small devices

css/main.css

@@ -185,6 +185,15 @@ small.has-error {
   color: #f04124;
 }
 
+@media (max-width: 641px) {
+  .hide_menu {
+    display: none;
+  }
+  .show_menu {
+    display: block;
+  }
+}
+
 hr { margin: 2.25rem 0;}
 
 button.primary { background-color: #111; }

index.html

@@ -27,11 +27,11 @@
         <ul class="title-area">
           <li class="name"></li>
           <li class="toggle-topbar menu-icon">
-            <a href="#"> Menu</a>
+            <a ng-click="isCollapsed=!isCollapsed"> Menu</a>
           </li>
         </ul>
 
-        <section class="top-bar-section">
+        <section class="top-bar-section {{isCollapsed && 'hide_menu' || 'show_menu'}}">
           <ul>
             <li data-ng-repeat="item in menu" ui-route="/{{item.link}}" class="large-2 text-center" data-ng-class="{active: isActive(item)}">
               <a href="{{item.link}}"> <i class="{{item.icon}}"></i> {{item.title}}</a>

js/controllers/header.js

@@ -47,4 +47,5 @@ angular.module('copay.header').controller('HeaderController',
       $rootScope.flashMessage = {};
     };
 
+    $rootScope.isCollapsed = true;
   });