feat: implement e-learning classroom page with video player, lesson navigation, progress tracking, and announcements.

Frontend-Learner/components/classroom/VideoPlayer.vue

@@ -124,18 +124,33 @@ const stopYTTracking = () => {
     if (ytInterval) clearInterval(ytInterval);
 };
 
+const destroyYoutubePlayer = () => {
+    stopYTTracking();
+    if (ytPlayer) {
+        try {
+            if (ytPlayer.destroy) ytPlayer.destroy();
+        } catch (e) {
+            console.warn('Error destroying YT player:', e);
+        }
+        ytPlayer = null;
+    }
+};
+
 onMounted(() => {
     if (isYoutube.value) initYoutubeAPI();
 });
 
 onUnmounted(() => {
-    stopYTTracking();
+    destroyYoutubePlayer();
 });
 
 // Watch for src change to re-init
-watch(() => props.src, () => {
-    if (isYoutube.value) {
-        setTimeout(initYoutubeAPI, 500);
+watch(() => props.src, (newSrc, oldSrc) => {
+    if (newSrc !== oldSrc) {
+        destroyYoutubePlayer();
+        if (isYoutube.value) {
+            setTimeout(initYoutubeAPI, 300);
+        }
     }
 });
 

Frontend-Learner/components/layout/AppSidebar.vue

@@ -39,6 +39,12 @@ const navItems = computed(() => [
     isSvg: false
   },
 ]);
+
+const handleNavigate = (path: string) => {
+  if (import.meta.client) {
+    window.location.href = path
+  }
+}
 </script>
 
 <template>
@@ -51,10 +57,11 @@ const navItems = computed(() => [
       <q-item 
         v-for="item in navItems" 
         :key="item.to" 
-        :to="item.to"
         clickable 
         v-ripple
+        @click="handleNavigate(item.to)"
         class="rounded-r-full mr-2 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-white/5"
+        :class="{ 'q-router-link--active': $route.path === item.to || ($route.path === '/dashboard' && item.to === '/dashboard') }"
       >
         <q-item-section avatar>
           <q-icon :name="item.icon" />

Frontend-Learner/components/layout/MobileNav.vue

@@ -4,6 +4,11 @@ const navItems = [
   { to: '/browse/discovery', icon: 'explore', label: 'รายการคอร์ส' },
   { to: '/dashboard/my-courses', icon: 'school', label: 'คอร์สของฉัน' }
 ]
+const handleNavigate = (path: string) => {
+  if (import.meta.client) {
+    window.location.href = path
+  }
+}
 </script>
 
 <template>
@@ -14,14 +19,15 @@ const navItems = [
     align="justify"
     dense
   >
-    <q-route-tab
+    <q-tab
       v-for="item in navItems"
       :key="item.to"
-      :to="item.to"
+      @click="handleNavigate(item.to)"
       :icon="item.icon"
       :label="item.label"
       no-caps
       class="py-2"
+      :class="{ 'q-tab--active text-primary': $route.path === item.to }"
     />
   </q-tabs>
 </template>