<template>
  <main class="app">
    <nav class="nav">
      <router-link to="/" class="nav-link">Home</router-link>
      <router-link to="/players" class="nav-link" :class="{ active: route.path === '/players' }">
        Page 1: Players</router-link>
      <router-link to="/start" class="nav-link" :class="{ active: route.path === '/start' }">
        Page 2: Start</router-link>
      <router-link to="/text" class="nav-link" :class="{ active: route.path === '/text' }">
        Page 3: Text</router-link>
    </nav>
    <section class="page-content">
      <Players v-if="route.path === '/players'" />
      <Start v-else-if="route.path === '/start'" />
      <Text v-else-if="route.path === '/text'" />
    </section>
  </main>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import Players from './Players.vue'
import Start from './Start.vue'
import Text from './Text.vue'

const route = useRoute()
</script>
