Removed sidebar and added breadcrumbs

components/calendar/CalendarMenu.vue

@@ -8,8 +8,8 @@ const { isReadOnly } = storeToRefs(useCalendar())
 </script>
 
 <template>
-  <header class="pt-4 border-slate-400 dark:border-slate-700 border-b-[1px]">
+  <header class="border-slate-400 dark:border-slate-700 border-b-[1px]">
-    <div class="px-6 flex justify-between">
+    <div class="px-8 flex justify-between">
       <menu class="flex items-center gap-2">
         <li v-if="!isReadOnly">
           <CalendarDialogQuickCreateEvent />
@@ -20,7 +20,7 @@ const { isReadOnly } = storeToRefs(useCalendar())
         <li>
           <CalendarMenuNav />
         </li>
-        <li class="ml-6">
+        <li class="ml-4">
           <CalendarCurrentDate />
         </li>
       </menu>
@@ -40,7 +40,7 @@ const { isReadOnly } = storeToRefs(useCalendar())
       </menu>
     </div>
 
-    <div class="ml-6">
+    <div class="ml-8">
       <CalendarMenuSubnav />
     </div>
   </header>

components/global/Breadcrumb.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { PhCaretRight } from "@phosphor-icons/vue";
+
+const route = useRoute()
+
+export type BreadcrumbItem = {
+  label?: string;
+  translateKey?: string;
+  to?: string;
+}
+
+defineProps<{
+  items?: BreadcrumbItem[];
+}>()
+</script>
+
+<template>
+  <UiBreadcrumb>
+    <UiBreadcrumbList>
+      <UiBreadcrumbItem v-if="route.path !== '/my'">
+        <UiBreadcrumbLink as-child>
+          <NuxtLink to="/my">
+            {{ $t("breadcrumbs.profile") }}
+          </NuxtLink>
+        </UiBreadcrumbLink>
+      </UiBreadcrumbItem>
+      <UiBreadcrumbItem v-else>
+        <UiBreadcrumbPage>
+          {{ $t("breadcrumbs.profile") }}
+        </UiBreadcrumbPage>
+      </UiBreadcrumbItem>
+
+      <template v-for="(item, index) in items" :key="index">
+        <UiBreadcrumbSeparator>
+          <PhCaretRight />
+        </UiBreadcrumbSeparator>
+        <UiBreadcrumbItem>
+          <UiBreadcrumbLink v-if="item.to" as-child>
+            <NuxtLink :to="item.to">
+              <template v-if="item.label">
+                {{ item.label }}
+              </template>
+              <template v-else>
+                {{ $t(`breadcrumbs.${item.translateKey}`) }}
+              </template>
+            </NuxtLink>
+          </UiBreadcrumbLink>
+          <UiBreadcrumbPage v-else>
+            <template v-if="item.label">
+              {{ item.label }}
+            </template>
+            <template v-else>
+              {{ $t(`breadcrumbs.${item.translateKey}`) }}
+            </template>
+          </UiBreadcrumbPage>
+        </UiBreadcrumbItem>
+      </template>
+    </UiBreadcrumbList>
+  </UiBreadcrumb>
+</template>

components/ui/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <nav aria-label="breadcrumb" :class="props.class">
+    <slot />
+  </nav>
+</template>

