Add some top menu logic

app/assets/javascripts/shared-ember-helpers/image_tag.js.coffee

@@ -1,2 +1,3 @@
 Ember.Handlebars.registerHelper 'image_tag', (path, params..., options={})->
+  options.alt ||= ''
   new Handlebars.SafeString "<img src=\"/assets/#{path}\" alt=\"#{options.alt}\" >"

app/assets/javascripts/user/app/controllers/application_controller.js.coffee

@@ -66,3 +66,5 @@ App.ApplicationController = Ember.Controller.extend
         error_list.eraseRecord()
       @set 'list', null
     @store.find('list', 'current').then(success, error)
+  didInsertElement: (e)->
+    debugger

app/assets/javascripts/user/app/routes/application_route.js.coffee

@@ -1,7 +1,6 @@
 App.ApplicationRoute = Ember.Route.extend
   setupController: (controller)->
     #@controllerFor('product_orders').set 'model', @store.filter('product_order', (po)-> !po.get('order')) # does not work (yet)
-    debugger
     @controllerFor('product_orders').set 'model', @store.filter('product_order', (po)-> !po.get('id'))
     controller.secured ->
       faye = new Faye.Client($event_host)

app/assets/javascripts/user/app/templates/application.emblem

@@ -1,4 +1,4 @@
-.top-menu.off-canvas-wrap
+/.top-menu.off-canvas-wrap
   .inner-wrap
     nav.tab-bar
       section.left-small
@@ -46,4 +46,51 @@
           span= notice
       = outlet
     a.exit-off-canvas
+header.top-menu
+  .toggle-side-menu
+    span
+  .menu-content
+    section.main-buttons
+      link-to 'index'
+        = image_tag 'icons/logo-small.png'
+      if list.id
+        App.MenuItemView route="active_list"
+        App.MenuItemView route='table' route_param=list.table.id
+        App.MenuItemListNeedsHelpView
+        App.MenuItemListNeedsPaymentView
+aside.side-menu
+  ul
+    li
+      label Menu
+    li
+      = link-to 'index'
+        span Home
+    li
+      a{action scanQr bubbles=false}
+        span Scan QR
+    if list.id
+      li
+        =link-to 'table' list.table.id
+          span= t 'list_products.title'
+      li
+        =link-to 'active_list'
+          span= t 'active_list.title'
+    li
+      =link-to 'lists'
+        span= t 'models.plural.list'
+    li
+      =link-to 'join_requests'
+        span= t 'models.plural.join_request'
+    li
+      a{action openDebugger}
+        span.fa.fa-wrench.fa-lg
+        span Debugger
+main.main-section
+  .main-section-content
+    if notice
+      #notice.alert-box{action clearNotice} data-alert=true
+        a.right href="#"
+          span.fa.fa-times.fa-lg
+        span= notice
+    = outlet
 =outlet modal

app/assets/javascripts/user/app/views/application_view.js.coffee

@@ -0,0 +1,15 @@
+App.ApplicationView = Ember.View.extend
+  didInsertElement: ->
+    $('.main-section').css 'min-height', ($(window).height() - $('.tab-bar:first').outerHeight())
+
+    $('.toggle-side-menu,.side-menu').click ->
+      menu = $('aside.side-menu')
+      toggle = $('.toggle-side-menu')
+      if menu.is(':visible')
+        menu.animate left: -255, -> $(@).hide()
+        toggle.animate left: 0, -> $(@).removeClass('open')
+      else
+        menu.show().animate left: 0
+        toggle.animate left: 222 - 30, -> $(@).addClass('open')
+
+    $(document).foundation()

app/assets/javascripts/user/app/views/menu_item_list_needs_help_view.js.coffee

@@ -1,7 +1,7 @@
 App.MenuItemListNeedsHelpView = Ember.View.extend Ember.ViewTargetActionSupport,
   action: 'listNeedsHelp'
   templateName: "menu_item_list_needs_help"
-  classNames: 'menu-list-item'
+  classNames: 'menu-list-item callout'
   classNameBindings: ['controller.list.needs_help:active']
   click: ->
     if @get('controller.list.needs_help')

