feat: Add foundational UI components, pages, and theme management for the e-learning application.

Frontend-Learner/components/layout/AppSidebar.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+/**
+ * @file AppSidebar.vue
+ * @description Sidebar navigation for the authenticated dashboard.
+ * Uses Quasar QList for structure.
+ */
+
+const { t } = useI18n()
+
+const navItems = computed(() => [
+  {
+    to: "/dashboard",
+    label: t('sidebar.overview'),
+    icon: "dashboard", // Using Material Icons names where possible or SVG paths
+    isSvg: false
+  },
+  {
+    to: "/dashboard/my-courses",
+    label: t('sidebar.myCourses'),
+    icon: "school",
+    isSvg: false
+  },
+  {
+    to: "/browse/discovery",
+    label: t('sidebar.browseCourses'),
+    icon: "explore",
+    isSvg: false
+  },
+  {
+    to: "/dashboard/announcements",
+    label: t('sidebar.announcements'),
+    icon: "campaign",
+    isSvg: false
+  },
+  {
+    to: "/dashboard/profile",
+    label: t('sidebar.profile'),
+    icon: "person",
+    isSvg: false
+  },
+]);
+</script>
+
+<template>
+  <div class="flex flex-col h-full bg-transparent">
+    <!-- Branding Area (Optional if not in Header) -->
+    
+    <q-list padding class="text-slate-600 dark:text-slate-300 flex-grow">
+
+      
+      <q-item 
+        v-for="item in navItems" 
+        :key="item.to" 
+        :to="item.to"
+        clickable 
+        v-ripple
+        class="rounded-r-full mr-2 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-white/5"
+      >
+        <q-item-section avatar>
+          <q-icon :name="item.icon" />
+        </q-item-section>
+        
+        <q-item-section>
+          <q-item-label>{{ item.label }}</q-item-label>
+        </q-item-section>
+      </q-item>
+    </q-list>
+
+    <!-- Footer / Version -->
+    <div class="mt-auto p-4 text-xs text-center opacity-50 pb-8">
+      <p>e-Learning v0.1.0</p>
+      <p>&copy; 2026</p>
+    </div>
+  </div>
+</template>
+
+<style>
+/* Light Mode Active State */
+.q-item.q-router-link--active {
+  background: rgb(239 246 255); /* blue-50 */
+  color: rgb(29 78 216);       /* blue-700 */
+  font-weight: 700;
+}
+
+/* Dark Mode Active State */
+.dark .q-item.q-router-link--active {
+  background: rgba(255, 255, 255, 0.1);
+  color: rgb(147 197 253);     /* blue-300 */
+}
+</style>