removendo botao de logout do leftmenu e aplicando no header para funcionar corretamente em monitores com resolucao muito baixa

src/components/layout/AppHeader.vue

@@ -18,6 +18,16 @@
 
     <q-space />
 
+    <q-btn
+      flat
+      dense
+      no-caps
+      class="app-header__logout q-mr-sm"
+      icon="logout"
+      :label="$t('auth.logout')"
+      @click="logoutFn"
+    />
+
     <q-avatar size="36px" class="app-header__avatar">
       <img v-if="store.user?.photo_url" :src="store.user.photo_url" style="object-fit: cover; width: 100%; height: 100%;" />
       <span v-else class="app-header__avatar-initial">{{ userInitial }}</span>
@@ -47,16 +57,25 @@
 <script setup>
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
 import { Cookies } from "quasar";
 import { i18n } from "src/boot/i18n";
+import { useAuth } from "src/composables/useAuth";
 import { userStore } from "src/stores/user";
 import { navigationStore } from "src/stores/navigation";
 import LogoSmall from "src/assets/logo_serprati_small.png";
 
 const store = userStore();
 const navStore = navigationStore();
+const router = useRouter();
+const { logout } = useAuth();
 const { locale } = useI18n();
 
+const logoutFn = async () => {
+  await logout();
+  router.push({ name: "LoginPage" });
+};
+
 const languages = [
   { code: "pt", label: "Português", flag: "🇧🇷" },
   { code: "en", label: "English",   flag: "🇺🇸" },
@@ -121,6 +140,19 @@ const userInitial = computed(() => {
   margin-left: 16px;
 }
 
+.app-header__logout {
+  color: white !important;
+  font-size: 14px;
+
+  :deep(.q-icon) {
+    font-size: 20px;
+  }
+
+  &:hover {
+    background: rgba(white, 0.1) !important;
+  }
+}
+
 .app-header__avatar {
   background: rgba(white, 0.15);
   // border: 2px solid rgba(white, 0.3);

src/components/layout/LeftMenuLayoutAdministrador.vue

@@ -111,16 +111,6 @@
           </template>
         </q-list>
         <q-list class="q-mt-auto left-menu-footer">
-          <q-item v-ripple class="left-menu-item left-menu-logout text-center" clickable @click="logoutFn">
-            <q-item-section avatar >
-              <q-icon name="logout" class="left-menu-icon left-menu-logout__icon"/>
-            </q-item-section>
-            <q-item-section v-if="!navigation_store.miniState" class="text-violet-normal">{{ $t('auth.logout') }}</q-item-section>
-            <q-tooltip v-if="navigation_store.miniState" anchor="center right" self="center left" :offset="[10, 10]">
-              {{ $t('auth.logout') }}
-            </q-tooltip>
-          </q-item>
-
           <q-item v-ripple class="left-menu-item" clickable @click="openUrl('https://softpar.inf.br')">
             <div class="flex full-width justify-center">
               <q-img
@@ -147,7 +137,6 @@
 </template>
 <script setup>
 import { ref, watchEffect, onMounted } from "vue";
-import { useAuth } from "src/composables/useAuth";
 import { useRouter, useRoute } from "vue-router";
 import { navigationStore } from "src/stores/navigation";
 import { useQuasar } from "quasar";
@@ -157,7 +146,6 @@ import LogoSoftparLight from "src/assets/softpar_logo_light.svg";
 import LogoSoftparDark from "src/assets/softpar_logo_dark.svg";
 import LogoSoftparMini from "src/assets/softpar_logo_mini.svg";
 
-const { logout } = useAuth();
 const router = useRouter();
 const route = useRoute();
 const navigation_store = navigationStore();
@@ -181,11 +169,6 @@ watchEffect(() => {
   }
 });
 
-const logoutFn = async () => {
-  await logout();
-  router.push({ name: "LoginPage" });
-};
-
 const openUrl = (url) => {
   window.open(url, "_blank");
 };
@@ -292,10 +275,6 @@ onMounted(() => {
   padding-top: 4px;
 }
 
-.left-menu-logout__icon {
-  color: map.get(vars.$colors, "violet-normal") !important;
-}
-
 .left-menu-version {
   position: relative;
   z-index: 3;

src/components/layout/LeftMenuLayoutAssociado.vue

@@ -117,16 +117,6 @@
         </q-list>
 
         <q-list class="q-mt-auto left-menu-footer">
-          <q-item v-ripple class="left-menu-item left-menu-logout text-center" clickable @click="logoutFn">
-            <q-item-section avatar >
-              <q-icon name="logout" class="left-menu-icon left-menu-logout__icon"/>
-            </q-item-section>
-            <q-item-section v-if="!navigation_store.miniState" class="text-white">{{ $t('auth.logout') }}</q-item-section>
-            <q-tooltip v-if="navigation_store.miniState" anchor="center right" self="center left" :offset="[10, 10]">
-              {{ $t('auth.logout') }}
-            </q-tooltip>
-          </q-item>
-
           <q-item v-ripple class="left-menu-item" clickable @click="openUrl('https://softpar.inf.br')">
             <div class="flex full-width justify-center">
               <q-img
@@ -154,7 +144,6 @@
 </template>
 <script setup>
 import { ref, watchEffect, onMounted } from "vue";
-import { useAuth } from "src/composables/useAuth";
 import { useRouter, useRoute } from "vue-router";
 import { navigationStore } from "src/stores/navigation";
 import { useQuasar } from "quasar";
@@ -164,7 +153,6 @@ import LogoSoftparLight from "src/assets/softpar_logo_light.svg";
 import LogoSoftparDark from "src/assets/softpar_logo_dark.svg";
 import LogoSoftparMini from "src/assets/softpar_logo_mini.svg";
 
-const { logout } = useAuth();
 const router = useRouter();
 const route = useRoute();
 const navigation_store = navigationStore();
@@ -188,11 +176,6 @@ watchEffect(() => {
   }
 });
 
-const logoutFn = async () => {
-  await logout();
-  router.push({ name: "LoginPage" });
-};
-
 const openUrl = (url) => {
   window.open(url, "_blank");
 };
@@ -292,10 +275,6 @@ onMounted(() => {
   padding-top: 4px;
 }
 
-.left-menu-logout__icon {
-  color: vars.$neutral-light !important;
-}
-
 .left-menu-version {
   position: relative;
   z-index: 3;

src/components/layout/LeftMenuLayoutParceiro.vue

@@ -111,16 +111,6 @@
           </template>
         </q-list>
         <q-list class="q-mt-auto left-menu-footer">
-          <q-item v-ripple class="left-menu-item left-menu-logout text-center" clickable @click="logoutFn">
-            <q-item-section avatar >
-              <q-icon name="logout" class="left-menu-icon left-menu-logout__icon"/>
-            </q-item-section>
-            <q-item-section v-if="!navigation_store.miniState" class="text-violet-normal">{{ $t('auth.logout') }}</q-item-section>
-            <q-tooltip v-if="navigation_store.miniState" anchor="center right" self="center left" :offset="[10, 10]">
-              {{ $t('auth.logout') }}
-            </q-tooltip>
-          </q-item>
-
           <q-item v-ripple class="left-menu-item" clickable @click="openUrl('https://softpar.inf.br')">
             <div class="flex full-width justify-center">
               <q-img
@@ -148,7 +138,6 @@
 </template>
 <script setup>
 import { ref, watchEffect, onMounted } from "vue";
-import { useAuth } from "src/composables/useAuth";
 import { useRouter, useRoute } from "vue-router";
 import { navigationStore } from "src/stores/navigation";
 import { useQuasar } from "quasar";
@@ -158,7 +147,6 @@ import LogoSoftparLight from "src/assets/softpar_logo_light.svg";
 import LogoSoftparDark from "src/assets/softpar_logo_dark.svg";
 import LogoSoftparMini from "src/assets/softpar_logo_mini.svg";
 
-const { logout } = useAuth();
 const router = useRouter();
 const route = useRoute();
 const navigation_store = navigationStore();
@@ -182,11 +170,6 @@ watchEffect(() => {
   }
 });
 
-const logoutFn = async () => {
-  await logout();
-  router.push({ name: "LoginPage" });
-};
-
 const openUrl = (url) => {
   window.open(url, "_blank");
 };
@@ -293,10 +276,6 @@ onMounted(() => {
   padding-top: 4px;
 }
 
-.left-menu-logout__icon {
-  color: map.get(vars.$colors, "violet-normal") !important;
-}
-
 .left-menu-version {
   position: relative;
   z-index: 3;