[Mobile] open/close main menu with a hamburger icon.

app/assets/stylesheets/layout/_main_menu_mobile.sass

@@ -38,8 +38,8 @@
     %absolute-layout-mode &
       height: auto
     #toggle-project-menu
-      position: relative
-      bottom: initial
+      display: none
+
   .hidden-navigation #main-menu
     overflow: hidden
     border-bottom: 0

app/assets/stylesheets/layout/_top_menu.sass

@@ -26,6 +26,9 @@
 // See docs/COPYRIGHT.rdoc for more details.
 //++
 
+#mobile-main-menu-toggle
+  display: none
+
 #logo
   @include varprop(width, main-menu-width)
   @include varprop(height, header-height)

app/assets/stylesheets/layout/_top_menu_mobile.sass

@@ -27,6 +27,24 @@
 //++
 
 @include breakpoint(680px down)
+  #mobile-main-menu-toggle
+    display: block
+    width: 50px
+    height: $header-height-mobile
+    float: left
+    text-align: center
+    margin-right: -13px
+    a
+      height: $header-height-mobile
+      line-height: $header-height-mobile
+      zoom: 1
+      @include varprop(color, header-item-font-color)
+      @include varprop(font-size, header-item-font-size)
+      text-decoration: none
+      padding: 0 15px
+  .nosidebar
+    #mobile-main-menu-toggle
+      display: none
   #logo
     background-color: transparent
 

app/views/layouts/base.html.erb

@@ -99,6 +99,16 @@ See docs/COPYRIGHT.rdoc for more details.
               <h1 class="hidden-for-sighted">
                 <%= l(:label_top_menu) %>
               </h1>
+              <div id="mobile-main-menu-toggle"
+                   ng-controller="MainMenuController as mainMenu"
+                   ng-click="mainMenu.toggleNavigation()">
+                <a icon="icon-hamburger"
+                   title="Toggle main menu"
+                   aria-haspopup="true"
+                   href="">
+                  <i class="icon-hamburger" aria-hidden="true"></i>
+                </a>
+              </div>
               <a href="" class="hidden-for-sighted skip-navigation-link"
                   aria-label="<%= I18n.t('js.work_packages.jump_marks.label_content') %>">
                     <%= I18n.t('js.work_packages.jump_marks.content') %>
@@ -123,7 +133,7 @@ See docs/COPYRIGHT.rdoc for more details.
           <div id="main-menu" ng-controller="MainMenuController as mainMenu">
             <h1 class="hidden-for-sighted"><%= l(:label_main_menu) %></h1>
             <div id="toggle-project-menu"
-          ng-class="{ 'show': !showNavigation }">
+                 ng-class="{ 'show': !showNavigation }">
               <a href="#"
                  title="<%= l(:show_hide_project_menu) %>"
                  class="navigation-toggler"