Add title to every pages + new pull/push jobs + DropdownMenu

This commit is contained in:
2024-11-13 13:41:32 +01:00
parent b54402fc19
commit ac17134b7e
13 changed files with 237 additions and 88 deletions

View File

@@ -12,12 +12,28 @@
</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="{ name: 'user-profile' }">
<Tooltip v-if="!loggedIn" :message="'Se connecter'" side="right">
<div class="hover:border-opacity-70 flex">
<Icon :icon="'radix-icons:person'" class="w-7 h-7 p-1" />
</div>
</Tooltip>
<Tooltip v-else :message="'Mon profil'" side="right">
<DropdownMenu :options="[{
type: 'group',
items: [{
type: 'item',
label: 'Mon profil',
click: () => useRouter().push({ name: 'user-profile' }),
}, {
type: 'item',
label: 'Deconnexion',
click: () => clear(),
}]
}]">
<div class="hover:border-opacity-70 flex">
<Icon :icon="loggedIn ? 'radix-icons:avatar' : 'radix-icons:person'" class="w-7 h-7 p-1" />
<Icon :icon="'radix-icons:avatar'" class="w-7 h-7 p-1" />
</div>
</NuxtLink>
</DropdownMenu>
</Tooltip>
</div>
</div>
@@ -32,13 +48,31 @@
</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="{ name: 'user-profile' }">
<Tooltip v-if="!loggedIn" :message="'Se connecter'" side="right">
<NuxtLink :to="{ name: 'user-login' }">
<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="loggedIn ? 'radix-icons:avatar' : 'radix-icons:person'" class="w-7 h-7 p-1" />
<Icon :icon="'radix-icons:person'" class="w-7 h-7 p-1" />
</div>
</NuxtLink>
</Tooltip>
<Tooltip v-else :message="'Mon profil'" side="right">
<DropdownMenu :options="[{
type: 'group',
items: [{
type: 'item',
label: 'Mon profil',
click: () => useRouter().push({ name: 'user-profile' }),
}, {
type: 'item',
label: 'Deconnexion',
click: () => clear(),
}]
}]">
<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:avatar'" class="w-7 h-7 p-1" />
</div>
</DropdownMenu>
</Tooltip>
</div>
</div>
</div>
@@ -58,18 +92,21 @@
import { Icon } from '@iconify/vue/dist/iconify.js';
const open = ref(false);
const { loggedIn } = useUserSession();
const { loggedIn, clear } = useUserSession();
const route = useRouter().currentRoute;
const path = computed(() => route.value.params.path ? Array.isArray(route.value.params.path) ? route.value.params.path[0] : route.value.params.path : undefined);
watch(route, () => {
open.value = false;
});
const { data: pages } = await useLazyFetch('/api/navigation', {
transform: transform,
});
watch(useRouter().currentRoute, () => {
open.value = false;
});
function transform(list: any[]): any[]
{
return list?.map(e => ({ label: e.title, children: transform(e.children), link: e.path, tag: e.private ? 'private' : e.type }))
return list?.map(e => ({ label: e.title, children: transform(e.children), link: e.path, tag: e.private ? 'private' : e.type, open: path.value?.startsWith(e.path)}))
}
</script>