elearning/frontend_management/layouts/instructor.vue
2026-01-14 13:58:25 +07:00

56 lines
1.7 KiB
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">Instructor Panel</p>
</div>
<nav class="px-4">
<NuxtLink
to="/instructor"
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="/instructor/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>
</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"
>
<span>🚪</span>
<span>ออกจากระบบ</span>
</button>
</div> -->
</aside>
<!-- Main Content -->
<main class="ml-64 p-8">
<slot />
</main>
</div>
</template>
<script setup lang="ts">
const authStore = useAuthStore();
const router = useRouter();
const handleLogout = () => {
authStore.logout();
router.push('/login');
};
</script>