140 lines
2.9 KiB
Vue
140 lines
2.9 KiB
Vue
<script setup>
|
|
import { Map } from "#components";
|
|
import "@/assets/styles.css";
|
|
|
|
const { locales, setLocale } = useI18n();
|
|
</script>
|
|
|
|
<template>
|
|
<div id="app">
|
|
<el-container>
|
|
<el-header>
|
|
<h1 id="main-title">P'tits Lutins</h1>
|
|
<el-menu
|
|
mode="horizontal"
|
|
:default-active="activeIndex"
|
|
@select="handleSelect"
|
|
>
|
|
<el-menu-item index="index">
|
|
{{ $t("navigation.home") }}
|
|
</el-menu-item>
|
|
<el-menu-item index="map">{{ $t("navigation.map") }}</el-menu-item>
|
|
<el-menu-item index="calendar">{{
|
|
$t("navigation.calendar")
|
|
}}</el-menu-item>
|
|
<el-menu-item index="gallery">{{
|
|
$t("navigation.gallery")
|
|
}}</el-menu-item>
|
|
<el-menu-item index="share">{{
|
|
$t("navigation.share")
|
|
}}</el-menu-item>
|
|
</el-menu>
|
|
<el-select
|
|
v-model="$i18n.locale"
|
|
@change="setLocale"
|
|
class="locale-switcher"
|
|
>
|
|
<el-option
|
|
v-for="locale in locales"
|
|
:key="locale.code"
|
|
:label="locale.name"
|
|
:value="locale.code"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-header>
|
|
<el-main>
|
|
<HomePage v-if="activeIndex === 'index'" />
|
|
<div v-if="activeIndex === 'map'" class="map-tab-content">
|
|
<Map />
|
|
</div>
|
|
<div v-if="activeIndex === 'calendar'" class="tab-content">
|
|
<el-calendar />
|
|
</div>
|
|
<div v-if="activeIndex === 'gallery'" class="tab-content">
|
|
<h2>Galerie</h2>
|
|
<p>Voici quelques photos de nos aventures !</p>
|
|
</div>
|
|
<div v-if="activeIndex === 'share'" class="tab-content">
|
|
<h2>Partager</h2>
|
|
<p>Partagez et collaborer avec vos amis et votre famille !</p>
|
|
</div>
|
|
</el-main>
|
|
</el-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
activeIndex: "index",
|
|
};
|
|
},
|
|
methods: {
|
|
handleSelect(key, keyPath) {
|
|
this.activeIndex = key;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
@import url("https://static.ppsfleet.navy/fonts/Besley/style.css");
|
|
@import url("https://static.ppsfleet.navy/fonts/inter/style.css");
|
|
|
|
html,
|
|
body,
|
|
#__nuxt {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
font-family: "Inter", sans-serif;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
font-family: "Besley", serif;
|
|
}
|
|
|
|
#main-title {
|
|
margin: 0;
|
|
font-size: 1.4em;
|
|
margin-right: 1em;
|
|
}
|
|
|
|
#app {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.el-header {
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--el-menu-border-color);
|
|
}
|
|
|
|
.el-menu {
|
|
flex: 1;
|
|
}
|
|
|
|
.el-select.locale-switcher {
|
|
width: 200px;
|
|
}
|
|
|
|
.el-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
--el-main-padding: 0;
|
|
}
|
|
|
|
.map-tab-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|