Improved responsiveness on mobile phone

frontend/src/App.vue

@@ -7,24 +7,29 @@
         <span class="brand-subtitle">Neurosurgeon Learning Platform</span>
       </div>
       <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>
+        <button class="burger" :class="{ open: menuOpen }" @click="menuOpen = !menuOpen" aria-label="Menu">
+          <span></span><span></span><span></span>
+        </button>
+        <div class="nav-drawer" :class="{ open: menuOpen }" @click="menuOpen = false">
+          <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.stop="logout">Sign out</button>
+        </div>
       </template>
     </nav>
 
@@ -38,16 +43,21 @@
 </template>
 
 <script setup lang="ts">
-import { ref, provide } from 'vue'
-import { RouterLink, RouterView, useRouter } from 'vue-router'
+import { ref, provide, watch } from 'vue'
+import { RouterLink, RouterView, useRouter, useRoute } from 'vue-router'
 import { useAuthStore } from '@/stores/authStore'
 
 const authStore = useAuthStore()
 const router = useRouter()
+const route = useRoute()
 
+const menuOpen = ref(false)
 const toastMessage = ref('')
 const toastType = ref<'toast-error' | 'toast-success'>('toast-error')
 
+// Close menu on navigation
+watch(() => route.path, () => { menuOpen.value = false })
+
 function logout() {
   authStore.clearCredentials()
   router.push({ name: 'login' })
@@ -94,6 +104,9 @@ body {
   justify-content: space-between;
   height: 64px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  position: sticky;
+  top: 0;
+  z-index: 100;
 }
 
 .navbar-brand {
@@ -118,6 +131,13 @@ body {
   margin-left: 0.25rem;
 }
 
+/* Desktop: links inline */
+.nav-drawer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .navbar-links {
   list-style: none;
   display: flex;
@@ -143,6 +163,33 @@ body {
   color: white;
 }
 
+/* Burger button — hidden on desktop */
+.burger {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+  width: 36px;
+  height: 36px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 6px;
+}
+
+.burger span {
+  display: block;
+  height: 2px;
+  background: #bee3f8;
+  border-radius: 2px;
+  transition: transform 0.2s, opacity 0.2s;
+}
+
+.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
+.burger.open span:nth-child(2) { opacity: 0; }
+.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
+
 .main-content {
   flex: 1;
   min-height: 0;
@@ -313,4 +360,63 @@ body {
   font-size: 0.9rem;
   margin-top: 0.5rem;
 }
+
+@media (max-width: 768px) {
+  .navbar {
+    padding: 0 1rem;
+  }
+
+  .brand-subtitle {
+    display: none;
+  }
+
+  /* Show burger, hide desktop drawer */
+  .burger {
+    display: flex;
+  }
+
+  .nav-drawer {
+    display: none;
+    position: absolute;
+    top: 64px;
+    right: 0;
+    left: 0;
+    background: #1a365d;
+    flex-direction: column;
+    align-items: stretch;
+    padding: 0.5rem 0 1rem;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 99;
+  }
+
+  .nav-drawer.open {
+    display: flex;
+  }
+
+  .navbar-links {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .navbar-links a {
+    padding: 0.85rem 1.5rem;
+    border-radius: 0;
+    font-size: 1rem;
+  }
+
+  .navbar-links a:hover,
+  .navbar-links a.active {
+    background: #2b6cb0;
+  }
+
+  .btn-logout {
+    margin: 0.5rem 1.5rem 0;
+    width: calc(100% - 3rem);
+    justify-content: center;
+  }
+
+  .main-content {
+    padding: 1rem;
+  }
+}
 </style>