renderer: add route to second screen example

src/renderer/components/layout/HeaderLayout.vue

@@ -1,5 +1,45 @@
+<script setup lang="tsx">
+import { useRoute, useRouter } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+
+const handleRoute = (path: string): void => {
+	router.push(path)
+}
+
+const isCurrentRoute = (path: string): boolean => {
+	return path === route.path
+}
+</script>
 <template>
 	<v-app-bar color="primary" density="compact">
 		<v-app-bar-title>{{ $route.meta.title }}</v-app-bar-title>
+		<template #append>
+			<v-btn
+				prepend-icon="mdi-home"
+				variant="text"
+				:class="{ active: isCurrentRoute('/') }"
+				@click="handleRoute('/')"
+			>
+				{{ $t('title.main') }}
+			</v-btn>
+			<v-btn
+				prepend-icon="mdi-fit-to-screen-outline"
+				variant="text"
+				:class="{ active: isCurrentRoute('/second') }"
+				@click="handleRoute('/second')"
+			>
+				{{ $t('title.second') }}
+			</v-btn>
+		</template>
 	</v-app-bar>
 </template>
+<style scoped>
+.v-btn {
+	opacity: 0.4;
+}
+.active {
+	opacity: 1 !important;
+}
+</style>