<template>
  <div id="app">
    <nav class="nav">
      <span class="nav-brand">Pagepiper</span>
      <RouterLink to="/" class="nav-link">Library</RouterLink>
      <RouterLink to="/chat" class="nav-link">Chat</RouterLink>
    </nav>
    <RouterView />
  </div>
</template>

<script setup lang="ts">
import { RouterLink, RouterView } from "vue-router"
</script>

<style>
@import "@/theme.css";

.nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.nav-brand { font-weight: 700; color: var(--color-accent); }
.nav-link { color: var(--color-text-muted); text-decoration: none; }
.nav-link:hover, .nav-link.router-link-active { color: var(--color-text); }
</style>
