ldc-showroom/components/layout/AppHeader.vue

<template>
  <nav
    id="top-navbar"
    class="navbar navbar-expand-lg position-relative"
    :style="`background-color: ${activeRange ? activeRange.color : activeBrand?.color} !important`"
  >
    <div class="container-fluid">
      <!-- UNE MARQUE EST SELECTIONNEE -->
      <div
        v-if="activeBrand"
        :class="{
          'd-flex flex-row flex-grow-1 justify-content-center align-items-center': true,
          'mx-auto': !activeRange,
        }"
      >
        <NuxtLinkLocale
          :to="`/brands/${transField(activeBrand, 'slug')}`"
          :class="{
            'd-inline-block py-3 px-2 text-center': true,
            'flex-grow-1': !activeRange
          }"
          data-bs-toggle="tooltip"
          :title="t('view_brand_ranges', {'brand_name': transField(activeBrand, 'name')})"
        >
          <img
            class="img-fluid main-logo"
            :src="`/data/${activeBrand.picture}`"
            :alt="`Marque ${transField(activeBrand, 'name')}`"
            :title="t('brands_logo', {'brand_name': transField(activeBrand, 'name')})"
          >
        </NuxtLinkLocale>
        <div v-if="activeRange" class="flex-grow-1 text-center">
          <span
            :class="{...{
              'title': true,
              'ps-md-5 d-inline-block px-5 py-3 rounded text-capitalize': true,
              'text-dark': getContrastYIQ(activeRange.color) === '#000000',
              'text-light': getContrastYIQ(activeRange.color) === '#FFFFFF',
            }, ...rangeFont(activeRange.font_id)}"
            :style="{
              'text-shadow': `0 0 0.2rem ${toRGBA(getContrastYIQ(activeRange.color), 0.8)}`
            }"
          >
            {{ transField(activeRange, 'name') }}
          </span>
        </div>
      </div>
      <!-- HOME (PAS DE MARQUE) -->
      <div v-else class="container">
        <div class="row">
          <div class="col mx-auto text-center mb-3">
            <img src="assets/pictures/layout/ldc-intl.png" alt="Logo LDC" class="img-fluid main-logo d-inline-block">
            <span class="sub-title d-block mt-3 mb-5">{{ transField(settings, "sub_title") }}</span>
          </div>
        </div>
      </div>

      <button
        class="navbar-toggler"
        data-bs-toggle="collapse"
        data-bs-target="#navbar-menu"
        type="button"
        aria-controls="navbar-menu"
        aria-expanded="false"
        :aria-label="t('show_hide_languages')"
      >
        <span class="navbar-toggler-icon" />
      </button>

      <div id="navbar-menu" class="lang-bar navbar-collapse collapse flex-grow-0">
        <div class="btn-group text-bg-light me-4 z-1">
          <button
            v-for="(localeObject,localeIndex) of locales"
            :key="localeIndex"
            :class="{
              'btn px-2 shadow': true,
              'btn-link': locale !== localeObject.iso,
              'btn-warning': locale === localeObject.iso,
            }"
            :title="localeObject.label"
            data-bs-toggle="tooltip"
            @click.prevent="switchLocale(localeObject)"
          >
            <span :class="`fi fi-${localeObject.flag}`" />
          </button>
        </div>
      </div>
    </div>
  </nav>
</template>

<script lang="ts">
import log from "electron-log";
import { defineComponent } from "vue";
import type { RouteLocationNormalizedLoaded } from "vue-router";
import ToolboxHelper from "~/classes/ToolboxHelper";
import { useAppStore } from "~/stores/useAppStore";
import bsTooltips from "~/vueModules/bsTooltips";

type LocaleParams = {
  iso: string,
  flag: string,
  label: string,
};

