feat: article editor core

web/src/components/DashboardShell.vue

@@ -9,18 +9,41 @@ import ErrorView from '@/components/ErrorView.vue'
 import OfflineBanner from '@/components/OfflineBanner.vue'
 import UserMenu from '@/components/UserMenu.vue'
 
+const props = withDefaults(
+	defineProps<{
+		mobileTitle?: string
+		fullBleed?: boolean
+	}>(),
+	{
+		mobileTitle: undefined,
+		fullBleed: false,
+	},
+)
+
+const bodyUi = computed(() =>
+	props.fullBleed
+		? 'gap-0 p-0 sm:gap-0 sm:p-0 lg:p-0'
+		: 'gap-0 px-4 pt-5 pb-22 sm:gap-0 sm:px-4 sm:pt-5 sm:pb-22 lg:p-8',
+)
+
 const route = useRoute()
 const router = useRouter()
 const session = useSessionStore()
 const api = useApi()
 
-const navItems = [
-	{ label: 'Home', to: '/home', icon: 'i-lucide-home' },
-	{ label: 'Articles', to: '/article', icon: 'i-lucide-file-text' },
-	{ label: 'Integration', to: '/integration', icon: 'i-lucide-plug' },
-]
+const navItems = computed(() =>
+	[
+		{ label: 'Home', to: '/home', icon: 'i-lucide-home' },
+		{ label: 'Articles', to: '/article', icon: 'i-lucide-file-text' },
+		{ label: 'Integration', to: '/integration', icon: 'i-lucide-plug' },
+	].map((item) => ({
+		...item,
+		active: route.path === item.to || route.path.startsWith(`${item.to}/`),
+	})),
+)
 
-const pageTitle = computed(() => (route.meta.title as string) ?? '')
+const routeTitle = computed(() => (route.meta.title as string) ?? '')
+const pageTitle = computed(() => props.mobileTitle ?? routeTitle.value)
 const sidebarCollapsed = ref(false)
 const loggingOut = ref(false)
 
@@ -42,7 +65,9 @@ async function onLogout() {
 
 <template>
 	<UDashboardGroup unit="rem">
-		<a href="#dashboard-content" class="sr-only focus:not-sr-only">Skip to content</a>
+		<a href="#dashboard-content" class="sr-only focus:not-sr-only"
+			>Skip to content</a
+		>
 
 		<UDashboardSidebar
 			v-model:collapsed="sidebarCollapsed"
@@ -88,9 +113,7 @@ async function onLogout() {
 			</template>
 		</UDashboardSidebar>
 
-		<UDashboardPanel
-			:ui="{ body: 'gap-0 px-4 pt-5 pb-22 sm:gap-0 sm:px-4 sm:pt-5 sm:pb-22 lg:p-8' }"
-		>
+		<UDashboardPanel :ui="{ body: bodyUi }">
 			<template #header>
 				<UDashboardNavbar
 					:toggle="{ ui: { leadingIcon: 'size-5' } }"
@@ -115,12 +138,14 @@ async function onLogout() {
 							aria-hidden="true"
 							class="mx-1.5 hidden h-4 w-px bg-(--ui-border) lg:block"
 						/>
-						<UBreadcrumb
-							:items="[{ label: pageTitle }]"
-							color="neutral"
-							class="hidden lg:block"
-							:ui="{ link: 'text-sm font-medium' }"
-						/>
+						<slot name="breadcrumb">
+							<UBreadcrumb
+								:items="[{ label: routeTitle }]"
+								color="neutral"
+								class="hidden lg:block"
+								:ui="{ link: 'text-sm font-medium' }"
+							/>
+						</slot>
 					</template>
 					<template #right>
 						<slot name="navbar-right" />
@@ -129,7 +154,12 @@ async function onLogout() {
 			</template>
 
 			<template #body>
-				<div id="dashboard-content">
+				<div
+					id="dashboard-content"
+					:class="
+						fullBleed ? 'flex h-full min-h-0 flex-1 flex-col' : ''
+					"
+				>
 					<OfflineBanner />
 
 					<AppBoot v-if="session.status === 'checking'" />
@@ -138,7 +168,10 @@ async function onLogout() {
 						kind="error"
 						@retry="onRetry"
 					/>
-					<div v-else>
+					<div
+						v-else
+						:class="fullBleed ? 'flex min-h-0 flex-1 flex-col' : ''"
+					>
 						<slot />
 					</div>
 				</div>