Changed user menu / sidebar

This commit is contained in:
Alexis
2024-08-25 16:01:23 +02:00
parent 23a9f68b7b
commit 8b1eb9c258
6 changed files with 53 additions and 25 deletions

View File

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { PhHouse, PhList } from "@phosphor-icons/vue"
import { PhGlobeHemisphereWest, PhHouse, PhList } from "@phosphor-icons/vue"
import type { SidebarMenuActionType } from "./SidebarProps";
const { revealAdvancedSearch } = useCalendar()
@@ -24,23 +24,42 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
</li>
<template v-if="!user">
<UiTooltipProvider :delay-duration="50">
<UiTooltip>
<UiTooltipTrigger as-child>
<UiButton variant="ghost" size="icon" class="rounded-full" as-child>
<RouterLink to="/">
<PhHouse size="24" weight="fill" />
</RouterLink>
</UiButton>
</UiTooltipTrigger>
<UiTooltipContent :side="'right'" :side-offset="6">
<p>Retourner aux outils</p>
</UiTooltipContent>
</UiTooltip>
</UiTooltipProvider>
<li>
<UiTooltipProvider :delay-duration="50">
<UiTooltip>
<UiTooltipTrigger as-child>
<UiButton variant="ghost" size="icon" class="rounded-full" as-child>
<RouterLink to="/">
<PhHouse size="24" weight="fill" />
</RouterLink>
</UiButton>
</UiTooltipTrigger>
<UiTooltipContent :side="'right'" :side-offset="6">
<p>Accueil</p>
</UiTooltipContent>
</UiTooltip>
</UiTooltipProvider>
</li>
</template>
<template v-else/>
<template v-else>
<li>
<UiTooltipProvider :delay-duration="50">
<UiTooltip>
<UiTooltipTrigger as-child>
<UiButton variant="ghost" size="icon" class="rounded-full" as-child>
<RouterLink to="/my">
<PhGlobeHemisphereWest size="24" weight="fill" />
</RouterLink>
</UiButton>
</UiTooltipTrigger>
<UiTooltipContent :side="'right'" :side-offset="6">
<p>Mondes</p>
</UiTooltipContent>
</UiTooltip>
</UiTooltipProvider>
</li>
</template>
<li v-for="(item, i) in currentMenu" :key="i">
<UiTooltipProvider :delay-duration="50">

View File

@@ -1,14 +1,14 @@
<script lang="ts" setup>
import { computed } from "vue"
import { PhUserCircle } from "@phosphor-icons/vue"
import { PhFaders, PhSignOut, PhUserCircle } from "@phosphor-icons/vue"
const router = useRouter()
const { auth } = useSupabaseClient()
const user = useSupabaseUser()
const userMeta = computed(() => user.value?.user_metadata)
const profileUrl: string = `${useRequestURL().origin}/me/`
const profileUrl: string = `${useRequestURL().origin}/my/`
const menuOpened = ref<boolean>(false)
@@ -44,8 +44,8 @@ async function handleLogout() {
}
}
function gotoProfilePage() {
router.push({ path: "/me" })
function gotoPreferencesPage() {
// router.push({ path: "/my/preferences" })
closeMenu()
}
@@ -71,8 +71,17 @@ function gotoProfilePage() {
<UiCommand>
<UiCommandList v-if="user">
<UiCommandGroup :heading="`Connecté en tant que ${user?.email}`">
<UiCommandItem value="profile" @select="gotoProfilePage"> Profil </UiCommandItem>
<UiCommandItem value="logout" @select="handleLogout"> Déconnexion </UiCommandItem>
<UiCommandItem value="preferences" class="flex gap-[.5ch] items-center" @select="gotoPreferencesPage">
<PhFaders size="20" />
<span>Préférences</span>
</UiCommandItem>
</UiCommandGroup>
<UiCommandSeparator />
<UiCommandGroup>
<UiCommandItem value="logout" class="flex gap-[.5ch] items-center" @select="handleLogout">
<PhSignOut size="20" weight="fill" />
<span>Déconnexion</span>
</UiCommandItem>
</UiCommandGroup>
</UiCommandList>
<UiCommandList v-else>