export default defineComponent({
  name: "AppHeader",
  data(): {
    versions: typeof window.versions;
    settings: TypeSettings;
    locales: Array<LocaleParams>,
    locale: string;
    route: RouteLocationNormalizedLoaded;
    activeBrand: TypeBrand|null;
    activeRange: TypeRange|null;
  } {
    return {
      versions: window.versions,
      settings: {} as TypeSettings,
      locales: [],
      locale: "",
      route: useRoute(),
      activeBrand: null,
      activeRange: null,
    };
  },
  watch: {
    $route(to: RouteLocationNormalizedLoaded) {
      log.debug(`Swithing to route ${String(to.name)}`);
      if(to.name?.toString().startsWith("index")) {
        // * Reset active Brand on main page
        useAppStore().setActiveBrand(null);
      }
      this.activeBrand = useAppStore().activeBrand;
      this.activeRange = useAppStore().activeRange;
      const { locale } = useAppStore().getI18n();
      this.locale = locale;
    },
  },
  mounted() {
    this.$nextTick(() => bsTooltips.methods.initTooltips());
    this.settings = useAppStore().data.settings();
    this.activeBrand = useAppStore().activeBrand;
    const { locale, availableLocales } = useI18n({ useScope: "global"});
    this.locale = locale.value;
    const localeSortArr = ["fr", "nl", "en"];
    this.locales = availableLocales.sort((LocA, LocB) => localeSortArr.indexOf(LocA) - localeSortArr.indexOf(LocB)).map(localeStr => {
      return {
        iso: localeStr,
        flag: this.t("_flag", {}, localeStr),
        label: this.t("_lang", {}, localeStr),
      };
    });
  },
  methods: {
    t(text: string, params: Record<string,string> = {}, localeToUse: string|null = null): string {
      return ToolboxHelper.trans(text, params, localeToUse);
    },
    transField(model: Typei18nModel, field: Typei18nFieldList) {
      return ToolboxHelper.getTranslatableField(model, field);
    },
    switchLocale(localeToSwitch:LocaleParams) {
      const switchLocalePath = useSwitchLocalePath();
      // Toast.toast(localeToSwitch.label, ToastTypeEnum.default);
      useAppStore().switchLocale(localeToSwitch.iso);
      navigateTo(switchLocalePath(localeToSwitch.iso));
    },
    rangeFont(fontId: number) {
      const font = useAppStore().getFont(fontId);
      const out: Map<string, boolean> = new Map<string, boolean>();
      if(font) {
        out.set(`f-${font.font_name}`, true);
      }
      return Object.fromEntries(out.entries());
    },
    getContrastYIQ(hexcolor: string): string {
      return ToolboxHelper.getContrastYIQ(hexcolor);
    },
    toRGBA(hexcolor: string, alpha: number = 1): string {
      return ToolboxHelper.toRGBA(hexcolor, alpha);
    },
  }
});
</script>

<style lang="postcss">
@import "flag-icons/sass/flag-icons.scss";
</style>

<style lang="scss" scoped>
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/vendor/rfs";
#top-navbar {
  .title {
    @include rfs(2rem, font-size);

    @include media-breakpoint-up(md) {
      @include rfs(3rem, font-size);
    }
    @include media-breakpoint-up(xxl) {
      @include rfs(5rem, font-size);
    }
  }

  .sub-title {
    @include rfs(1.2rem, font-size);

    @include media-breakpoint-up(md) {
      @include rfs(1.8rem, font-size);
    }
    @include media-breakpoint-up(xxl) {
      @include rfs(3.2rem, font-size);
    }
  }

  .main-logo {
    @include rfs(7rem, max-height);
    height: 20vh;
    @include media-breakpoint-up(md) {
      @include rfs(15rem, max-height);
    }
    @include media-breakpoint-up(xxl) {
      @include rfs(30rem, max-height);
    }
  }
  .fi {
    @include media-breakpoint-up(md) {
      @include rfs(2em, line-height);
      @include rfs(4em, width);
    }
    @include media-breakpoint-up(xxl) {
      @include rfs(3em, line-height);
      @include rfs(5em, width);
    }
  }

  .lang-bar {
    position: absolute;
    right: 0;
    bottom: -1rem;
  }
}
</style>