feat: home screen and navigation design

web/src/components/DashboardShell.vue

@@ -1,13 +1,18 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
+import { computed, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { useSessionStore } from '@/stores/session'
+import { useApi } from '@/composables/useApi'
 import AppBoot from '@/components/AppBoot.vue'
+import AppLogo from '@/components/AppLogo.vue'
 import ErrorView from '@/components/ErrorView.vue'
 import OfflineBanner from '@/components/OfflineBanner.vue'
+import UserMenu from '@/components/UserMenu.vue'
 
 const route = useRoute()
+const router = useRouter()
 const session = useSessionStore()
+const api = useApi()
 
 const navItems = [
 	{ label: 'Home', to: '/home', icon: 'i-lucide-home' },
@@ -16,39 +21,111 @@ const navItems = [
 ]
 
 const pageTitle = computed(() => (route.meta.title as string) ?? '')
+const sidebarCollapsed = ref(false)
+const loggingOut = ref(false)
 
 function onRetry() {
 	session.retry()
 }
+
+async function onLogout() {
+	loggingOut.value = true
+	try {
+		await api.request('/v1/auth/logout', { method: 'POST' })
+	} finally {
+		loggingOut.value = false
+	}
+	session.clear()
+	await router.push('/login')
+}
 </script>
 
 <template>
 	<UDashboardGroup unit="rem">
 		<a href="#dashboard-content" class="sr-only focus:not-sr-only">Skip to content</a>
 
-		<UDashboardSidebar collapsible :resizable="false" :default-size="16" :collapsed-size="4">
+		<UDashboardSidebar
+			v-model:collapsed="sidebarCollapsed"
+			collapsible
+			:resizable="false"
+			:default-size="14"
+			:collapsed-size="3.5"
+			:ui="{
+				root: 'min-w-14 p-3',
+				header: 'mb-3 h-10 gap-2.5 px-1.5',
+				body: 'gap-0.5 p-0',
+				footer: 'p-0',
+			}"
+		>
 			<template #header>
-				<span class="font-semibold">RenewCMS</span>
+				<AppLogo :size="26" />
+				<span
+					v-if="!sidebarCollapsed"
+					aria-hidden="true"
+					class="text-base font-semibold text-highlighted"
+					>RenewCMS</span
+				>
 			</template>
 
-			<UNavigationMenu orientation="vertical" :items="navItems" aria-label="Main" />
+			<UNavigationMenu
+				orientation="vertical"
+				:items="navItems"
+				:collapsed="sidebarCollapsed"
+				aria-label="Main"
+				:ui="{
+					list: 'flex flex-col gap-0.5',
+					link: 'h-8 gap-2.5 px-2.5 py-0 text-sm',
+					linkLeadingIcon: 'size-4',
+				}"
+			/>
 
 			<template #footer>
-				<span>Log out</span>
+				<UserMenu
+					:username="session.session?.username ?? ''"
+					:collapsed="sidebarCollapsed"
+					@logout="onLogout"
+				/>
 			</template>
 		</UDashboardSidebar>
 
-		<UDashboardPanel>
+		<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' }"
+		>
 			<template #header>
-				<UDashboardNavbar :title="pageTitle">
+				<UDashboardNavbar
+					:toggle="{ ui: { leadingIcon: 'size-5' } }"
+					:title="pageTitle"
+					:ui="{
+						root: 'h-14 gap-1 bg-default px-1.5 sm:px-1.5 lg:h-12 lg:gap-2 lg:px-6',
+						left: 'min-w-0 flex-1 gap-1 lg:gap-2',
+						title: 'text-lg lg:sr-only',
+						toggle: 'size-11 justify-center',
+					}"
+				>
 					<template #leading>
-						<UDashboardSidebarCollapse />
+						<UDashboardSidebarCollapse
+							color="neutral"
+							variant="ghost"
+							size="sm"
+							class="-mx-1.5 text-muted"
+							:aria-expanded="!sidebarCollapsed"
+							data-testid="sidebar-collapse"
+						/>
+						<span
+							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' }"
+						/>
 					</template>
 					<template #right>
 						<slot name="navbar-right" />
 					</template>
 				</UDashboardNavbar>
-				<UBreadcrumb :items="[{ label: pageTitle }]" />
 			</template>
 
 			<template #body>
@@ -62,7 +139,6 @@ function onRetry() {
 						@retry="onRetry"
 					/>
 					<div v-else>
-						<h1>{{ pageTitle }}</h1>
 						<slot />
 					</div>
 				</div>