Removed sidebar and added breadcrumbs

This commit is contained in:
Alexis
2025-03-14 12:07:03 +01:00
parent 0126d42762
commit 895d8a887b
13 changed files with 286 additions and 56 deletions

View File

@@ -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>