Pannello Utente

Aggiornamento Yarn

src/components/MyHeader/MyHeader.scss

@@ -0,0 +1,317 @@
+.layout-padding {
+  padding: 1em 4em;
+}
+
+.item-content {
+  font-size: 0.8rem;
+  font-weight: 350;
+}
+
+.q-toolbar__title{
+  padding: 0 12px;
+}
+
+@media screen and (max-width: 600px) {
+  .q-toolbar__title{
+    padding: 0;
+  }
+  .layout-padding {
+    padding: 1.5em .5em;
+  }
+}
+
+.fixed-left:hover {
+  cursor: ew-resize;
+}
+
+/*
+@-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 moveFromTopFade {
+    from {
+        opacity: 0.3;
+        -webkit-transform: translateY(0%);
+    }
+}
+@keyframes moveFromTopFade {
+    from {
+        opacity: 0.3;
+        -webkit-transform: translateY(0%);
+        transform: translateY(-50%);
+    }
+}
+
+
+@-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 moveToBottom {
+    from {
+    }
+    to {
+        opacity: .5;
+        -webkit-transform: translateY(-100%);
+    }
+}
+
+@keyframes moveToBottom {
+    from {
+    }
+    to {
+        opacity: .5;
+        -webkit-transform: translateY(-100%);
+        transform: translateY(-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: 20px !important;
+}
+
+.drawer-content .list-label {
+  line-height: 25px;
+}
+
+.drawer-content .item {
+  height: 25px;
+}
+
+.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;
+}
+
+
+.toolbar {
+  min-height: 43px;
+}
+
+.right-itens a, .right-itens button {
+  margin-right: 10px;
+}
+
+.sel_lang {
+  padding: 5px;
+  color: white;
+}
+
+.fa-facebook:before {
+  content: url('../../../public/svg/flag_it.svg');
+}
+
+.clIconOnline {
+  color: white;
+}
+
+.clIconOffline {
+  color: red;
+}
+
+.flagimg {
+  width: 30px;
+  height: 24px;
+}
+
+.clCloudUpload {
+  transition: all 1s ease-out;
+  color: initial;
+  &.send {
+    transition: all 1s ease-in;
+    background-color: lightgreen;
+  }
+  &.receive {
+    transition: all 1s ease-in;
+    background-color: yellow;
+  }
+  &.error {
+    transition: all 1s ease-in;
+    background-color: red;
+  }
+}
+
+.clIndexeddb {
+  transition: all 1s ease-out;
+  color: initial;
+  &.receive {
+    transition: all 1s ease-in;
+    background-color: yellow;
+  }
+  &.send {
+    transition: all 1s ease-in;
+    background-color: lightgreen;
+  }
+  &.error {
+    transition: all 1s ease-in;
+    background-color: red;
+  }
+}
+
+.btnNewVersHide {
+  display: none;
+}
+
+.btnNewVersShow {
+  display: inline-block;
+  padding: 4px 2px;
+}
+
+.text-user {
+  text-shadow: .05rem .05rem .15rem #fff;
+  background-color: limegreen;
+  border-radius: 1rem !important;
+  text-align: center;
+  margin: 1px;
+  margin-bottom: 5px;
+}
+
+.text-cart {
+  font-size: 1.15rem;
+  text-shadow: .05rem .05rem .15rem #fff;
+  background-color: limegreen;
+  border-radius: 1rem !important;
+  text-align: center;
+  margin: 1px;
+  margin-bottom: 5px;
+}
+
+.roundimg  {
+  border-radius: 50% !important;
+  color: red;
+  background-color: red;
+}
+
+.titlesite {
+  font-size: 1rem;
+}

src/components/MyHeader/MyHeader.ts

@@ -0,0 +1,473 @@
+import { useQuasar } from 'quasar'
+import {
+  defineComponent, onBeforeMount, onBeforeUnmount, onMounted, ref, toRefs, watch, inject, computed,
+} from 'vue'
+
+import { tools } from '@store/Modules/tools'
+
+import { shared_consts } from '@src/common/shared_vuejs'
+import { useI18n } from '@src/boot/i18n'
+import { boot } from 'quasar/wrappers'
+import { useRouter } from 'vue-router'
+import { static_data } from '@/db/static_data'
+import messagePopover from '../../layouts/toolbar/messagePopover/messagePopover.vue'
+import notifPopover from '../../layouts/toolbar/notifPopover/notifPopover.vue'
+import drawer from '../../layouts/drawer/drawer.vue'
+import { CMyAvatar } from '@/components/CMyAvatar'
+import { toolsext } from '@store/Modules/toolsext'
+import { useGlobalStore } from '@store/globalStore'
+import { useTestStore } from '@store/testStore'
+import { useUserStore } from '@store/UserStore'
+
+import MixinUsers from '../../mixins/mixin-users'
+import { CMyCart, CSigninNoreg } from '@/components'
+
+export default defineComponent({
+  name: 'MyHeader',
+  components: {
+    drawer, messagePopover, CMyAvatar, CSigninNoreg, CMyCart, notifPopover
+  },
+  props: {
+    extraContent: {
+      required: false,
+      default: '',
+    },
+    clBase: {
+      required: false,
+      default: '',
+    },
+  },
+
+  setup() {
+    const $q = useQuasar()
+    const { t } = useI18n()
+    const $router = useRouter()
+
+    const isUserNotAuth = ref(false)
+    const iconConn = ref('wifi')
+    const clIconConn = ref('clIconOnline')
+    const strConn = ref('')
+    const langshort = ref('')
+    const clCloudUpload = ref('')
+    const clCloudDownload = ref('')
+    const clCloudUp_Indexeddb = ref('')
+    const tabcmd = ref('')
+    const clCloudDown_Indexeddb = ref('clIndexeddbsend')
+    const photo = ref('')
+    const visuimg = ref(true)
+
+    const userStore = useUserStore()
+    const globalStore = useGlobalStore()
+    const testStore = useTestStore()
+
+    const stateconn = ref(globalStore.stateConnection)
+
+    const {
+      getUsernameChatByMsg,
+      getMyUsername,
+      Username,
+      myName,
+      mySurname,
+      myCell,
+      MadeGift,
+      Email,
+      getMyImg,
+      getMyImgforIcon,
+      getImgByMsg,
+      getUserByUsername,
+      getImgByUsername,
+      isValidUsername,
+      getNumMsg,
+      getNumMsgUnread,
+      getMsgText,
+      paotest } = MixinUsers();
+
+    function isonline() {
+      return globalStore.stateConnection === 'online'
+    }
+
+    function isAdmin() {
+      return userStore.isAdmin
+    }
+
+    function isManager() {
+      return userStore.isManager
+    }
+
+    const isSocio = computed(() => userStore.my.profile.socio)
+
+    function isSocioResidente() {
+      return userStore.my.profile.socioresidente
+    }
+
+    function isConsiglio() {
+      return userStore.my.profile.consiglio
+    }
+
+    function getcolormenu() {
+      return isSocio.value ? 'green-7' : 'white'
+    }
+
+    function isTutor() {
+      return userStore.isTutor
+    }
+
+    function isZoomeri() {
+      return userStore.isZoomeri
+    }
+
+    function isTratuttrici() {
+      return userStore.isTratuttrici
+    }
+
+    function conndata_changed() {
+      return globalStore.connData
+    }
+
+    function snakeToCamel(str: string) {
+      return str.replace(/(-\w)/g, (m) => m[1].toUpperCase())
+    }
+
+    function setLangAtt(mylang: string) {
+
+      console.log('LANG =', mylang)
+      // console.log('PRIMA $q.lang.isoName', $q.lang.isoName)
+
+      // dynamic import, so loading on demand only
+      import(`quasar/lang/${mylang}`).then((lang) => {
+        $q.lang.set(lang.default)
+
+        import('../../statics/i18n').then(() => {
+          // console.log('MY LANG DOPO=', $q.lang.isoName)
+        })
+      })
+
+      globalStore.addDynamicPages($router)
+    }
+
+    function setshortlang(lang: string) {
+      static_data.lang_available.forEach((langavail) => {
+        if (langavail.value === lang) {
+          // console.log('static_data.lang_available[indrec].short', static_data.lang_available[indrec].short, static_data.lang_available[indrec].value)
+          langshort.value = langavail.short
+          return langshort.value
+        }
+      })
+    }
+
+    function isNewVersionAvailable() {
+      return globalStore.isNewVersionAvailable
+    }
+
+    const leftDrawerOpen = computed({
+      get: () => globalStore.leftDrawerOpen,
+      set: val => {
+        globalStore.leftDrawerOpen = val
+      },
+    })
+
+    const rightDrawerOpen = computed({
+      get: () => globalStore.rightDrawerOpen,
+      set: val => {
+        globalStore.rightDrawerOpen = val
+        if (globalStore.rightDrawerOpen) globalStore.rightCartOpen = false
+      },
+    })
+
+    const rightCartOpen = computed({
+      get: () => globalStore.rightCartOpen,
+      set: val => {
+        globalStore.rightCartOpen = val
+        if (globalStore.rightCartOpen) globalStore.rightDrawerOpen = false
+      },
+    })
+
+    const lang = computed({
+      get: () => $q.lang.isoName,
+      set: mylang => {
+        const $router = useRouter()
+        console.log('set lang', $q.lang.getLocale())
+        $q.lang.set(snakeToCamel(mylang))
+        // tools.showNotif($q, 'IMPOSTA LANG= ' + $i18n.locale)
+        // console.log('IMPOSTA LANG= ' + $i18n.locale)
+
+        let mylangtopass = mylang
+
+        mylangtopass = toolsext.checkLangPassed($q, $router, mylangtopass)
+
+        userStore.setlang($router, mylangtopass)
+
+        setshortlang(mylangtopass)
+
+        setLangAtt(mylangtopass)
+
+        userStore.setLangServer()
+      },
+    })
+
+    watch(() =>
+      stateconn,
+      // @ts-ignore
+      (value: string, oldValue: string) => {
+        globalStore.stateConnection = value
+      },
+    )
+
+    watch(
+      conndata_changed,
+      (value, oldValue) => {
+        clCloudUpload.value = (value.uploading_server === 1) ? 'clCloudUpload send' : 'clCloudUpload'
+        clCloudUpload.value = (value.downloading_server === 1) ? 'clCloudUpload receive' : 'clCloudUpload'
+        clCloudUp_Indexeddb.value = (value.uploading_indexeddb === 1) ? 'clIndexeddb send' : 'clIndexeddb'
+        clCloudUp_Indexeddb.value = (value.downloading_indexeddb === 1) ? 'clIndexeddb receive' : 'clIndexeddb'
+
+        /* clCloudUpload.value = (value.uploading_server === -1) ? 'clCloudUpload error' : clCloudUpload
+        clCloudUpload.value = (value.downloading_server === -1) ? 'clCloudUpload error' : clCloudDownload
+        clCloudUp_Indexeddb.value = (value.uploading_indexeddb === -1) ? 'clIndexeddb error' : clCloudUp_Indexeddb
+        clCloudUp_Indexeddb.value = (value.downloading_indexeddb === -1) ? 'clIndexeddb error' : clCloudDown_Indexeddb
+
+         */
+      },
+    )
+
+    /*
+  @Watch('conn_changed', { immediate: true, deep: true })
+  function changeconn_changed(value: string, oldValue: string) {
+    if (value !== oldValue) {
+
+      // console.log('SSSSSSSS: ', value, oldValue)
+
+      const color = (value === 'online') ? 'positive' : 'warning'
+      const statoconn = t('connection.conn') + ' ' + ((value === 'online') ? t('connection.online') : t('connection.offline'))
+
+      if (static_data.functionality.SHOW_IF_IS_SERVER_CONNECTION) {
+
+        if (!!oldValue) {
+          tools.showNotif($q, statoconn, {
+            color,
+            icon: 'wifi'
+          })
+        }
+
+        changeIconConn()
+      }
+    }
+  }
+
+     */
+
+    function RefreshApp() {
+      // Unregister Service Worker
+      navigator.serviceWorker.getRegistrations().then((registrations) => {
+        for (const registration of registrations) {
+          registration.unregister()
+        }
+      })
+      window.location.reload()
+    }
+
+    function changeIconConn() {
+      iconConn.value = globalStore.stateConnection === 'online' ? 'wifi' : 'wifi_off'
+      clIconConn.value = globalStore.stateConnection === 'online' ? 'clIconOnline' : 'clIconOffline'
+    }
+
+    function getAppVersion() {
+      // return "AA"
+      let strv = ''
+      if (process.env.DEV) {
+        strv = 'DEV '
+      } else if (tools.isTest()) {
+        strv = 'TEST '
+      }
+      return `${strv}v. ${process.env.APP_VERSION}`
+    }
+
+    function getLangAtt() {
+      return $q.lang.isoName
+    }
+
+    function BeforeMount() {
+      // Estrai la Lang dal Localstorage
+
+      // console.log('$q.i18n=', $q.i18n, '$q.getLocale()=', $q.lang.isoName)
+      const mybrowserLang = getLangAtt()
+      // tools.showNotif($q, 'prima: ' + String(my))
+
+      let mylang = tools.getItemLS(toolsext.localStorage.lang)
+      if (mylang === '') {
+        if (navigator) {
+          mylang = navigator.language
+          // console.log(`LANG2 NAVIGATOR ${mylang}`)
+        } else {
+          mylang = $q.lang.isoName
+        }
+
+        // console.log('IMPOSTA LANGMY', mylang)
+      }
+
+      mylang = toolsext.checkLangPassed($q, $router, mylang)
+
+      setLangAtt(mylang)
+      setshortlang(mylang)
+    }
+
+    function mounted() {
+      // Test this by running the code snippet below and then
+      // use the "TableOnlyView" checkbox in DevTools Network panel
+
+      // console.log('Event LOAD')
+      if (window) {
+        window.addEventListener('load', () => {
+          // console.log('2) ENTERING Event LOAD')
+
+          function updateOnlineStatus(event: any) {
+            if (navigator.onLine) {
+              console.log('EVENT ONLINE!')
+              // handle online status
+              globalStore.setStateConnection('online')
+              // mychangeIconConn()
+            } else {
+              console.log('EVENT OFFLINE!')
+              // handle offline status
+              globalStore.setStateConnection('offline')
+              // mychangeIconConn()
+            }
+          }
+
+          window.addEventListener('online', updateOnlineStatus)
+          window.addEventListener('offline', updateOnlineStatus)
+        })
+      }
+    }
+
+    function imglogo() {
+      return `../../${tools.getimglogo()}`
+    }
+
+    function getappname() {
+      return tools.getappname(tools.isMobile())
+
+    }
+
+    function toggleanimation() {
+      console.log('toggleanimation')
+      visuimg.value = false
+      setTimeout(() => {
+        visuimg.value = true
+      }, 100)
+    }
+
+    function logoutHandler() {
+      userStore.logout()
+        .then(() => {
+          // $router.replace('/logout')
+          //
+          // setTimeout(() => {
+          //   $router.replace('/')
+          // }, 1000)
+
+          tools.showNotif($q, t('logout.uscito'), { icon: 'exit_to_app' })
+        })
+    }
+
+    function clickregister() {
+      rightDrawerOpen.value = false
+
+      const $router = useRouter()
+      $router.replace('/signup')
+    }
+
+    function getnumItemsCart() {
+      /* const arrcart = Products.cart
+      if (!!arrcart) {
+        if (!!arrcart.items) {
+          const total = arrcart.items.reduce((sum, item) => sum + item.order.quantity, 0)
+          return total
+        }
+      }
+
+       */
+      return 0
+    }
+
+    function getnumOrdersCart() {
+      /* const arrorderscart = Products.orders.filter((rec) => rec.status < shared_consts.OrderStatus.RECEIVED)
+      // const arrorderscart = Products.orders
+      if (!!arrorderscart) {
+        return arrorderscart.length
+      }
+
+       */
+      return 0
+    }
+
+    function getcart() {
+      // return Products.cart
+      return null
+    }
+
+    function getClassColorHeader() {
+      if (tools.isTest()) return 'bg-light-blue'
+      if (tools.isDebug()) return 'bg-info'
+      return 'bg-light-blue'
+    }
+
+    function changecmd(value: any) {
+      console.log('changecmd', value)
+      globalStore.changeCmdClick(value)
+    }
+
+    onBeforeMount(BeforeMount)
+    onMounted(mounted)
+
+    return {
+      static_data,
+      globalStore,
+      leftDrawerOpen,
+      rightDrawerOpen,
+      rightCartOpen,
+      lang,
+      langshort,
+      getnumOrdersCart,
+      t,
+      isonline,
+      isAdmin,
+      isManager, isSocio, isSocioResidente, isConsiglio, getcolormenu,
+      isNewVersionAvailable,
+      getAppVersion,
+      RefreshApp,
+      changecmd,
+      imglogo,
+      getappname,
+      toggleanimation,
+      getClassColorHeader,
+      getcart,
+      getnumItemsCart,
+      isTutor,
+      isZoomeri,
+      isTratuttrici,
+      getUsernameChatByMsg,
+      getMyUsername,
+      Username,
+      myName,
+      mySurname,
+      myCell,
+      MadeGift,
+      Email,
+      getMyImg,
+      getMyImgforIcon,
+      getImgByMsg,
+      getUserByUsername,
+      getImgByUsername,
+      isValidUsername,
+      getNumMsg,
+      getNumMsgUnread,
+      getMsgText,
+      paotest,
+      logoutHandler,
+      isUserNotAuth,
+      tools,
+    }
+  },
+
+})

