60 lines
3.0 KiB
Vue
60 lines
3.0 KiB
Vue
<template>
|
|
<CollapsibleRoot class="flex flex-1 flex-col" v-model="open">
|
|
<div class="z-50 sm:hidden flex w-full items-center justify-between h-12 border-b border-light-35 dark:border-dark-35">
|
|
<div class="flex items-center px-2">
|
|
<CollapsibleTrigger asChild>
|
|
<Button icon class="ms-2 !bg-transparent group">
|
|
<Icon class="group-data-[state=open]:hidden" icon="radix-icons:hamburger-menu" />
|
|
<Icon class="group-data-[state=closed]:hidden" icon="radix-icons:cross-1" />
|
|
</Button>
|
|
</CollapsibleTrigger>
|
|
<NuxtLink class=" text-light-100 dark:text-dark-100 hover:text-opacity-70 max-sm:ps-6" aria-label="Accueil" :to="{ path: '/', force: true }">Accueil</NuxtLink>
|
|
</div>
|
|
<div class="flex items-center px-2">
|
|
<Tooltip message="Changer de theme" side="left"><ThemeSwitch /></Tooltip>
|
|
<Tooltip :message="loggedIn ? 'Mon profil' : 'Se connecter'" side="right">
|
|
<NuxtLink class="" :to="{ path: '/user/profile', force: true }">
|
|
<div class="hover:border-opacity-70 flex">
|
|
<Icon icon="radix-icons:person" class="w-7 h-7 p-1" />
|
|
</div>
|
|
</NuxtLink>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-1 flex-row relative">
|
|
<CollapsibleContent asChild forceMount>
|
|
<div class="bg-light-0 sm:my-8 sm:py-3 dark:bg-dark-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:data-[state=closed]:-left-full max-sm:transition-[left] py-8 max-sm:z-40 max-sm:data-[state=open]:left-0">
|
|
<div class="relative bottom-6 flex flex-1 flex-col gap-4 xl:px-6 px-3">
|
|
<div class="flex justify-between items-center max-sm:hidden">
|
|
<NuxtLink class=" text-light-100 dark:text-dark-100 hover:text-opacity-70 max-sm:ps-6" aria-label="Accueil" :to="{ path: '/', force: true }">
|
|
<Avatar src="/logo.svg" />
|
|
</NuxtLink>
|
|
<div class="flex gap-4 items-center">
|
|
<Tooltip message="Changer de theme" side="left"><ThemeSwitch /></Tooltip>
|
|
<Tooltip :message="loggedIn ? 'Mon profil' : 'Se connecter'" side="right">
|
|
<NuxtLink class="" :to="{ path: '/user/profile', force: true }">
|
|
<div class="bg-light-20 dark:bg-dark-20 hover:border-opacity-70 flex border p-px border-light-50 dark:border-dark-50">
|
|
<Icon icon="radix-icons:person" class="w-7 h-7 p-1" />
|
|
</div>
|
|
</NuxtLink>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="xl:px-12 px-6 text-start text-xs text-light-60 dark:text-dark-60 relative top-4">
|
|
<NuxtLink class="hover:underline italic" :to="{ path: '/third-party', force: true }">Mentions légales</NuxtLink>
|
|
<p>Copyright Peaceultime - 2024</p>
|
|
</div>
|
|
</div>
|
|
</CollapsibleContent>
|
|
<slot></slot>
|
|
</div>
|
|
</CollapsibleRoot>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Icon } from '@iconify/vue/dist/iconify.js';
|
|
|
|
const open = ref(true);
|
|
const { loggedIn } = useUserSession();
|
|
</script> |