sfp_front_vue_serprati_digital/src/components/layout/AppHeader.vue

<template>
  <q-toolbar class="app-header">
    <div class="app-header__left row items-center no-wrap">
      <q-img :src="LogoSmall" fit="contain" class="app-header__logo" />
      <q-btn
        flat
        round
        dense
        class="app-header__toggle q-ml-xs"
        :icon="navStore.miniState ? 'mdi-chevron-right' : 'mdi-chevron-left'"
        @click="navStore.toggleMini()"
      />
    </div>

    <div class="app-header__type-label text-white text-weight-medium">
      {{ userTypeLabel }}
    </div>

    <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>

      <q-menu anchor="bottom right" self="top right" class="app-header__lang-menu">
        <q-list dense style="min-width: 160px">
          <q-item
            v-for="lang in languages"
            :key="lang.code"
            v-close-popup
            clickable
            :active="currentLocaleBase === lang.code"
            active-class="app-header__lang-item--active"
            @click="changeLocale(lang.code)"
          >
            <q-item-section side class="q-pr-sm">
              <span class="app-header__lang-flag">{{ lang.flag }}</span>
            </q-item-section>
            <q-item-section>{{ lang.label }}</q-item-section>
          </q-item>
        </q-list>
      </q-menu>
    </q-avatar>
  </q-toolbar>
</template>

<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: "🇺🇸" },
  { code: "es", label: "Español",   flag: "🇪🇸" },
];

const currentLocaleBase = computed(() =>
  locale.value?.split("-")[0].toLowerCase()
);

const changeLocale = (code) => {
  i18n.global.locale.value = code;
  Cookies.set("locale", code, { expires: 365, path: "/" });
};

const userTypeLabel = computed(() => {
  const t = store.userTipo;
  if (t === "administrador") return "Administração";
  if (t === "associado") return "Associado";
  if (t === "parceiro") return "Parceiro";
  return "";
});

const userInitial = computed(() => {
  const name = store.user?.name || store.user?.email || "";
  return name.charAt(0).toUpperCase();
});
</script>

<style lang="scss" scoped>
@use "src/css/quasar.variables.scss" as vars;

.app-header {
  height: 52px;
  min-height: 52px;
  background: linear-gradient(90deg, vars.$violet-darker 0%, #0f0215 100%);
  padding: 0 16px;
}

.app-header__left {
  flex-shrink: 0;
}

.app-header__logo {
  width: 36px;
  height: 36px;
}

.app-header__toggle {
  color: rgba(white, 0.75) !important;

  &:hover {
    color: white !important;
    background: rgba(white, 0.1) !important;
  }
}

.app-header__type-label {
  font-size: 14px;
  letter-spacing: 0.3px;
  opacity: 0.9;
  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);
  cursor: pointer;
  flex-shrink: 0;
}

.app-header__avatar-initial {
  color: white;
  font-size: 15px;
  font-weight: 600;
}

.app-header__lang-flag {
  font-size: 16px;
  line-height: 1;
}

.app-header__lang-item--active {
  background: rgba(vars.$violet-normal, 0.1);
  color: vars.$violet-normal;
  font-weight: 600;
}
</style>