Animations, Policy, Toolbar Colors

src/components/MyHeader/MyHeader.ts

@@ -61,6 +61,25 @@ export default defineComponent({
     const globalStore = useGlobalStore()
     const testStore = useTestStore()
 
+    const site = computed(() => globalStore.site)
+    const isfinishLoading = computed(() => globalStore.finishLoading)
+
+    const getClassColorHeader = computed(() => {
+      // if (tools.isTest()) return 'bg-light-blue'
+      // if (tools.isDebug()) return 'bg-info'
+      if (globalStore.site && globalStore.site.confpages?.col_toolbar)
+        return 'bg-' + globalStore.site.confpages?.col_toolbar
+      else
+        return 'bg-light-blue'
+    })
+
+    const getColorText = computed(() => {
+      if (globalStore.site && globalStore.site.confpages?.col_toolbar === 'white')
+        return 'black'
+      else
+        return 'white'
+    })
+
     const data = ref({
       registration: null,
       updateExists: false,
@@ -461,11 +480,6 @@ export default defineComponent({
       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)
@@ -527,6 +541,9 @@ export default defineComponent({
       isUserNotAuth,
       tools,
       data,
+      site,
+      isfinishLoading,
+      getColorText,
     }
   },
 

src/components/MyHeader/MyHeader.vue

@@ -1,12 +1,13 @@
 <template>
   <div>
-    <q-header reveal elevated :class="getClassColorHeader()">
+    <q-header reveal elevated :class="getClassColorHeader" :style="`color: `+ getColorText + `;`">
       <q-toolbar
         color="primary"
         :glossy="$q.theme === 'mat'"
         :inverted="$q.theme === 'ios'"
         class="toolbar">
 
+
         <q-btn
           flat
           dense
@@ -156,7 +157,7 @@
       side="left"
       bordered
       show-if-above
-      :breakpoint="500"
+      :breakpoint="800"
       v-model="leftDrawerOpen"
       :content-class="['bg-grey-1', 'q-pa-sm']"
       :content-style="{padding: '0px'}"
@@ -171,7 +172,7 @@
 
               side="right" elevated>
       <q-btn
-        class="absolute-top-right" style="margin-right: 10px; color: white;"
+        class="absolute-top-right" :style="`margin-right: 10px; color:`+ getColorText + `;`"
         dense flat round icon="close" @click="rightCartOpen = !rightCartOpen">
       </q-btn>
       <div v-if="tools.isLogged()" class="text-weight-bold text-cart">Carrello
@@ -187,7 +188,7 @@
           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>
+          <div :class="`text-center q-ma-xs boldhigh text-`+ getColorText + ` 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"/>
@@ -196,7 +197,7 @@
           <!--<CMyAvatar :myimg="getMyImg()"></CMyAvatar>-->
 
           <q-btn
-            class="absolute-top-right" style="margin-right: 10px; color: white;"
+            class="absolute-top-right" :style="`margin-right: 10px; color: `+ getColorText + `;`"
             dense flat round icon="close" @click="rightDrawerOpen = !rightDrawerOpen">
           </q-btn>