Add simple auth

frontend/src/App.vue

@@ -6,23 +6,26 @@
         <span class="brand-name">AI Teacher</span>
         <span class="brand-subtitle">Neurosurgeon Learning Platform</span>
       </div>
-      <ul class="navbar-links">
-        <li>
-          <RouterLink to="/" :class="{ active: $route.path === '/' }">
-            <span class="nav-icon">📚</span> Library
-          </RouterLink>
-        </li>
-        <li>
-          <RouterLink to="/topics" :class="{ active: $route.path === '/topics' }">
-            <span class="nav-icon">🗂</span> Topics
-          </RouterLink>
-        </li>
-        <li>
-          <RouterLink to="/chat" :class="{ active: $route.path === '/chat' }">
-            <span class="nav-icon">💬</span> Chat
-          </RouterLink>
-        </li>
-      </ul>
+      <template v-if="authStore.isAuthenticated">
+        <ul class="navbar-links">
+          <li>
+            <RouterLink to="/" :class="{ active: $route.path === '/' }">
+              <span class="nav-icon">📚</span> Library
+            </RouterLink>
+          </li>
+          <li>
+            <RouterLink to="/topics" :class="{ active: $route.path === '/topics' }">
+              <span class="nav-icon">🗂</span> Topics
+            </RouterLink>
+          </li>
+          <li>
+            <RouterLink to="/chat" :class="{ active: $route.path === '/chat' }">
+              <span class="nav-icon">💬</span> Chat
+            </RouterLink>
+          </li>
+        </ul>
+        <button class="btn btn-logout" @click="logout">Sign out</button>
+      </template>
     </nav>
 
     <main class="main-content">
@@ -36,11 +39,20 @@
 
 <script setup lang="ts">
 import { ref, provide } from 'vue'
-import { RouterLink, RouterView } from 'vue-router'
+import { RouterLink, RouterView, useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/authStore'
+
+const authStore = useAuthStore()
+const router = useRouter()
 
 const toastMessage = ref('')
 const toastType = ref<'toast-error' | 'toast-success'>('toast-error')
 
+function logout() {
+  authStore.clearCredentials()
+  router.push({ name: 'login' })
+}
+
 function showToast(message: string, type: 'error' | 'success' = 'error') {
   toastMessage.value = message
   toastType.value = type === 'error' ? 'toast-error' : 'toast-success'
@@ -227,6 +239,20 @@ body {
   background: #cbd5e0;
 }
 
+.btn-logout {
+  background: transparent;
+  color: #bee3f8;
+  border: 1px solid #4a90b8;
+  font-size: 0.85rem;
+  padding: 0.4rem 0.9rem;
+  margin-left: 1rem;
+}
+
+.btn-logout:hover {
+  background: #2b6cb0;
+  color: white;
+}
+
 .spinner {
   display: inline-block;
   width: 20px;