TT#91101 CSC: As a Customer, I want to add new CF implementation to main menu

Change-Id: I212fadec0be4a9920c009802d3e5ffaa2db7af8d

src/components/layouts/Default.vue

@@ -144,6 +144,10 @@
             :is-pbx-enabled="isPbxEnabled"
             :is-pbx-configuration="isPbxConfiguration"
         />
+        <csc-new-features-menu
+            slot="left"
+            :menu-minimized="menuMinimized"
+        />
         <router-view />
         <csc-send-fax
             ref="sendFax"
@@ -217,6 +221,7 @@
         QFab
     } from 'quasar-framework'
     import CscMainMenu from "./MainMenu"
+    import CscNewFeaturesMenu from "./NewFeaturesMenu"
     import CscLanguageMenu from "./CscLanguageMenu"
     import CscUserMenu from "./CscUserMenu"
     import {
@@ -249,6 +254,7 @@
         ],
         components: {
             CscMainMenu,
+            CscNewFeaturesMenu,
             CscLanguageMenu,
             QLayout,
             QToolbar,
@@ -551,6 +557,7 @@
     .page.page-call-active
         padding-bottom 120px
     #main-menu
+    #new-features-menu
         padding 0
         .q-item
             padding-top $flex-gutter-xs * 1.4

src/components/layouts/MainMenu.vue

@@ -254,6 +254,7 @@
         QItemMain,
         QCollapsible
     } from 'quasar-framework'
+    import router from '../../router'
     export default {
         name: 'csc-main-menu',
         data () {
@@ -279,6 +280,11 @@
             ...mapGetters('user', [
                 'isRtcEngineUiVisible'
             ])
+        },
+        methods: {
+            openNewCallForward () {
+                router.push({path:'/user/new-call-forward'})
+            }
         }
     }
 </script>

src/components/layouts/NewFeaturesMenu.vue

@@ -0,0 +1,64 @@
+<template>
+    <q-list
+        id="new-features-menu"
+        no-border
+        link
+        inset-delimiter
+    >
+        <q-list-header
+            v-if="!isMenuMinimized"
+        >
+            {{$t('navigation.newFeatures.header.title')}}
+        </q-list-header>
+        <q-side-link
+            item
+            to="/user/new-call-forward"
+        >
+            <q-item-side
+                icon="phone forwarded"
+            />
+            <q-item-main
+                :label="$t('navigation.callForward.title')"
+            />
+        </q-side-link>
+    </q-list>
+</template>
+
+<script>
+    import {
+        QToolbar,
+        QToolbarTitle,
+        QList,
+        QListHeader,
+        QSideLink,
+        QItemSide,
+        QItemMain
+    } from 'quasar-framework'
+    export default {
+        name: 'csc-new-features-menu',
+        data () {
+            return {
+                isMenuMinimized: false
+            }
+        },
+        components: {
+            QToolbar,
+            QToolbarTitle,
+            QList,
+            QListHeader,
+            QSideLink,
+            QItemSide,
+            QItemMain
+        },
+        props: [
+            'menuMinimized'
+        ],
+        watch: {
+            menuMinimized(state){
+                this.isMenuMinimized = state;
+            }
+        }
+    }
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus"></style>

src/locales/en.json

@@ -119,6 +119,14 @@
         },
         "conference": {
             "title": "Join conference"
+        },
+        "newFeatures": {
+            "header": {
+                "title": "New features"
+            },
+            "callForward": {
+                "title": "Call Forward"
+            }
         }
     },
     "pages": {