src/components/MyHeader/MyHeader.vue

@@ -0,0 +1,251 @@
+<template>
+  <div>
+    <q-header reveal elevated :class="getClassColorHeader()">
+      <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>
+
+        <div v-if="$q.platform.is.desktop">
+          <!--I'm only rendered on desktop!-->
+        </div>
+
+        <div v-if="$q.platform.is.mobile">
+          <!--I'm only rendered on mobile!-->
+        </div>
+
+        <div v-if="$q.platform.is.electron">
+          <!--I'm only rendered on Electron!-->
+        </div>
+
+        <q-btn
+          size="md"
+          id="newvers" v-if="isNewVersionAvailable()" color="secondary" rounded icon="refresh"
+          class="btnNewVersShow" @click="RefreshApp()" :label="t('notification.newVersionAvailable')">
+        </q-btn>
+
+        <q-toolbar-title class="row items-center">
+          <q-avatar>
+            <img :src="imglogo()" height="27" alt="Immagine Logo">
+          </q-avatar>
+          <div class="q-mx-sm titlesite">{{ getappname() }}</div>
+        </q-toolbar-title>
+
+        <!--
+                        <div v-if="isAdmin">
+                            <q-btn flat dense round aria-label="">
+                                <q-icon :class="clCloudUpload" nametranslate="cloud_upload"></q-icon>
+                            </q-btn>
+
+                            <q-btn flat dense round aria-label="">
+                                <q-icon :class="clCloudUp_Indexeddb" nametranslate="arrow_upward"></q-icon>
+                            </q-btn>
+
+                        </div>
+        -->
+
+        <q-btn
+          v-if="!isonline() && static_data.functionality.SHOW_IF_IS_SERVER_CONNECTION"
+          flat
+          dense
+          round
+          aria-label="Connection"
+        >
+          <q-icon :name="iconConn" :class="clIconConn"></q-icon>
+          <q-icon v-if="isUserNotAuth" name="device_unknown"></q-icon>
+        </q-btn>
+
+        <q-btn-dropdown
+          stretch
+          v-if="static_data.lang_available.length > 1"
+          flat
+          :label="langshort"
+          auto-close
+        >
+          <q-list bordered>
+            <q-item
+              clickable v-ripple
+
+              v-for="langrec in static_data.lang_available" :key="langrec.value"
+              @click="lang = langrec.value">
+              <q-item-section avatar>
+                <img :src="langrec.image" class="flagimg" alt="flag">
+              </q-item-section>
+              <q-item-section>
+                {{ langrec.label }}
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-btn-dropdown>
+
+        <div v-if="static_data.functionality.SHOW_MESSAGES">
+          <message-popover></message-popover>
+        </div>
+        <div v-if="static_data.functionality.SHOW_NOTIF">
+          <notif-popover></notif-popover>
+        </div>
+
+        <!--
+        <div class="right-itens">
+            <label>{{ t('msg.hello') }}</label> <span v-model="prova"></span> !
+        </div>-->
+
+        <!-- BUTTON USER BAR -->
+
+        <q-btn
+          class="q-mx-xs" v-if="static_data.functionality.ENABLE_ECOMMERCE && tools.isLogged()" round dense flat
+          @click="rightCartOpen = !rightCartOpen" icon="fas fa-shopping-cart">
+
+          <q-badge v-if="getnumItemsCart() > 0" color="red" floating transparent>
+            {{ getnumItemsCart() }}
+          </q-badge>
+        </q-btn>
+
+        <q-btn
+          class="q-mx-xs" v-if="static_data.functionality.ENABLE_ECOMMERCE && tools.isLogged() && getnumOrdersCart() > 0"
+          round dense flat
+          to="/orderinfo" icon="fas fa-list-ol">
+
+          <q-badge v-if="getnumOrdersCart() > 0" color="blue" floating transparent>
+            {{ getnumOrdersCart() }}
+          </q-badge>
+        </q-btn>
+
+        <q-btn
+          class="q-mx-xs" v-if="static_data.functionality.SHOW_USER_MENU && !tools.isLogged()" dense flat round
+          icon="menu"
+          @click="rightDrawerOpen = !rightDrawerOpen">
+        </q-btn>
+        <q-avatar v-else-if="static_data.functionality.SHOW_USER_MENU && tools.isLogged() && getMyImg()"
+                  size="36px" class="center_img cursor-pointer"
+                  @click="rightDrawerOpen = !rightDrawerOpen">
+          <q-img ratio="1" fit="conver" :src="getMyImg()" :alt="Username()" img-class="imgprofile_small" stretch="false"
+                 />
+        </q-avatar>
+        <q-btn
+          v-else
+          class="q-mx-xs iconprofile_small" round dense flat
+          @click="rightDrawerOpen = !rightDrawerOpen" :icon="getMyImgforIcon()" :color="getcolormenu()">
+        </q-btn>
+
+        <!--<q-btn
+          class="q-mx-xs iconprofile_small" v-if="static_data.functionality.SHOW_USER_MENU && isLogged()" round dense flat
+          @click="rightDrawerOpen = !rightDrawerOpen" :icon="getMyImgforIcon()" :color="getcolormenu()">
+        </q-btn>-->
+
+      </q-toolbar>
+
+    </q-header>
+
+    <q-drawer
+      side="left"
+      bordered
+      show-if-above
+      :breakpoint="500"
+      v-model="leftDrawerOpen"
+      :content-class="['bg-grey-1', 'q-pa-sm']"
+      :content-style="{padding: '0px'}"
+    >
+      <drawer :clBase="clBase"></drawer>
+
+    </q-drawer>
+
+    <!-- USER BAR -->
+    <q-drawer v-if="static_data.functionality.ENABLE_ECOMMERCE" v-model="rightCartOpen" side="right" elevated>
+      <q-btn
+        class="absolute-top-right" style="margin-right: 10px; color: white;"
+        dense flat round icon="close" @click="rightCartOpen = !rightCartOpen">
+      </q-btn>
+      <div v-if="tools.isLogged()" class="text-weight-bold text-cart">Carrello
+      </div>
+      <CMyCart></CMyCart>
+    </q-drawer>
+    <!-- USER BAR -->
+    <q-drawer v-if="static_data.functionality.SHOW_USER_MENU" v-model="rightDrawerOpen" side="right" elevated>
+      <div id="profile">
+        <q-img
+          class="absolute-top" src="images/landing_first_section.png"
+          style="height: 150px" alt="section page">
+        </q-img>
+        <div class="absolute-top bg-transparent text-black center_img" style="margin-top: 10px;">
+          <div class="text-center q-ma-xs boldhigh text-white text-h7">Area Personale</div>
+
+          <q-avatar size="80px" class="center_img q-ma-md">
+            <q-img fit="cover" :src="getMyImg()" :alt="Username()" img-class="imgprofile" height="80px"/>
+          </q-avatar>
+
+          <!--<CMyAvatar :myimg="getMyImg()"></CMyAvatar>-->
+
+          <q-btn
+            class="absolute-top-right" style="margin-right: 10px; color: white;"
+            dense flat round icon="close" @click="rightDrawerOpen = !rightDrawerOpen">
+          </q-btn>
+
+          <div v-if="tools.isLogged()" class="text-weight-bold text-user">{{ Username() }}<span v-if="myName()"> - {{ myName() }}</span>
+          </div>
+          <div class="row justify-evenly q-pa-xs-sm">
+            <div v-if="tools.isLogged() && isAdmin()" class="text-weight-bold text-user bg-red q-px-xs">Admin</div>
+            <div v-if="isSocio" class="text-weight-bold text-user q-px-xs">Socio</div>
+            <div v-if="isSocioResidente()" class="text-weight-bold text-user q-px-xs bg-amber">Residente</div>
+            <div v-if="isConsiglio()" class="text-weight-bold text-user q-px-xs bg-deep-orange-10">Consiglio</div>
+            <div v-if="isManager()" class="text-weight-bold text-user bg-blue q-px-xs">Segreteria</div>
+            <div v-if="isTutor()" class="text-weight-bold text-user q-px-xs">Tutor</div>
+            <div v-if="isTratuttrici()" class="text-weight-bold text-user q-px-xs">Editor</div>
+          </div>
+          <div v-if="!tools.isLogged()" class="text-user text-italic bg-red">
+            {{ t('user.loggati') }}
+          </div>
+
+          <div v-if="tools.isLogged() && !tools.isVerified()" class="text-verified">{{
+              t('components.authentication.email_verification.verify_email')
+            }}
+          </div>
+
+          <div v-if="tools.isLogged()"
+            class="text-verified">
+            <!-- <span class="text-white" v-if="Verificato()"> {{t('reg.verificato')}} </span> -->
+            <span class="text-user text-italic bg-red" v-if="!tools.Verificato()"> {{t('reg.non_verificato')}} </span>
+          </div>
+
+          <div v-if="tools.isLogged()" id="user-actions" class="column justify-center q-gutter-sm q-ma-sm center-150">
+            <q-btn rounded color="primary" icon="person" :to="`/my/`+getMyUsername()">{{ t('pages.profile') }}</q-btn>
+            <!--<q-btn round color="warning" icon="lock"></q-btn>-->
+            <q-btn rounded color="negative" icon="exit_to_app" @click='logoutHandler'>{{ t('login.esci') }}</q-btn>
+          </div>
+
+        </div>
+        <div style="margin-top:120px;"></div>
+        <div v-show="!tools.isLogged()">
+
+          <div class="q-ma-md" style="">
+            <CSigninNoreg :showregbutt="static_data.functionality.SHOW_REG_BUTTON">
+
+            </CSigninNoreg>
+          </div>
+        </div>
+
+      </div>
+      <div v-if="tools.isLogged()" class="q-mt-lg"></div>
+
+      <slot></slot>
+
+    </q-drawer>
+  </div>
+</template>
+
+<script lang="ts" src="./MyHeader.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './MyHeader.scss';
+</style>

src/components/MyHeader/index.ts

@@ -0,0 +1 @@
+export { default as MyHeader } from './MyHeader.vue'