components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { MoreHorizontal } from "lucide-vue-next"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('flex h-9 w-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <MoreHorizontal class="h-4 w-4" />
+    </slot>
+    <span class="sr-only">More</span>
+  </span>
+</template>

components/ui/breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <li
+    :class="cn('inline-flex items-center gap-1.5', props.class)"
+  >
+    <slot />
+  </li>
+</template>

components/ui/breadcrumb/BreadcrumbLink.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { PrimitiveProps } from "radix-vue"
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { Primitive } from "radix-vue"
+
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(), {
+  as: "a",
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn('transition-colors hover:text-foreground', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

components/ui/breadcrumb/BreadcrumbList.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <ol
+    :class="cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)"
+  >
+    <slot />
+  </ol>
+</template>

components/ui/breadcrumb/BreadcrumbPage.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    :class="cn('font-normal text-foreground', props.class)"
+  >
+    <slot />
+  </span>
+</template>

components/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { ChevronRight } from "lucide-vue-next"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <li
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('[&>svg]:w-3 [&>svg]:h-3', props.class)"
+  >
+    <slot>
+      <ChevronRight />
+    </slot>
+  </li>
+</template>

components/ui/breadcrumb/index.ts

@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from "./Breadcrumb.vue"
+export { default as BreadcrumbEllipsis } from "./BreadcrumbEllipsis.vue"
+export { default as BreadcrumbItem } from "./BreadcrumbItem.vue"
+export { default as BreadcrumbLink } from "./BreadcrumbLink.vue"
+export { default as BreadcrumbList } from "./BreadcrumbList.vue"
+export { default as BreadcrumbPage } from "./BreadcrumbPage.vue"
+export { default as BreadcrumbSeparator } from "./BreadcrumbSeparator.vue"

i18n.config.ts

@@ -290,6 +290,13 @@ export default defineI18nConfig(() => ({
           title: "{user} — My universe",
           metaTitle: "My universe",
         }
+      },
+      breadcrumbs: {
+        home: "Home",
+        explore: "Explore",
+        profile: "Universe",
+        world: "World",
+        calendar: "Calendar"
       }
     },
     fr: {
@@ -583,6 +590,13 @@ export default defineI18nConfig(() => ({
           title: "{user} — Mon univers",
           metaTitle: "Mon univers",
         }
+      },
+      breadcrumbs: {
+        home: "Accueil",
+        explore: "Explorer",
+        profile: "Univers",
+        world: "Monde",
+        calendar: "Calendrier"
       }
     }
   }

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()
+// This should be reserved for actions, not for breadcrumbs
-const { setCurrentMenu } = useUiStore()
+//
+// const { t } = useI18n()
+// const { setCurrentMenu } = useUiStore()
 
-// Set menu once we have the calendar data
+// // Set menu once we have the calendar data
-watch(calendar, (n) => {
+// watch(calendar, (n) => {
-  if (n?.data) {
+//   if (n?.data) {
-    setCurrentMenu([
+//     setCurrentMenu([
-      {
+//       {
-        tooltip: t("entity.world.backToMy"),
+//         tooltip: t("entity.world.backToMy"),
-        to: "/my",
+//         to: "/my",
-        phIcon: "universe",
+//         phIcon: "universe",
-        phIconWeight: "regular"
+//         phIconWeight: "regular"
-      },
+//       },
-      {
+//       {
-        tooltip: t("entity.world.backToSingle", { world: calendar.value?.data.world?.name }),
+//         tooltip: t("entity.world.backToSingle", { world: calendar.value?.data.world?.name }),
-        to: `/my/worlds/${calendar.value?.data.world?.id}`,
+//         to: `/my/worlds/${calendar.value?.data.world?.id}`,
-        phIcon: "world"
+//         phIcon: "world"
-      },
+//       },
-    ])
+//     ])
-  }
+//   }
-}, { immediate: true })
+// }, { 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([
+// setCurrentMenu([
-  {
+//   {
-    tooltip: t("entity.world.backToMy"),
+//     tooltip: t("entity.world.backToMy"),
-    to: "/my",
+//     to: "/my",
-    phIcon: "universe",
+//     phIcon: "universe",
-    highlight: true
+//     highlight: true
-  },
+//   },
-])
+// ])
 
 /**
  * === Subscriptions ===
@@ -186,28 +186,36 @@ function hideEditModal() {
         <Title>{{ world.data.name }}</Title>
       </Head>
 
-      <header class="lg:w-1/2 mb-8">
+      <header class="mb-8">
-        <Spacing>
+        <Spacing size="lg">
-          <div class="flex items-center gap-2">
+          <Breadcrumb
-            <Heading level="h1">{{ world.data.name }}</Heading>
+            :items="[
+              { label: world.data.name }
+            ]"
+          />
 
-            <UiTooltipProvider :delay-duration="250">
+          <div class="lg:w-1/2">
-              <UiTooltip>
+            <div class="flex items-center gap-2 mb-2">
-                <UiTooltipTrigger as-child>
+              <Heading level="h1">{{ world.data.name }}</Heading>
-                  <UiButton size="icon" class="rounded-full h-8 w-8" @click="deployEditModal">
+
-                    <PhPencil size="17" weight="fill" />
+              <UiTooltipProvider :delay-duration="250">
-                  </UiButton>
+                <UiTooltip>
-                </UiTooltipTrigger>
+                  <UiTooltipTrigger as-child>
-                <UiTooltipContent :side-offset="12" side="right">
+                    <UiButton size="icon" class="rounded-full h-8 w-8" @click="deployEditModal">
-                  <p>
+                      <PhPencil size="17" weight="fill" />
-                    {{ $t('entity.world.editSingle') }}
+                    </UiButton>
-                  </p>
+                  </UiTooltipTrigger>
-                </UiTooltipContent>
+                  <UiTooltipContent :side-offset="12" side="right">
-              </UiTooltip>
+                    <p>
-            </UiTooltipProvider>
+                      {{ $t('entity.world.editSingle') }}
+                    </p>
+                  </UiTooltipContent>
+                </UiTooltip>
+              </UiTooltipProvider>
+            </div>
+
+            <p>{{ world.data.description }}</p>
           </div>
-
-          <p>{{ world.data.description }}</p>
         </Spacing>
       </header>