feat: home screen and navigation design

web/src/components/UserMenu.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useColorMode, type ColorModePreference } from '@/composables/useColorMode'
+
+const props = defineProps<{
+	username: string
+	collapsed: boolean
+}>()
+
+const emit = defineEmits<{
+	logout: []
+}>()
+
+const colorMode = useColorMode()
+
+const initials = computed(() => {
+	const parts = props.username.split(/[^a-zA-Z0-9]+/).filter(Boolean)
+	if (parts.length >= 2) {
+		return ((parts[0] ?? '').charAt(0) + (parts[1] ?? '').charAt(0)).toUpperCase()
+	}
+	return (parts[0] ?? '').slice(0, 2).toUpperCase()
+})
+
+const triggerAriaLabel = computed(() =>
+	props.collapsed ? `${props.username} — account menu` : undefined,
+)
+
+const colorModeOptions: { label: string; value: ColorModePreference }[] = [
+	{ label: 'System', value: 'system' },
+	{ label: 'Light', value: 'light' },
+	{ label: 'Dark', value: 'dark' },
+]
+
+const items = computed(() => [
+	[{ type: 'label' as const, label: props.username }],
+	colorModeOptions.map((option) => ({
+		type: 'checkbox' as const,
+		label: option.label,
+		checked: colorMode.preference === option.value,
+		onUpdateChecked: (checked: boolean) => {
+			if (checked) {
+				colorMode.preference = option.value
+			}
+		},
+	})),
+	[
+		{
+			label: 'Log out',
+			onSelect: () => emit('logout'),
+		},
+	],
+])
+</script>
+
+<template>
+	<UDropdownMenu :items="items" :content="{ side: 'top', align: 'start' }">
+		<UButton
+			color="neutral"
+			variant="ghost"
+			block
+			class="h-10 justify-start gap-2.5 px-1.5 font-normal text-highlighted"
+			trailing-icon="i-lucide-chevrons-up-down"
+			:ui="{ trailingIcon: 'ms-auto size-3.5 text-default' }"
+			:aria-label="triggerAriaLabel"
+		>
+			<template #leading>
+				<UAvatar
+					aria-hidden="true"
+					:text="initials"
+					size="sm"
+					:ui="{
+						root: 'size-6.5 bg-secondary-300',
+						fallback: 'text-[0.6875rem] font-semibold text-primary-900',
+					}"
+				/>
+			</template>
+			<span v-if="!collapsed" class="truncate">{{ username }}</span>
+		</UButton>
+	</UDropdownMenu>
+</template>