Changed user menu / sidebar

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">
+        <li>
-          <UiTooltip>
+          <UiTooltipProvider :delay-duration="50">
-            <UiTooltipTrigger as-child>
+            <UiTooltip>
-              <UiButton variant="ghost" size="icon" class="rounded-full" as-child>
+              <UiTooltipTrigger as-child>
-                <RouterLink to="/">
+                <UiButton variant="ghost" size="icon" class="rounded-full" as-child>
-                  <PhHouse size="24" weight="fill" />
+                  <RouterLink to="/">
-                </RouterLink>
+                    <PhHouse size="24" weight="fill" />
-              </UiButton>
+                  </RouterLink>
-            </UiTooltipTrigger>
+                </UiButton>
-            <UiTooltipContent :side="'right'" :side-offset="6">
+              </UiTooltipTrigger>
-              <p>Retourner aux outils</p>
+              <UiTooltipContent :side="'right'" :side-offset="6">
-            </UiTooltipContent>
+                <p>Accueil</p>
-          </UiTooltip>
+              </UiTooltipContent>
-        </UiTooltipProvider>
+            </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">

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() {
+function gotoPreferencesPage() {
-  router.push({ path: "/me" })
+  // 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="preferences" class="flex gap-[.5ch] items-center" @select="gotoPreferencesPage">
-              <UiCommandItem value="logout" @select="handleLogout"> Déconnexion </UiCommandItem>
+                <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>

nuxt.config.ts

@@ -16,7 +16,7 @@ export default defineNuxtConfig({
   supabase: {
     redirectOptions: {
       login: "/",
-      callback: "/me/"
+      callback: "/my/"
     }
   },
 

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',

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>