First Committ

src/components/Header/Header.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/icons/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/Header/Header.ts

@@ -0,0 +1,459 @@
+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 MixinUsers from '../../mixins/mixin-users'
+import { static_data } from '../../db/static_data'
+import messagePopover from '../../layouts/toolbar/messagePopover/messagePopover.vue'
+import drawer from '../../layouts/drawer/drawer.vue'
+import { toolsext } from '@store/Modules/toolsext'
+import { useGlobalStore } from '@store/globalStore'
+import { useTestStore } from '@store/testStore'
+import { useUserStore } from '@store/UserStore'
+
+export default defineComponent({
+  name: 'Header',
+  mixins: [MixinUsers],
+  components: {
+    drawer, messagePopover, // CSigninNoreg, CMyAvatar, CMyCart
+  },
+  props: {
+    extraContent: {
+      required: false,
+      default: '',
+    },
+    clBase: {
+      required: false,
+      default: '',
+    },
+  },
+
+  setup() {
+    const store = inject('store')
+    const $q = useQuasar()
+    const { t } = useI18n()
+
+    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)
+
+    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() {
+      // @ts-ignore
+      return this.isSocio ? '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()
+    }
+
+    function setshortlang(lang: string) {
+      for (const indrec in static_data.lang_available) {
+        if (static_data.lang_available[indrec].value === lang) {
+          // console.log('static_data.lang_available[indrec].short', static_data.lang_available[indrec].short, static_data.lang_available[indrec].value)
+          langshort.value = static_data.lang_available[indrec].short
+          return
+        }
+      }
+    }
+
+    function isNewVersionAvailable() {
+      return globalStore.isNewVersionAvailable
+    }
+
+    // -------------------------------------------------------------------------
+    // QUASAR Example using myevent to open drawer from another component or page
+    // -------------------------------------------------------------------------
+    // (1) This code is inside layout file that have a drawer
+    //     if leftDrawerOpen is true, drawer is displayed
+
+    // (2) Listen for an myevent in created
+    /*    created(){
+          $root.$on("openLeftDrawer", openLeftDrawercb);
+        },
+        methods: {
+          openURL,
+          // (3) Define the callback in methods
+          openLeftDrawercb() {
+          leftDrawerOpen = !leftDrawerOpen;
+        }
+      }
+
+      // (4) In another component or page, emit the myevent!
+      //     Call the method when clicking button etc.
+      methods: {
+        openLeftDrawer() {
+          $root.$emit("openLeftDrawer");
+        }
+      }
+    // -------------------------------------------------------------------------
+    */
+
+    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 => {
+        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)
+
+        userStore.setlang($q.lang.getLocale())
+
+        let mylangtopass = mylang
+
+        mylangtopass = toolsext.checkLangPassed(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(true)
+    }
+
+    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 (process.env.TEST) {
+        strv = 'TEST '
+      }
+      return `[${strv}${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(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.getsuffisso() + 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 isLogged() {
+      return userStore.isLogged
+    }
+
+    function isEmailVerified() {
+      return userStore.my.verified_email
+    }
+
+    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-warning'
+      if (tools.isDebug()) return 'bg-info'
+      return 'bg-primary'
+    }
+
+    function changecmd(value: any) {
+      console.log('changecmd', value)
+      globalStore.changeCmdClick(value)
+    }
+
+    onBeforeMount(BeforeMount)
+    onMounted(mounted)
+
+    return {
+      store,
+      static_data,
+      globalStore,
+      leftDrawerOpen,
+      rightDrawerOpen,
+      rightCartOpen,
+      lang,
+      isLogged,
+      isEmailVerified,
+      getnumOrdersCart,
+      t,
+      isonline,
+      isAdmin,
+      isManager, isSocio, isSocioResidente, isConsiglio, getcolormenu,
+      isNewVersionAvailable,
+      getAppVersion,
+      RefreshApp,
+      changecmd,
+      imglogo,
+      getappname,
+      toggleanimation,
+    }
+  },
+
+})

src/components/Header/Header.vue

@@ -0,0 +1,237 @@
+<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
+          ripple
+          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>
+          <template v-slot:subtitle>
+            <div>{{ t('msg.myDescriz') }} {{ getAppVersion() }}</div>
+          </template>
+        </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 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.SHOW_USER_MENU && !isLogged" dense flat round
+          icon="menu"
+          @click="rightDrawerOpen = !rightDrawerOpen">
+        </q-btn>
+
+        <q-btn
+          class="q-mx-xs" v-if="static_data.functionality.ENABLE_ECOMMERCE && 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 && 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 && isLogged" round dense flat
+          @click="rightDrawerOpen = !rightDrawerOpen" :icon="getMyImgforIcon" :color="getcolormenu">
+          <!--<q-badge v-if="isSocio" color="green" floating transparent>
+            s
+          </q-badge>-->
+        </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="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>
+
+          <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="isLogged" class="text-weight-bold text-user">{{ Username }} - {{ myName }}
+          </div>
+          <div class="row justify-evenly q-pa-xs-sm">
+            <div v-if="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="!isLogged" class="text-user text-italic bg-red">
+            {{ t('user.loggati') }}
+          </div>
+
+          <div v-if="isLogged && !isEmailVerified" class="text-verified">{{
+              t('components.authentication.email_verification.verify_email')
+            }}
+          </div>
+
+          <!--<span class="text-white" v-if="Verificato"> {{t('reg.verificato')}} </span>-->
+          <!--<span class="text-white background-red" v-else> {{t('reg.non_verificato')}} </span>-->
+
+          <div v-if="isLogged" id="user-actions" class="column justify-center q-gutter-sm q-ma-sm center-150">
+            <q-btn rounded color="primary" icon="person" to="/profile">{{ 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="!isLogged">
+
+          <div class="q-ma-md" style="">
+            <CSigninNoreg :showregbutt="true">
+
+            </CSigninNoreg>
+          </div>
+        </div>
+
+      </div>
+      <div v-if="isLogged" class="q-mt-lg"></div>
+
+      <slot></slot>
+
+    </q-drawer>
+  </div>
+</template>
+
+<script lang="ts" src="./Header.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './Header.scss';
+</style>

src/components/Header/index.ts

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