<template>
  <nav class="navbar">
    <router-link to="/" class="nav-link" active-class="active" exact-active-class="active">首页</router-link>
    <router-link to="/about" class="nav-link" active-class="active" exact-active-class="active">关于</router-link>
    <router-link v-if="!isLoggedIn" to="/login" class="nav-link" active-class="active">登录</router-link>
    <button v-else type="button" class="nav-button" @click="logout">退出</button>
  </nav>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useAuth } from '../stores/useAuth';

const auth = useAuth();
const isLoggedIn = computed(() => auth.isLoggedIn.value);

const logout = () => {
  auth.logout();
};
</script>

<style scoped>
/* .navbar {
  display: flex;
  gap: 16px;
  border-bottom: 1px solid #dfe6ec;
  padding-bottom: 12px;
}
.nav-link,
.nav-button {
  color: #333;
  text-decoration: none;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-button:hover,
.nav-link:hover {
  color: #409eff;
}
.active {
  color: #409eff;
} */
</style>
