freeplanet/src/layouts/drawer/drawer.vue

<template>
    <div>
        <div id="profile" v-if="Username">
            <img :src="photo" style='height: 80px' class="inline-block">
            <img src="../img/avatar-1.svg" id="avatar" class="inline-block">
            <div id="user-name">
                <span class="text-white"> {{ Username }} </span>
                <hr>
                <span class="text-white" v-if="Verificato"> {{$t('reg.verificato')}} </span>
                <span class="text-white background-red" v-else> {{$t('reg.non_verificato')}} </span>
                <!-- <span class="text-white"> {{ Email }} </span>-->
            </div>
            <div id="user-actions">
                <q-btn round color="primary" icon="person"></q-btn>
                <q-btn round color="warning" icon="lock"></q-btn>
                <q-btn round color="secondary" icon="exit_to_app" @click='logoutHandler'></q-btn>
            </div>
        </div>

        <menu-one :links="links"></menu-one>

        <!--<footer>
            <small>- Small</small>
        </footer>-->

        <div class="fixed-bottom text-center light text-italic">
            Powered by Perseo
        </div>

    </div>
</template>

<script lang="ts">
  import menuOne from './menuOne.vue'

  import Vue from 'vue'
  import { Component, Watch, Prop } from 'vue-property-decorator'
  import { Store } from 'vuex'
  import { UserStore } from '@modules'
  import { GlobalStore } from '@modules'
  import { ITodoList } from "../../model";


  @Component({
    components: {
      menuOne,
    }
  })
  export default class Drawer extends Vue {
    public $q
    $t: any
    public arrlista = GlobalStore.state.listatodo
    photo = ''
    user = null
    links

    created() {
      // console.log('Drawer created...')

      let listatodo = []

      this.arrlista.forEach((elem: ITodoList) => {
        let item = { route: '/todo/' + elem.namecat, faIcon: 'fa fa-list-alt', materialIcon: 'todo', name: 'pages.' + elem.description }
        listatodo.push(item)

      })

      this.links = {
        Dashboard: {
          routes: [
            { route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'pages.home' },
            {
              route: '/todo', faIcon: 'fa fa-list-alt', materialIcon: 'todo', name: 'pages.Todo',
              routes2: listatodo
            },
            { route: '/category', faIcon: 'fa fa-list-alt', materialIcon: 'category', name: 'pages.Category' },
            { route: '/signup', faIcon: 'fa fa-registered', materialIcon: 'home', name: 'pages.SignUp' },
            { route: '/signin', faIcon: 'fa fa-anchor', materialIcon: 'home', name: 'pages.SignIn' },
            /* {route: '/vreg?idlink=aaa', faIcon: 'fa fa-login', materialIcon: 'login', name: 'pages.vreg'},*/
          ],
          show: true,
        },
        Forms: {
          routes: [
            { route: '/prec', faIcon: 'fa fa-search', materialIcon: 'search', name: 'pages.Test' },
          ],
          show: false
        },
      }

    }



    get MenuCollapse() {
      return GlobalStore.state.menuCollapse
      // return true
    }

    get Username() {
      return UserStore.state.username
    }

    get Verificato() {
      return UserStore.state.verifiedEmail
    }

    get Email() {
      return UserStore.state.email
    }

    logoutHandler() {
      UserStore.actions.logout()
      this.$q.notify(this.$t('logout.uscito'))
    }
  }
</script>
<style scoped lang="scss">
    .background-red {
        background-color: red;
        padding: 2px;
    }

    .fixed-bottom {
        margin-bottom: 1%;
    }

    .fixed-bottom a img {
        width: 25px;
        height: 25px;
    }

    #avatar {
        padding: 20px;
    }

    #profile {
        height: 130px;
        background-color: #009688;
    }

    #user-name {
        left: 90px;
        bottom: 77px;
        position: relative;
        width: 159px;
    }

    #user-actions {
        left: 90px;
        bottom: 71px;
        position: relative;
        width: 171px;
    }

    #menu-collapse {
        margin-top: 5%;
    }

    .fixed-left:hover {
        cursor: ew-resize;
    }

    footer {
        small {
            color: red;
        }
    }
</style>