Dropdown menu implementation

app/components/ClassContextSelect.css

@@ -0,0 +1,43 @@
+.class-context-select {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+label {
+  color: #64748b;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+select {
+  min-width: 15rem;
+  padding: 0.7rem 0.9rem;
+  background: #f8fafc;
+  border: 1px solid #cbd5e1;
+  border-radius: 0.65rem;
+  color: #1e293b;
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.9rem;
+  font-weight: 700;
+}
+
+select:focus {
+  border-color: #4f46e5;
+  outline: none;
+  box-shadow: 0 0 0 3px rgb(79 70 229 / 12%);
+}
+
+@media (max-width: 800px) {
+  .class-context-select {
+    width: 100%;
+  }
+
+  select {
+    min-width: 0;
+    flex: 1;
+  }
+}

app/components/ClassContextSelect.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { authClient } from '../utils/auth-client'
+
+type ClassOption = {
+  joinToken: string
+  name: string
+}
+
+const route = useRoute()
+const router = useRouter()
+const selectedClassToken = useCookie<string | null>('selected-class-token', {
+  sameSite: 'lax',
+})
+const { data: session } = await authClient.useSession(useFetch)
+
+const { data: classes, status: classesStatus } = await useFetch<ClassOption[]>(
+  '/api/admin/classes',
+  {
+    key: `admin-classes-${session.value?.user?.id ?? 'anonymous'}`,
+    default: () => [],
+  }
+)
+
+function getRouteClassToken() {
+  const classQuery = route.query.class
+  return Array.isArray(classQuery) ? classQuery[0] : classQuery
+}
+
+function getCurrentContext() {
+  if (route.path === '/coach/create-class') {
+    return 'create-class'
+  }
+
+  if (route.path.startsWith('/coach')) {
+    const classToken = getRouteClassToken() || selectedClassToken.value
+    return classToken ? `class:${classToken}` : 'admin'
+  }
+
+  return 'admin'
+}
+
+const selectedContext = ref(getCurrentContext())
+const isRedirecting = ref(false)
+const canAccessUniversalAdmin = computed(() => session.value?.user?.role === 'admin')
+const canManageClasses = computed(
+  () => session.value?.user?.role === 'admin' || session.value?.user?.role === 'coach'
+)
+
+watch(
+  () => [route.path, route.query.class, selectedClassToken.value],
+  () => {
+    selectedContext.value = getCurrentContext()
+  }
+)
+
+watch(
+  [
+    classesStatus,
+    () => classes.value.length,
+    () => route.path,
+    () => route.query.class,
+    () => selectedClassToken.value,
+    canAccessUniversalAdmin,
+    canManageClasses,
+  ],
+  async () => {
+    if (!canManageClasses.value || isRedirecting.value) {
+      return
+    }
+
+    isRedirecting.value = true
+
+    try {
+      if (classesStatus.value !== 'success') {
+        return
+      }
+
+      if (
+        !canAccessUniversalAdmin.value &&
+        classes.value.length === 0 &&
+        route.path !== '/coach/create-class'
+      ) {
+        selectedClassToken.value = null
+        await router.replace('/coach/create-class')
+        return
+      }
+
+      if (route.path.startsWith('/coach') && route.path !== '/coach/create-class') {
+        const classToken = getRouteClassToken() || selectedClassToken.value
+        const classExists = classes.value.some((classroom) => classroom.joinToken === classToken)
+
+        if (!classToken || !classExists) {
+          selectedClassToken.value = null
+
+          if (canAccessUniversalAdmin.value) {
+            await router.replace('/admin')
+            return
+          }
+
+          const firstClass = classes.value[0]
+
+          if (firstClass) {
+            selectedClassToken.value = firstClass.joinToken
+            await router.replace({
+              path: '/coach',
+              query: { class: firstClass.joinToken },
+            })
+          }
+        }
+      }
+    } finally {
+      isRedirecting.value = false
+    }
+  },
+  { immediate: true }
+)
+
+async function changeContext() {
+  if (selectedContext.value === 'admin') {
+    if (!canAccessUniversalAdmin.value) {
+      selectedContext.value = getCurrentContext()
+      return
+    }
+
+    selectedClassToken.value = null
+    await router.push('/admin')
+    return
+  }
+
+  if (selectedContext.value === 'create-class') {
+    await router.push('/coach/create-class')
+    return
+  }
+
+  const classToken = selectedContext.value.replace(/^class:/, '')
+  selectedClassToken.value = classToken
+  await router.push({
+    path: '/coach',
+    query: { class: classToken },
+  })
+}
+</script>
+
+<template>
+  <div class="class-context-select">
+    <label for="class-context">Managing</label>
+
+    <select id="class-context" v-model="selectedContext" @change="changeContext">
+      <option v-if="canAccessUniversalAdmin" value="admin">Admin</option>
+
+      <option v-if="classesStatus === 'pending'" disabled>Loading classes…</option>
+
+      <option v-for="classroom in classes" :key="classroom.joinToken" :value="`class:${classroom.joinToken}`">
+        {{ classroom.name }}
+      </option>
+
+      <option value="create-class">+ Create New Class</option>
+    </select>
+  </div>
+</template>
+
+<style scoped src="./ClassContextSelect.css"></style>

app/components/LogoutButton.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { authClient } from '~/utils/auth-client'
+
+const isLoggingOut = ref(false)
+
+async function logout() {
+  const confirmed = confirm('Are you sure you want to log out?')
+  if (!confirmed || isLoggingOut.value) return
+
+  isLoggingOut.value = true
+
+  try {
+    await authClient.signOut()
+    window.location.href = '/'
+  } catch (error) {
+    isLoggingOut.value = false
+    console.error('Logout failed:', error)
+  }
+}
+</script>
+
+<template>
+  <button type="button" :disabled="isLoggingOut" @click="logout">
+    <slot>⎋ Logout</slot>
+  </button>
+</template>

app/layouts/admin.vue

@@ -1,23 +1,6 @@
 <script setup lang="ts">
 import './admin.css'
 
-const router = useRouter()
-
-const contexts = [
-  {
-    label: 'Admin',
-    value: 'admin',
-    route: '/admin',
-  },
-  {
-    label: '+ Create New Class',
-    value: 'create-class',
-    route: '/coach/create-class',
-  },
-]
-
-const selectedContext = ref('admin')
-
 const navigation = [
   {
     label: 'Dashboard',
@@ -33,27 +16,13 @@ const navigation = [
   },
 ]
 
-async function changeContext() {
-  const selected = contexts.find(
-    context => context.value === selectedContext.value,
-  )
-
-  if (!selected) {
-    return
-  }
-
-  await router.push(selected.route)
-}
 </script>
 
 <template>
   <div class="portal-layout">
     <aside class="portal-sidebar">
       <div class="portal-sidebar-content">
-        <NuxtLink
-          to="/admin"
-          class="portal-logo"
-        >
+        <NuxtLink to="/admin" class="portal-logo">
           <div class="portal-logo-icon">
             L
           </div>
@@ -87,12 +56,7 @@ async function changeContext() {
       </div>
 
       <div class="portal-sidebar-footer">
-        <NuxtLink
-          to="/auth"
-          class="portal-logout"
-        >
-          ← Log out
-        </NuxtLink>
+        <LogoutButton class="portal-logout">← Log out</LogoutButton>
       </div>
     </aside>
 
@@ -108,25 +72,7 @@ async function changeContext() {
           </h1>
         </div>
 
-        <div class="portal-context">
-          <label for="portal-context">
-            Managing
-          </label>
-
-          <select
-            id="portal-context"
-            v-model="selectedContext"
-            @change="changeContext"
-          >
-            <option
-              v-for="context in contexts"
-              :key="context.value"
-              :value="context.value"
-            >
-              {{ context.label }}
-            </option>
-          </select>
-        </div>
+        <ClassContextSelect />
       </header>
 
       <main class="portal-main">

app/layouts/coach.css

@@ -50,9 +50,20 @@ html, body { margin: 0; padding: 0; height: 100%; }
 .rh-logout-link:hover { color:#ef4444; }
 
 /* ── Main ── */
-.rh-main { flex:1; overflow-y:auto; padding:24px 32px; }
+.rh-workspace { min-width:0; flex:1; display:flex; flex-direction:column; overflow:hidden; }
+.rh-header { min-height:5.5rem; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1rem 2rem; background:#f8fafc; border-bottom:1px solid #dbe3ec; }
+.rh-header-label { margin:0 0 .2rem; color:#94a3b8; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
+.rh-header-title { margin:0; color:#0f172a; font-size:1.35rem; font-weight:600; }
+.rh-main { min-height:0; flex:1; overflow-y:auto; padding:24px 32px; }
 .rh-tab-content { max-width:56rem; margin:0 auto; }
 
+@media (max-width:800px) {
+  .rh-coach-wrap { height:auto; min-height:100vh; flex-direction:column; overflow:visible; }
+  .rh-sidebar { width:100%; }
+  .rh-workspace { overflow:visible; }
+  .rh-header { align-items:flex-start; flex-direction:column; }
+}
+
 /* ── Spacing helpers ── */
 .rh-space-y-3 > * + * { margin-top:12px; }
 .rh-space-y-4 > * + * { margin-top:16px; }
@@ -234,4 +245,4 @@ html, body { margin: 0; padding: 0; height: 100%; }
 
 /* ── Transitions ── */
 .rh-fade-enter-active, .rh-fade-leave-active { transition:opacity .25s ease; }
-.rh-fade-enter-from, .rh-fade-leave-to       { opacity:0; }
+.rh-fade-enter-from, .rh-fade-leave-to       { opacity:0; }