Removed sidebar and added breadcrumbs

pages/my/calendars/[id].vue

@@ -42,27 +42,29 @@ const {
 const isLoading = computed(() => calendarStatus.value === "pending" || categoriesStatus.value === "pending")
 
 // Set custom menu
-const { t } = useI18n()
-const { setCurrentMenu } = useUiStore()
+// This should be reserved for actions, not for breadcrumbs
+//
+// const { t } = useI18n()
+// const { setCurrentMenu } = useUiStore()
 
-// Set menu once we have the calendar data
-watch(calendar, (n) => {
-  if (n?.data) {
-    setCurrentMenu([
-      {
-        tooltip: t("entity.world.backToMy"),
-        to: "/my",
-        phIcon: "universe",
-        phIconWeight: "regular"
-      },
-      {
-        tooltip: t("entity.world.backToSingle", { world: calendar.value?.data.world?.name }),
-        to: `/my/worlds/${calendar.value?.data.world?.id}`,
-        phIcon: "world"
-      },
-    ])
-  }
-}, { immediate: true })
+// // Set menu once we have the calendar data
+// watch(calendar, (n) => {
+//   if (n?.data) {
+//     setCurrentMenu([
+//       {
+//         tooltip: t("entity.world.backToMy"),
+//         to: "/my",
+//         phIcon: "universe",
+//         phIconWeight: "regular"
+//       },
+//       {
+//         tooltip: t("entity.world.backToSingle", { world: calendar.value?.data.world?.name }),
+//         to: `/my/worlds/${calendar.value?.data.world?.id}`,
+//         phIcon: "world"
+//       },
+//     ])
+//   }
+// }, { immediate: true })
 </script>
 
 <template>
@@ -84,7 +86,19 @@ watch(calendar, (n) => {
       <Title>{{ calendar.data.name }}</Title>
     </Head>
 
-    <Calendar :calendar-data="calendar.data" :categories="categories.data" />
+    <div class="h-full grid grid-rows-[auto_1fr] pt-8 gap-y-2">
+      <div class="px-8">
+        <Breadcrumb
+          v-if="calendar.data.world"
+          :items="[
+            { label: calendar.data.world.name, to: `/my/worlds/${calendar.data.world.id}` },
+            { label: calendar.data.name },
+          ]"
+        />
+      </div>
+
+      <Calendar :calendar-data="calendar.data" :categories="categories.data" />
+    </div>
   </div>
 
   <div v-else class="h-full w-full grid place-items-center">

pages/my/worlds/[id].vue

@@ -4,8 +4,6 @@ import type { World } from "~/models/World";
 import type { Calendar, CalendarChannelPayload } from "~/models/CalendarConfig";
 import { PhArrowBendDoubleUpLeft, PhGlobeHemisphereWest, PhPencil } from "@phosphor-icons/vue";
 
-const { t } = useI18n()
-
 const supabase = useSupabaseClient()
 const route = useRoute()
 const id = route.params.id
@@ -27,16 +25,18 @@ watch(user, (n) => {
 })
 
 // Set custom menu
-const { setCurrentMenu } = useUiStore()
+// This should be reserved for actions, not for breadcrumbs
+//
+// const { setCurrentMenu } = useUiStore()
 
-setCurrentMenu([
-  {
-    tooltip: t("entity.world.backToMy"),
-    to: "/my",
-    phIcon: "universe",
-    highlight: true
-  },
-])
+// setCurrentMenu([
+//   {
+//     tooltip: t("entity.world.backToMy"),
+//     to: "/my",
+//     phIcon: "universe",
+//     highlight: true
+//   },
+// ])
 
 /**
  * === Subscriptions ===
@@ -186,28 +186,36 @@ function hideEditModal() {
         <Title>{{ world.data.name }}</Title>
       </Head>
 
-      <header class="lg:w-1/2 mb-8">
-        <Spacing>
-          <div class="flex items-center gap-2">
-            <Heading level="h1">{{ world.data.name }}</Heading>
+      <header class="mb-8">
+        <Spacing size="lg">
+          <Breadcrumb
+            :items="[
+              { label: world.data.name }
+            ]"
+          />
 
-            <UiTooltipProvider :delay-duration="250">
-              <UiTooltip>
-                <UiTooltipTrigger as-child>
-                  <UiButton size="icon" class="rounded-full h-8 w-8" @click="deployEditModal">
-                    <PhPencil size="17" weight="fill" />
-                  </UiButton>
-                </UiTooltipTrigger>
-                <UiTooltipContent :side-offset="12" side="right">
-                  <p>
-                    {{ $t('entity.world.editSingle') }}
-                  </p>
-                </UiTooltipContent>
-              </UiTooltip>
-            </UiTooltipProvider>
+          <div class="lg:w-1/2">
+            <div class="flex items-center gap-2 mb-2">
+              <Heading level="h1">{{ world.data.name }}</Heading>
+
+              <UiTooltipProvider :delay-duration="250">
+                <UiTooltip>
+                  <UiTooltipTrigger as-child>
+                    <UiButton size="icon" class="rounded-full h-8 w-8" @click="deployEditModal">
+                      <PhPencil size="17" weight="fill" />
+                    </UiButton>
+                  </UiTooltipTrigger>
+                  <UiTooltipContent :side-offset="12" side="right">
+                    <p>
+                      {{ $t('entity.world.editSingle') }}
+                    </p>
+                  </UiTooltipContent>
+                </UiTooltip>
+              </UiTooltipProvider>
+            </div>
+
+            <p>{{ world.data.description }}</p>
           </div>
-
-          <p>{{ world.data.description }}</p>
         </Spacing>
       </header>