sucupira
83 lines
1.5 KiB
Svelte
83 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import '$lib/styles/oki.css';
|
|
import LangSwitch from '$lib/components/LangSwitch.svelte';
|
|
import { initLang, t } from '$lib/i18n/store.svelte';
|
|
|
|
let { children } = $props();
|
|
|
|
onMount(() => {
|
|
initLang();
|
|
});
|
|
</script>
|
|
|
|
<div class="app">
|
|
<header class="entete">
|
|
<a href="/" class="logo" aria-label="JWE — accueil">
|
|
<svg viewBox="0 0 32 32" width="30" height="30" aria-hidden="true">
|
|
<circle cx="16" cy="16" r="14" fill="none" stroke="currentColor" stroke-width="2.5" />
|
|
<path d="M16 7 L21 22 L16 18.5 L11 22 Z" fill="currentColor" />
|
|
</svg>
|
|
<span>{t().app.titre}</span>
|
|
</a>
|
|
<nav class="nav-lang">
|
|
<a href="/explorer" class="lien-explorer">{t().modes.explorer}</a>
|
|
<LangSwitch />
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
{@render children()}
|
|
</main>
|
|
</div>
|
|
|
|
<style>
|
|
.app {
|
|
min-height: 100dvh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.entete {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.6rem 1rem;
|
|
background: var(--oki-vert);
|
|
color: #fff;
|
|
}
|
|
|
|
.logo {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
font-size: 1.4rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.nav-lang {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
}
|
|
|
|
.lien-explorer {
|
|
color: var(--oki-vert-doux);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.lien-explorer:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
main {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
</style>
|