Merge branch '227-14h45-broken-nav-bar' into 'master'

new navigation for mobile view - shared (#227)

See merge request !10

navigation/ButtonList.vue

+<template lang="pug">
+  q-list.q-py-none(no-border)
+
+    q-item.q-pa-none(v-for="(a, i) in actions", multiline, :class="{'q-py-sm': a.rel !== 'parent'}",
+    :separator="a.rel === 'root'")
+
+      // icon
+      q-item-side(v-if="a.icon")
+        q-icon.q-ml-lg.q-mt-sm(:name="a.icon", size="1.2rem",
+        :class="[currentApp === getType(a.name) ? 'text-primary' : 'text-white', getType(a.name) === 'piecemaker' ? 'rotate-180' : '']")
+
+      q-item-main.q-ml-none(:class="{'border-right-highlight': (currentApp === getType(a.name) && a.rel === 'root')}")
+
+        // button
+        q-item-tile.q-pr-md
+          // action
+          template(v-if="a.rel !== 'root' && currentApp === getType(a.name)")
+            q-btn.text-left.full-width(@click="a.click",
+            :class="{ 'text-primary': $route.name === a.name }",
+            flat, align="left", no-caps)
+              | {{ a.label }}
+
+          // root
+          template(v-if="a.rel === 'root' && currentApp !== getType(a.name)")
+            q-btn.text-left.full-width(@click="a.click",
+            :class="{ 'text-primary': $route.name === a.name }",
+            flat, align="left")
+              | {{ a.label }}
+
+        // subactions
+        q-item-tile(v-if="a.subactions && currentApp === getType(a.name)",
+        :class="[a.rel !== 'root' ? 'q-pl-md' : '']")
+          template(v-if="a.rel === 'root'")
+            button-list(v-bind:buttons="a.subactions", :currentApp="currentApp", :currentId="currentId")
+          template(v-if="(a.rel === 'parent' && currId.timeline) || (a.rel === 'parent' && currId.grid)")
+            button-list(v-bind:buttons="a.subactions", :currentApp="currentApp", :currentId="currentId")
+          template(v-if="a.rel === 'child' && currId.video")
+            button-list(v-bind:buttons="a.subactions", :currentApp="currentApp", :currentId="currentId")
+
+</template>
+
+<script>
+  import ButtonList from './ButtonList'
+
+  export default {
+    name: 'button-list',
+    props: ['buttons', 'currentApp', 'currentId'],
+    components: {
+      ButtonList
+    },
+    data () {
+      return {
+        actions: this.buttons,
+        currId: this.currentId[0] ? this.currentId[0] : undefined
+      }
+    },
+    watch: {
+      currentId (obj) {
+        this.currId = obj[0]
+      }
+    },
+    methods: {
+      getType (val) {
+        let valSplit = val.split('.')
+        return valSplit[0]
+      }
+    }
+  }
+</script>
+
+<style scoped lang="stylus">
+  @import '~variables'
+
+  .border-right-highlight
+    // border-right 1px solid $primary
+</style>