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>

src/renderer/locales/en.json

@@ -1,7 +1,13 @@
 {
 	"desc": {
 		"welcome-title": "Hello Vutron! Everything is ready.",
-		"welcome-desc": "You can now write cross-platform web applications. See changes in real time and build to multiple platforms with one command. If you're not already familiar with it, you can get help from the documentation page below, or run some pre-written example code."
+		"welcome-desc": "You can now write cross-platform web applications. See changes in real time and build to multiple platforms with one command. If you're not already familiar with it, you can get help from the documentation page below, or run some pre-written example code.",
+		"second-desc": "You have moved to the second screen! There is nothing here!"
+	},
+	"title": {
+		"main": "Main Screen",
+		"second": "Second Screen",
+		"error": "Unknown Error"
 	},
 	"menu": {
 		"change-theme": "Change Theme",

src/renderer/locales/ko.json

@@ -1,7 +1,13 @@
 {
 	"desc": {
 		"welcome-title": "안녕 Vutron! 모든 준비를 마쳤습니다.",
-		"welcome-desc": "이제 크로스플랫폼 웹 애플리케이션을 작성할 수 있습니다. 변경사항을 실시간으로 확인하고 한 번의 명령으로 여러 플랫폼으로 빌드하세요. 아직 익숙하지 않다면, 아래 문서 페이지에서 도움을 받아보거나 사전에 작성된 예제 코드를 실행해볼 수 있습니다."
+		"welcome-desc": "이제 크로스플랫폼 웹 애플리케이션을 작성할 수 있습니다. 변경사항을 실시간으로 확인하고 한 번의 명령으로 여러 플랫폼으로 빌드하세요. 아직 익숙하지 않다면, 아래 문서 페이지에서 도움을 받아보거나 사전에 작성된 예제 코드를 실행해볼 수 있습니다.",
+		"second-desc": "두번째 화면으로 이동하였습니다! 여기는 아무 것도 없습니다!"
+	},
+	"title": {
+		"main": "메인 화면",
+		"second": "두번째 화면",
+		"error": "에러 발생"
 	},
 	"menu": {
 		"change-theme": "테마 변경",

src/renderer/router/index.ts

@@ -1,5 +1,9 @@
 import { createRouter, createWebHashHistory } from 'vue-router/dist/vue-router.esm-bundler'
-import { MainScreen, ErrorScreen } from '@/renderer/screens'
+import { MainScreen, ErrorScreen, SecondScreen } from '@/renderer/screens'
+
+import i18n from '../plugins/i18n'
+
+const { t } = i18n.global
 
 export default createRouter({
 	history: createWebHashHistory(),
@@ -8,14 +12,21 @@ export default createRouter({
 			path: '/',
 			component: MainScreen,
 			meta: {
-				title: 'Main'
+				title: t('title.main')
+			}
+		},
+		{
+			path: '/second',
+			component: SecondScreen,
+			meta: {
+				title: t('title.second')
 			}
 		},
 		{
 			path: '/error',
 			component: ErrorScreen,
 			meta: {
-				title: 'Unknown error occurred'
+				title: t('title.error')
 			}
 		},
 		{

src/renderer/screens/MainScreen.vue

@@ -38,10 +38,15 @@ const handleCountIncrease = (): void => {
 <template>
 	<v-container>
 		<v-row no-gutters align="center" class="text-center">
-			<v-col cols="5">
+			<v-col cols="12" md="5">
-				<img alt="logo" class="ma-auto h-auto w-75" src="/images/vutron-logo.webp" />
+				<img
+					alt="logo"
+					draggable="false"
+					class="ma-auto h-auto w-75"
+					src="/images/vutron-logo.webp"
+				/>
 			</v-col>
-			<v-col cols="7">
+			<v-col cols="12" md="7">
 				<h2 class="my-4">{{ $t('desc.welcome-title') }}</h2>
 				<p>{{ $t('desc.welcome-desc') }}</p>
 				<v-row class="my-4">

src/renderer/screens/SecondScreen.vue

@@ -0,0 +1,12 @@
+<script setup lang="tsx"></script>
+
+<template>
+	<v-container>
+		<v-row no-gutters align="center" class="text-center">
+			<v-col cols="12">
+				<v-icon icon="mdi-emoticon-cool-outline" size="250" color="#009f57" />
+			</v-col>
+			<v-col cols="12" class="my-4">{{ $t('desc.second-desc') }}</v-col>
+		</v-row>
+	</v-container>
+</template>

src/renderer/screens/index.ts

@@ -1,4 +1,5 @@
 import ErrorScreen from '@/renderer/screens/ErrorScreen.vue'
 import MainScreen from '@/renderer/screens/MainScreen.vue'
+import SecondScreen from '@/renderer/screens/SecondScreen.vue'
 
-export { ErrorScreen, MainScreen }
+export { ErrorScreen, MainScreen, SecondScreen }