ldc-showroom/components/layout/AppHeader.vue

<template>
  <nav
    id="top-navbar"
    class="navbar navbar-expand-lg position-relative"
    :style="`background-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,
        }"
      >
        <NuxtLink
          :to="`/brands/${activeBrand.slug}`"
          :class="{
            'd-inline-block py-3 px-2 text-center': true,
            'flex-grow-1': !activeRange
          }"
          data-bs-toggle="tooltip"
          :title="`Voir les gammes de la marque ${activeBrand.name}`"
        >
          <img class="img-fluid main-logo" :src="`/data/${activeBrand.picture}`" :alt="`Marque ${activeBrand.name}`" :title="`Le logo de la marque ${activeBrand.name}`">
        </NuxtLink>
        <div v-if="activeRange" class="flex-grow-1">
          <span class="title ps-md-5 d-block">{{ activeRange.name }}</span>
        </div>
      </div>
      <!-- HOME (PAS DE MARQUE) -->
      <div v-else class="navbar-brand mx-auto">
        <NuxtLink
          to="/"
          class="btn btn-link"
          data-bs-toggle="tooltip"
          :title="settings.title"
        >
          <img src="assets/pictures/layout/ldc-intl.png" alt="Logo LDC" class="img-fluid main-logo">
        </NuxtLink>
      </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="Afficher / Masquer les langues"
      >
        <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="(locale,localeIndex) of locales"
            :key="localeIndex"
            class="btn btn-link px-2 shadow"
            :title="locale.label"
            data-bs-toggle="tooltip"
            @click.prevent="switchLocale(locale.iso)"
          >
            <span :class="`fi fi-${locale.iso}`" />
          </button>
        </div>
      </div>
    </div>
  </nav>
</template>

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

export default defineComponent({
  name: "AppHeader",
  data(): {
    versions: typeof window.versions;
    settings: TypeSettings;
    locales: Array<{
      iso: string,
      label: string,
    }>,
    route: RouteLocationNormalizedLoaded;
    activeBrand: TypeBrand|null;
    activeRange: TypeRange|null;
  } {
    return {
      versions: window.versions,
      settings: {} as TypeSettings,
      locales: [
        {
          iso: "fr",
          label: "Francais"
        },
        {
          iso: "de",
          label: "Allemand"
        },
        {
          iso: "gr",
          label: "Suédois"
        },
      ],
      route: useRoute(),
      activeBrand: null,
      activeRange: null,
    };
  },
  watch: {
    $route(to: RouteLocationNormalizedLoaded) {
      if(to.name === "index") {
        // * Reset active Brand on main page
        useAppStore().setActiveBrand(null);
      }
      this.activeBrand = useAppStore().activeBrand;
      this.activeRange = useAppStore().activeRange;
    },
  },
  mounted() {
    bsTooltips.methods.initTooltips();
    this.settings = useAppStore().data.settings();
    this.activeBrand = useAppStore().activeBrand;
  },
  methods: {
    switchLocale(locale:string) {
      Toast.toast(`Switch locale ${locale}`, ToastTypeEnum.default);
    }
  }
});
</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);
    }
  }

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