freeplanet/src/components/Header.vue

<template>
    <div>
        <q-layout-header>
            <q-toolbar
                    color="primary"
                    :glossy="$q.theme === 'mat'"
                    :inverted="$q.theme === 'ios'"
                    class="toolbar"
            >
                <q-btn
                        flat
                        dense
                        round
                        @click="leftDrawerOpen = !leftDrawerOpen"
                        aria-label="Menu"
                >
                    <q-icon name="menu"/>
                </q-btn>


                <q-toolbar-title>
                    {{$t('msg.myAppName')}}
                    <div slot="subtitle">{{$t('msg.myDescriz')}}</div>
                </q-toolbar-title>

                <q-select class="sel_lang" v-model="lang" stack-label="" :options="selectOpLang"/>

                <div class="right-itens">
                    <!--<message-popover></message-popover>-->
                    <label>{{ $t('msg.hello') }}</label> <span v-model="prova"></span> !
                </div>


            </q-toolbar>

        </q-layout-header>


        <q-layout-drawer side="left"
                         v-model="leftDrawerOpen"
                         :content-class="['bg-grey-3', 'q-pa-sm']"
                         :content-style="{padding: '0px'}"
        >
            <drawer></drawer>

        </q-layout-drawer>
    </div>
</template>

<script>
  import {openURL} from 'quasar';

  import {Quasar} from 'quasar';

  import drawer from '../components/layout/drawer/drawer.vue'
  import messagePopover from '../components/layout/toolbar/messagePopover.vue'

  import user from '../store/modules/user';

  import {mapGetters} from 'vuex'

  export default {
    components: {
      drawer,
      messagePopover,
    },
    created() {
      //this.$store.dispatch('initStocks');
    },
    methods: {
      openURL,
    },
    computed: {
      ...mapGetters("user", [
        'getUsername',
      ]),
    },
    data: function () {
      return {
        prova: 'AA',
        selectOpLang: [
          {label: 'Italian', icon: 'fa-facebook', value: 'it'},
          {label: 'English (US)', icon: 'fa-flag-us', value: 'en-us'},
          {label: 'Spanish', icon: 'fa-flag-es', value: 'es'},
          {label: 'German', icon: 'fa-flag-de', value: 'de'}
        ],
        lang: this.$q.i18n.lang,
        leftDrawerOpen: this.$q.platform.is.desktop
      }
    },
    watch: {
      lang(lang) {
        this.$i18n.locale = snakeToCamel(lang);
        console.log("LANG LOCALE = " + this.$i18n.locale);

        // dynamic import, so loading on demand only
        import(`quasar-framework/i18n/${lang}`).then(lang => {
          //console.log("lang prima = " + this.$q.i18n.lang);
          this.$q.i18n.set(lang.default);
          var mylang = this.$q.i18n.lang;
          console.log("lang = " + this.$q.i18n.lang);
          //console.log("lang DOPO = " + this.$q.i18n.lang);
          import(`src/i18n`).then(function () {

          });
        });

        // dynamic import, so loading on demand only
      }
    }
  }

  function snakeToCamel(str) {
    return str.replace(/(-\w)/g, m => {
      return m[1].toUpperCase()
    })
  }

</script>

<style>
    .layout-padding {
        padding: 1em 4em;
    }

    @media screen and (max-width: 600px) {
        .layout-padding {
            padding: 1.5em .5em;
        }
    }

    @-webkit-keyframes moveFromLeftFade {
        from {
            opacity: 0.3;
            -webkit-transform: translateX(-100%);
        }
    }

    @keyframes moveFromLeftFade {
        from {
            opacity: 0.3;
            -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
        }
    }

    @-webkit-keyframes moveToRight {
        from {
        }
        to {
            -webkit-transform: translateX(100%);
        }
    }

    @keyframes cartOut {
        from {
            transform: translate(0px, 0px);
        }
        to {
            transform: translate(1200px, 0px);
            animation-timing-function: ease-out;
        }

    }

    @-webkit-keyframes moveToLeft {
        from {
        }
        to {
            opacity: .5;
            -webkit-transform: translateX(-100%);
        }
    }

    @keyframes moveToLeft {
        from {
        }
        to {
            opacity: .5;
            -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
        }
    }

    @-webkit-keyframes moveFromRight {
        from {
            opacity: .7;
            -webkit-transform: translateX(100%);
        }
    }

    @keyframes moveFromRight {
        from {
            opacity: .7;
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
        }
    }

    .drawer-closer .item-content {
        margin-left: 50px !important;
    }

    .drawer-content .list-label {
        line-height: 45px;
    }

    .drawer-content .item {
        height: 45px;
    }

    .router-link-active .item-primary {
        color: #027be3;
    }

    .q-picker-textfield .q-picker-textfield-label {
        color: inherit !important;
    }

    .label-success .q-picker-textfield-label {
        color: #4caf50 !important;
    }

    .label-error .q-picker-textfield-label {
        color: #f44336 !important;
    }

    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        text-indent: 1px;
        text-overflow: '';
    }

    .label-success .q-picker-textfield:after, .label-error .q-picker-textfield:after {
        content: "" !important;
    }

    #android-preview iframe {
        margin-top: 64px;
        width: 357px;
        height: 590px;
        background: #fff;
    }

    #ios-preview iframe {
        margin-top: 64px;
        width: 320px;
        height: 590px;
        background: #fff;
    }

    canvas {
        width: 270px !important;
    }

    @media only screen and (min-width: 601px) {
        .adv-form-one .timeline-badge {
            right: auto !important;
            left: auto !important;
        }

        .adv-form-one .timeline-content {
            margin-left: 3.9rem;
        }

        .adv-form-one .timeline-item {
            width: 100% !important;
        }

        .adv-form-one .timeline-title {
            text-align: inherit !important;
            margin-left: 3.9rem;
        }

        .timeline:before {
            left: 1.6rem;
        }
    }

    .adv-form-one .timeline-content .group .primary {
        display: none !important;
    }

    .underline {
        text-decoration: underline;
    }

    .toolbar {
        min-height: 40px;
    }

    .right-itens a, .right-itens button {
        margin-right: 10px;
    }

    .sel_lang {
        padding: 5px;
        color: white;
    }

    .fa-facebook:before {
        content: url('../statics/icons/flag_it.svg');
    }

    .fa-flag-it:before {
        content: url('../statics/icons/flag_it.svg');
    }
</style>