76 lines
3.8 KiB
Vue
76 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { useTemplateRef } from 'vue';
|
|
|
|
const containerRef = useTemplateRef("container");
|
|
const { loggedIn, user } = useUserSession();
|
|
const { direction } = useSwipe(window, { threshold: 150 });
|
|
|
|
watch(direction, () => {
|
|
if(direction.value === 'right')
|
|
toggleNavigation(true);
|
|
if(direction.value === 'left')
|
|
toggleNavigation(false);
|
|
});
|
|
|
|
function toggleNavigation(bool?: boolean)
|
|
{
|
|
containerRef.value?.setAttribute('aria-expanded', bool === undefined ? (containerRef.value?.getAttribute('aria-expanded') !== 'true').toString() : bool.toString());
|
|
}
|
|
const hideNavigation = () => toggleNavigation(false);
|
|
onMounted(() => {
|
|
const links = containerRef.value?.getElementsByTagName('a');
|
|
if(links)
|
|
{
|
|
for(const link of links)
|
|
{
|
|
link.addEventListener("click", hideNavigation);
|
|
}
|
|
}
|
|
})
|
|
onUnmounted(() => {
|
|
const links = containerRef.value?.getElementsByTagName('a');
|
|
if(links)
|
|
{
|
|
for(const link of links)
|
|
{
|
|
link.addEventListener("click", hideNavigation);
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div ref="container" aria-expanded="false" class="group flex h-screen overflow-hidden">
|
|
<div class="z-50 sm:hidden block absolute top-0 left-0 p-2 border-e border-b border-light-35 dark:border-dark-35 bg-light-0 dark:bg-dark-0 cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25" @click="e => toggleNavigation()">
|
|
<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="w-4 h-4 fill-light-100 dark:fill-dark-100">
|
|
<line x1="21" y1="6" x2="3" y2="6"></line>
|
|
<line x1="15" y1="12" x2="3" y2="12"></line>
|
|
<line x1="17" y1="18" x2="3" y2="18"></line>
|
|
</svg>
|
|
</div>
|
|
<div class="bg-light-0 sm:my-8 sm:py-3 dark:bg-dark-0 top-0 z-40 xl:w-96 sm:w-[15em] w-full border-r border-light-30 dark:border-dark-30 flex flex-col justify-between max-sm:absolute max-sm:-top-0 max-sm:-bottom-0 sm:left-0 max-sm:-left-full max-sm:group-aria-expanded:left-0 max-sm:transition-[left] py-8 max-sm:z-40">
|
|
<div class="relative bottom-6 flex flex-1 flex-col gap-4 xl:px-6 px-3">
|
|
<div class="flex justify-between items-center">
|
|
<NuxtLink @click="hideNavigation" class=" text-light-100 dark:text-dark-100 hover:text-opacity-70 max-sm:ps-6" aria-label="Accueil" :to="{ path: '/', force: true }"><ThemeIcon class="inline" icon="logo" :width=56 :height=56 /></NuxtLink>
|
|
<div class="flex gap-4 items-center">
|
|
<ThemeSwitch />
|
|
<NuxtLink @click="hideNavigation" class="" :to="{ path: '/user/profile', force: true }"><div class=" hover:border-opacity-70 flex border p-px border-light-70 dark:border-dark-70">
|
|
<Icon v-if="!loggedIn" icon="icons/user-login" :width=28 :height=28 />
|
|
<Picture v-else :src="`/users/${user?.id}/small.jpg`" :width=28 :height=28 class="flex" >
|
|
<Icon :icon="`icons/unknown`" :width=28 :height=28 ></Icon>
|
|
</Picture>
|
|
</div></NuxtLink>
|
|
</div>
|
|
</div>
|
|
<div class="flex"><SearchView @navigate="hideNavigation" /></div>
|
|
<slot></slot>
|
|
</div>
|
|
<div class="text-center xl:text-sm text-xs text-light-70 dark:text-dark-70">
|
|
<NuxtLink class="hover:underline italic" :to="{ path: '/third-party', force: true }">Mentions légales</NuxtLink>
|
|
<p>Copyright Peaceultime - 2024</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |