59 lines
2.2 KiB
Vue
59 lines
2.2 KiB
Vue
<script lang="ts">
|
|
let icon: HTMLDivElement | null;
|
|
function toggleLeftPanel(_: Event): void {
|
|
document.querySelector('.published-container')?.classList.toggle('is-left-column-open');
|
|
}
|
|
</script>
|
|
|
|
<script setup lang="ts">
|
|
const { data: tags } = await useAsyncData('descriptions', queryContent('/tags').findOne);
|
|
|
|
provide('tags/descriptions', tags);
|
|
|
|
onMounted(() => {
|
|
icon = document.querySelector('.site-nav-bar .clickable-icon');
|
|
icon?.removeEventListener('click', toggleLeftPanel);
|
|
icon?.addEventListener('click', toggleLeftPanel);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="published-container print has-navigation has-outline">
|
|
<div class="site-nav-bar">
|
|
<div>
|
|
<div class="clickable-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
class="svg-icon lucide-menu">
|
|
<line x1="4" y1="12" x2="20" y2="12"></line>
|
|
<line x1="4" y1="6" x2="20" y2="6"></line>
|
|
<line x1="4" y1="18" x2="20" y2="18"></line>
|
|
</svg>
|
|
</div>
|
|
<div class="gapx-3 flex align-stretch">
|
|
<NuxtLink class="site-nav-bar-text" aria-label="Accueil" :href="'/'">
|
|
<ThemeIcon icon="logo" :width=40 :height=40 />
|
|
</NuxtLink>
|
|
<NuxtLink class="site-nav-bar-text mobile-hidden" aria-label="Systeme" :href="'/explorer'"
|
|
:class="{'mod-active': $route.path.startsWith('/explorer')}">Systeme</NuxtLink>
|
|
<NuxtLink class="site-nav-bar-text mobile-hidden" aria-label="Outils" :href="'/tools'"
|
|
:class="{'mod-active': $route.path.startsWith('/tools')}">Outils</NuxtLink>
|
|
</div>
|
|
</div>
|
|
<div class="mobile-bigger">
|
|
<SearchView />
|
|
</div>
|
|
<div class="ps-1 gapx-1 flex align-center">
|
|
<ThemeSwitch class="mobile-hidden" />
|
|
<NuxtLink class="site-login" href="/user/profile">
|
|
<ThemeIcon icon="user" :width=32 :height=32 />
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
<div class="site-body">
|
|
<LeftComponent />
|
|
<NuxtPage />
|
|
</div>
|
|
</div>
|
|
</template>
|