feat: Implement user profile management, course browsing, and dashboard structure with new components and layouts.

Frontend-Learner/layouts/dashboard-index.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+/**
+ * @file dashboard-index.vue
+ * @description Layout for the Dashboard Index page, without the sidebar.
+ * Uses Quasar QLayout for responsive structure.
+ */
+
+// Initialize global theme management
+useThemeMode()
+
+// No sidebar logic needed here as we are removing it
+</script>
+
+<template>
+  <q-layout view="hHh lpR fFf" class="bg-slate-50 dark:!bg-[#020617] text-slate-900 dark:!text-slate-50">
+    <!-- Header -->
+    <q-header
+      class="bg-white/80 dark:!bg-[#0f172a]/80 backdrop-blur-md text-slate-900 dark:!text-white"
+    >
+      <AppHeader :showSidebarToggle="false" navType="learner" />
+    </q-header>
+
+    <!-- Sidebar Removed for this layout -->
+
+    <!-- Main Content -->
+    <q-page-container>
+      <q-page class="relative">
+        <slot />
+      </q-page>
+    </q-page-container>
+
+    <!-- Mobile Bottom Nav - Optional, keeping it consistent with default but maybe not needed if full width?
+         If we remove sidebar, we might still want mobile nav if it's main navigation.
+         Let's keep it for now as it doesn't hurt. -->
+    <q-footer
+      v-if="$q.screen.lt.md"
+      class="!bg-white dark:!bg-[#1e293b] text-primary"
+    >
+       <MobileNav />
+    </q-footer>
+  </q-layout>
+</template>
+
+<style>
+/* Ensure fonts are applied */
+.font-inter {
+  font-family: var(--font-main);
+}
+</style>

Frontend-Learner/layouts/default.vue

@@ -12,6 +12,13 @@ const leftDrawerOpen = ref(false)
 const toggleLeftDrawer = () => {
   leftDrawerOpen.value = !leftDrawerOpen.value
 }
+
+const route = useRoute()
+// Automatically hide sidebar for learner routes
+const shouldHideSidebar = computed(() => {
+  const silentRoutes = ['/dashboard', '/browse', '/classroom', '/course']
+  return silentRoutes.some(r => route.path.startsWith(r))
+})
 </script>
 
 <template>
@@ -20,11 +27,12 @@ const toggleLeftDrawer = () => {
     <q-header
       class="bg-white/80 dark:!bg-[#0f172a]/80 backdrop-blur-md text-slate-900 dark:!text-white"
     >
-      <AppHeader @toggleSidebar="toggleLeftDrawer" />
+      <AppHeader @toggleSidebar="toggleLeftDrawer" :showSidebarToggle="!shouldHideSidebar" />
     </q-header>
 
     <!-- Sidebar (Drawer) -->
     <q-drawer
+      v-if="!shouldHideSidebar"
       v-model="leftDrawerOpen"
       show-if-above
       :width="280"