116 lines
3.2 KiB
Vue
116 lines
3.2 KiB
Vue
|
|
<template>
|
|
<nav
|
|
id="top-navbar"
|
|
class="navbar navbar-expand-lg"
|
|
:style="`background-color: ${activeBrand?.color} !important`"
|
|
>
|
|
<div class="container-fluid align-items-start">
|
|
<div v-if="activeBrand" class="navbar-brand mx-auto">
|
|
<NuxtLink
|
|
:to="`/brands/${activeBrand.slug}`"
|
|
class="d-inline-block"
|
|
data-bs-toggle="tooltip"
|
|
:title="`Voir les gammes de la marque ${activeBrand.name}`"
|
|
>
|
|
<img class="img-fluid" :src="`/data/${activeBrand.picture}`" :alt="`Marque ${activeBrand.name}`" :title="`Le logo de la marque ${activeBrand.name}`">
|
|
</NuxtLink>
|
|
</div>
|
|
<div v-else class="navbar-brand mx-auto">
|
|
<NuxtLink
|
|
to="/"
|
|
class="d-inline-block"
|
|
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 class="navbar-collapse collapse flex-grow-0">
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item">
|
|
<button class="btn btn-link" title="Francais" data-bs-toggle="tooltip">
|
|
<span class="fi fi-fr" />
|
|
</button>
|
|
<button class="btn btn-link" title="Allemand" data-bs-toggle="tooltip">
|
|
<span class="fi fi-de" />
|
|
</button>
|
|
<button class="btn btn-link" title="Suédois" data-bs-toggle="tooltip">
|
|
<span class="fi fi-gr" />
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import type { RouteLocationNormalizedLoaded } from "vue-router";
|
|
import { useAppStore } from "~/stores/useAppStore";
|
|
import bsTooltips from "~/vueModules/bsTooltips";
|
|
|
|
export default defineComponent({
|
|
name: "AppHeader",
|
|
data(): {
|
|
versions: typeof window.versions;
|
|
settings: TypeSettings;
|
|
route: RouteLocationNormalizedLoaded;
|
|
activeBrand: TypeBrand|null;
|
|
} {
|
|
return {
|
|
versions: window.versions,
|
|
settings: {} as TypeSettings,
|
|
route: useRoute(),
|
|
activeBrand: null,
|
|
};
|
|
},
|
|
watch: {
|
|
$route(to: RouteLocationNormalizedLoaded) {
|
|
if(to.name === "index") {
|
|
// * Reset active Brand on main page
|
|
useAppStore().setActiveBrand(null);
|
|
}
|
|
this.activeBrand = useAppStore().activeBrand;
|
|
},
|
|
},
|
|
mounted() {
|
|
this.settings = useAppStore().data.settings();
|
|
this.activeBrand = useAppStore().activeBrand;
|
|
bsTooltips.methods.initTooltips();
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="postcss">
|
|
@import "flag-icons/sass/flag-icons.scss";
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "bootstrap/scss/vendor/rfs";
|
|
#top-navbar {
|
|
.main-logo {
|
|
@include rfs(30rem, max-height);
|
|
height: 20vh;
|
|
}
|
|
.fi {
|
|
@include rfs(8rem, line-height);
|
|
@include rfs(10rem, width);
|
|
}
|
|
}
|
|
</style>
|
|
~/stores/useAppStore
|