elearning/frontend_management/layouts/admin.vue

<template>
  <div class="min-h-screen bg-gray-50">
    <!-- Sidebar -->
    <aside class="fixed left-0 top-0 h-screen w-64 bg-white shadow-lg">
      <div class="p-6">
        <h2 class="text-xl font-bold text-primary-600">E-Learning</h2>
        <p class="text-sm text-gray-500">Admin Panel</p>
      </div>
      
      <nav class="px-4">
        <NuxtLink
          to="/admin"
          class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-primary-100 transition mb-2"
          active-class="bg-primary-500 text-white hover:bg-primary-600"
        >
          <q-icon name="dashboard" size="24px" />
          <span>Dashboard</span>
        </NuxtLink>
        
        <!-- <NuxtLink
          to="/admin/courses"
          class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-primary-100 transition mb-2"
          active-class="bg-primary-500 text-white hover:bg-primary-600"
        >
          <q-icon name="school" size="24px" />
          <span>จัดการหลักสูตร</span>
        </NuxtLink> -->

        <NuxtLink
          to="/admin/courses/pending"
          class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-primary-100 transition mb-2"
          active-class="bg-primary-500 text-white hover:bg-primary-600"
        >
          <q-icon name="pending_actions" size="24px" />
          <span>คอร์สรออนุมัติ</span>
        </NuxtLink>

        <NuxtLink
          to="/admin/users"
          class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-primary-100 transition mb-2"
          active-class="bg-primary-500 text-white hover:bg-primary-600"
        >
          <q-icon name="people" size="24px" />
          <span>จัดการผู้ใช้</span>
        </NuxtLink>

        <NuxtLink
          to="/admin/categories"
          class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-primary-100 transition mb-2"
          active-class="bg-primary-500 text-white hover:bg-primary-600"
        >
          <q-icon name="folder" size="24px" />
          <span>หมวดหมู่</span>
        </NuxtLink>

        <NuxtLink
          to="/admin/recommended-courses"
          class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-primary-100 transition mb-2"
          active-class="bg-primary-500 text-white hover:bg-primary-600"
        >
          <q-icon name="recommend" size="24px" />
          <span>คอร์สแนะนำ</span>
        </NuxtLink>

        <NuxtLink
          to="/admin/audit-log"
          class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-primary-100 transition mb-2"
          active-class="bg-primary-500 text-white hover:bg-primary-600"
        >
          <q-icon name="settings" size="24px" />
          <span>Audit logs</span>
        </NuxtLink>
      </nav>
      
      <div class="absolute bottom-0 left-0 right-0 p-4 border-t">
        <button
          @click="handleLogout"
          class="w-full flex items-center gap-3 px-4 py-3 text-red-600 hover:bg-red-50 rounded-lg transition"
        >
          <q-icon name="logout" size="24px" />
          <span>ออกจากระบบ</span>
        </button>
      </div>
    </aside>

    <!-- Main Content -->
    <main class="ml-64 p-8">
      <slot />
    </main>
  </div>
</template>

<script setup lang="ts">
import { useQuasar } from 'quasar';

const $q = useQuasar();
const authStore = useAuthStore();
const router = useRouter();

const handleLogout = () => {
  $q.dialog({
    title: 'ยืนยันออกจากระบบ',
    message: 'คุณต้องการออกจากระบบหรือไม่?',
    persistent: true,
    ok: {
      label: 'ออกจากระบบ',
      color: 'negative',
      flat: false
    },
    cancel: {
      label: 'ยกเลิก',
      flat: true
    }
  }).onOk(() => {
    authStore.logout();
    router.push('/login');
  });
};
</script>