app/assets/javascripts/user/app/views/menu_item_list_needs_payment_view.js.coffee

@@ -1,7 +1,7 @@
 App.MenuItemListNeedsPaymentView = Ember.View.extend Ember.ViewTargetActionSupport,
   action: 'listNeedsPayment'
   templateName: "menu_item_list_needs_payment"
-  classNames: 'menu-list-item'
+  classNames: 'menu-list-item callout'
   classNameBindings: ['controller.list.needs_payment:active']
   click: ->
     if @get('controller.list.needs_payment')

app/assets/javascripts/user/flat/application.js.coffee.erb

@@ -20,7 +20,4 @@
 
 $.extend($translations.en, <%= I18n.t('user', locale: :en).to_json %>);
 $.extend($translations.nl, <%= I18n.t('user', locale: :nl).to_json %>);
-$(document).foundation()
 setLocale()
-$ ->
-  $('.main-section').css 'min-height', ($(window).height() - $('.tab-bar:first').outerHeight())

app/assets/stylesheets/user/foundation/menu_main.css.sass

@@ -0,0 +1,52 @@
+@import constants
+@import font-awesome
+header.top-menu
+  height: 90px
+  background-color: transparent
+  background-repeat: no-repeat, no-repeat
+  background-position: left bottom, right bottom
+  background-image: image-url('theme1/button-bar-left.png'), image-url('theme1/button-bar-right.png')
+  color: $green
+  padding-left: 49px
+  padding-right: 52px 
+  .menu-content
+    background-color: white
+    background-repeat: repeat-x
+    background-position: center bottom
+    background-image: image-url('theme1/button-bar-middle.png')
+    //min-height: 61px
+    height: 100%
+    section
+      height: 52px
+      line-height: 48px
+  .menu-list-item
+    margin-left: 20px
+    cursor: pointer
+    border: 0.08em solid #eee
+    padding: 5px
+    border-radius: 0.1em
+    display: inline-block
+    line-height: 1em
+    margin-top: 10px
+    color: #999
+    &.active
+      color: yellow
+      border-color: yellow
+      &.callout
+        color: #f70
+        border-color: #f70
+
+.toggle-side-menu
+  position: absolute
+  width: 28px
+  height: 28px
+  color: white
+  left: 0
+  cursor: pointer
+  z-index: 100
+  &.open
+    color: white
+  span
+    @extend .fa
+    @extend .fa-bars
+    @extend .fa-lg

app/assets/stylesheets/user/foundation/menu_side.css.sass

@@ -0,0 +1,13 @@
+@import constants
+aside.side-menu
+  background-color: #444
+  position: fixed
+  display: none
+  left: -222px
+  top: 0
+  width: 222px
+  height: 100%
+  > ul
+    list-style: none
+    a
+      color: white

app/assets/stylesheets/user/foundation/structure.css.sass

@@ -1,19 +1,14 @@
+@import constants
 @import font-awesome
-section.main-section
+@import foundation_and_overrides
+#ember-app-container
+  background-image: $wood
+  background-repeat: repeat
+main.main-section
+  +panel($bg:rgba(200,200,200,0.8))
   height: 100%
-.top-menu
-  .menu-list-item
-    float: right
-    margin-left: 20px
-    cursor: pointer
-    border: 0.08em solid #eee
-    padding: 3px
-    border-radius: 0.1em
-    line-height: 1em
-    margin-top: 10px
-    &.active
-      color: yellow
-      border-color: yellow
+  padding: 0
+  margin: 0
 span.icon
   @extend .fa
   @extend .fa-lg

app/views/user/obtain_token.html.slim

@@ -13,7 +13,7 @@
       .form-field
         input#user-password.password type="password" placeholder="Password"
     .form-row
-      .form-label
+      .form-label  
       .form-field
         button.btn.btn-primary data-t="obtain_token.obtain" onclick="Quser.authenticate_user(); return false" = t('user.obtain_token.obtain')
 - unless current_user.blank? || ENV['QWAITER_MOBILE_EXPORT']=='yes'