From 8b1eb9c2586ee1021a11aab6e99ae995a8d640eb Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 25 Aug 2024 16:01:23 +0200
Subject: [PATCH] Changed user menu / sidebar

---
 components/global/sidebar/Sidebar.vue        | 51 ++++++++++++++------
 components/global/user/CTA.vue               | 21 +++++---
 nuxt.config.ts                               |  2 +-
 pages/{me/calendar => my/calendars}/[id].vue |  0
 pages/{me => my}/index.vue                   |  2 +-
 pages/{me/world => my/worlds}/[id].vue       |  2 +-
 6 files changed, 53 insertions(+), 25 deletions(-)
 rename pages/{me/calendar => my/calendars}/[id].vue (100%)
 rename pages/{me => my}/index.vue (99%)
 rename pages/{me/world => my/worlds}/[id].vue (98%)

diff --git a/components/global/sidebar/Sidebar.vue b/components/global/sidebar/Sidebar.vue
index 06ede44..8b62724 100644
--- a/components/global/sidebar/Sidebar.vue
+++ b/components/global/sidebar/Sidebar.vue
@@ -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">
diff --git a/components/global/user/CTA.vue b/components/global/user/CTA.vue
index f7af65e..726f696 100644
--- a/components/global/user/CTA.vue
+++ b/components/global/user/CTA.vue
@@ -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>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 957ca81..5ac0a48 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -16,7 +16,7 @@ export default defineNuxtConfig({
   supabase: {
     redirectOptions: {
       login: "/",
-      callback: "/me/"
+      callback: "/my/"
     }
   },
 
diff --git a/pages/me/calendar/[id].vue b/pages/my/calendars/[id].vue
similarity index 100%
rename from pages/me/calendar/[id].vue
rename to pages/my/calendars/[id].vue
diff --git a/pages/me/index.vue b/pages/my/index.vue
similarity index 99%
rename from pages/me/index.vue
rename to pages/my/index.vue
index d3419fe..fffc952 100644
--- a/pages/me/index.vue
+++ b/pages/my/index.vue
@@ -96,7 +96,7 @@ onUnmounted(() => {
         <li v-for="world in worlds" :key="world.id">
           <UiCard
             class="w-full transition-all"
-            :link="`/me/world/${world.id}`"
+            :link="`/my/worlds/${world.id}`"
             :class="{
               'hover:bg-slate-50 dark:hover:bg-sky-950 dark:focus-within:outline-sky-900': !world.color,
               'bg-red-100 dark:bg-red-950 border-red-200 hover:bg-red-50 dark:hover:bg-red-900 dark:border-red-900 dark:focus-within:outline-red-900': world.color === 'red',
diff --git a/pages/me/world/[id].vue b/pages/my/worlds/[id].vue
similarity index 98%
rename from pages/me/world/[id].vue
rename to pages/my/worlds/[id].vue
index 698256c..01ef662 100644
--- a/pages/me/world/[id].vue
+++ b/pages/my/worlds/[id].vue
@@ -140,7 +140,7 @@ function hideDeleteModal() {
               <UiCard
                 v-if="calendar"
                 class="w-full transition-all text-slate-100 bg-slate-900 border-slate-700 hover:bg-slate-700 dark:hover:bg-slate-800 dark:border-slate-900 dark:focus-within:outline-slate-900"
-                :link="`/me/calendar/${calendar.id}`"
+                :link="`/my/calendars/${calendar.id}`"
               >
                 <UiCardHeader>
                   <UiCardTitle class="text-xl pr-12">{{ calendar.name }}</UiCardTitle>