81 lines
2.1 KiB
Vue
81 lines
2.1 KiB
Vue
|
|
<template>
|
|
<nav id="top-navbar" class="navbar navbar-expand-lg bg-body-tertiary shadow-sm">
|
|
<div class="container 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/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">
|
|
#top-navbar {
|
|
.main-logo {
|
|
max-height: 20rem;
|
|
height: 20vh;
|
|
}
|
|
}
|
|
</style>
|