feat: Add default layout and AppSidebar component for authenticated users.

Frontend-Learner/components/layout/AppSidebar.vue

@@ -14,12 +14,6 @@ const navItems = computed(() => [
     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'),
@@ -27,17 +21,11 @@ const navItems = computed(() => [
     isSvg: false
   },
   {
-    to: "/dashboard/announcements",
+    to: "/dashboard/my-courses",
-    label: t('sidebar.announcements'),
+    label: t('sidebar.myCourses'),
-    icon: "campaign",
+    icon: "school",
     isSvg: false
-  },
+  }
-  {
-    to: "/dashboard/profile",
-    label: t('sidebar.profile'),
-    icon: "person",
-    isSvg: false
-  },
 ]);
 
 const handleNavigate = (path: string) => {
@@ -50,19 +38,9 @@ const handleNavigate = (path: string) => {
 <template>
   <div class="flex flex-col h-full bg-white dark:bg-[#1e293b] border-r border-slate-200 dark:border-slate-700">
     
-    <!-- Branding / Logo Area -->
+
-    <div class="px-6 py-8 flex items-center gap-3 cursor-pointer group" @click="handleNavigate('/dashboard')">
-      <div class="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center text-white font-black shadow-lg shadow-blue-600/30 group-hover:scale-110 transition-transform">
-        E
-      </div>
-      <div class="flex flex-col">
-        <span class="font-black text-lg leading-none tracking-tight text-slate-900 dark:text-white">E-Learning</span>
-        <span class="text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 text-slate-500">Platform</span>
-      </div>
-    </div>
-    
     <!-- Navigation Items -->
-    <q-list padding class="text-slate-600 dark:text-slate-300 flex-grow px-3">
+    <q-list padding class="text-slate-600 dark:text-slate-300 flex-grow px-3 pt-6">
       <q-item 
         v-for="item in navItems" 
         :key="item.to" 
@@ -82,23 +60,6 @@ const handleNavigate = (path: string) => {
       </q-item>
     </q-list>
 
-    <!-- Sidebar Bottom: Logout & Version -->
-    <div class="p-4 border-t border-slate-100 dark:border-slate-700/50">
-       <q-btn
-          flat
-          rounded
-          class="w-full text-slate-500 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/10 transition-all font-bold"
-          no-caps
-          @click="() => useAuth().logout()"
-        >
-          <q-icon name="logout" size="20px" class="mr-3" />
-          {{ t('auth.logout') }}
-        </q-btn>
-
-        <div class="mt-4 px-4 text-center">
-            <p class="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">Version 0.1.0 (Alpha)</p>
-        </div>
-    </div>
   </div>
 </template>
 

Frontend-Learner/layouts/default.vue

@@ -7,18 +7,34 @@
 
 // Initialize global theme management
 useThemeMode()
+
+const leftDrawerOpen = ref(false)
+const toggleLeftDrawer = () => {
+  leftDrawerOpen.value = !leftDrawerOpen.value
+}
 </script>
 
 <template>
-  <q-layout view="hHh lpr lFf" class="!bg-slate-50 dark:!bg-[#0f172a] !text-slate-900 dark:!text-white font-sans">
+  <q-layout view="hHh LpR lFf" class="!bg-slate-50 dark:!bg-[#0f172a] !text-slate-900 dark:!text-white font-sans">
     <!-- Header -->
     <q-header
       bordered
       class="!bg-white/80 dark:!bg-[#1e293b]/80 backdrop-blur-md !text-slate-900 dark:!text-white border-b border-slate-200 dark:border-slate-700"
     >
-      <AppHeader />
+      <AppHeader @toggleSidebar="toggleLeftDrawer" />
     </q-header>
 
+    <!-- Sidebar (Drawer) -->
+    <q-drawer
+      v-model="leftDrawerOpen"
+      show-if-above
+      bordered
+      :width="260"
+      class="!bg-white dark:!bg-[#1e293b] border-r border-slate-200 dark:border-slate-700"
+    >
+      <AppSidebar />
+    </q-drawer>
+
     <!-- Main Content -->
     <q-page-container>
       <q-page class="relative">