86 lines
2.3 KiB
Vue
86 lines
2.3 KiB
Vue
|
|
<template>
|
|
<nav id="top-navbar" class="navbar navbar-expand-lg bg-body-tertiary shadow-sm">
|
|
<div class="container-fluid align-items-start">
|
|
<div class="navbar-brand mx-auto">
|
|
<NuxtLink
|
|
to="/"
|
|
class="d-inline-block"
|
|
data-bs-toggle="tooltip"
|
|
data-bs-placement="bottom"
|
|
: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 bsTooltips from "~/vueModules/bsTooltips";
|
|
|
|
export default defineComponent({
|
|
name: "AppHeader",
|
|
data(): {
|
|
versions: typeof window.versions;
|
|
settings: TypeSettings;
|
|
} {
|
|
return {
|
|
versions: window.versions,
|
|
settings: {} as TypeSettings
|
|
};
|
|
},
|
|
mounted() {
|
|
window.ipcRendererObject.getJsonData().then((appData) => { this.settings = appData.settings; });
|
|
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>
|