feat: home screen and navigation design

web/src/components/NewArticleModal.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const open = defineModel<boolean>('open', { default: false })
+
+const title = ref('')
+const body = ref('')
+
+function onCancel() {
+	open.value = false
+}
+</script>
+
+<template>
+	<UModal v-model:open="open" title="New article">
+		<template #body>
+			<UForm :state="{ title, body }" class="space-y-4">
+				<UFormField label="Title" name="title">
+					<UInput v-model="title" placeholder="Article title" class="w-full" />
+				</UFormField>
+				<UFormField label="Body" name="body">
+					<UTextarea v-model="body" placeholder="Start writing…" class="w-full" />
+				</UFormField>
+			</UForm>
+		</template>
+		<template #footer>
+			<div class="flex w-full justify-end gap-2">
+				<UButton color="neutral" variant="outline" @click="onCancel">Cancel</UButton>
+				<UButton disabled>Create article</UButton>
+			</div>
+		</template>
+	</UModal>
+</template>