116 lines
4 KiB
Vue
116 lines
4 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file AppHeader.vue
|
|
* @description The main header for the EduLearn application dashboard.
|
|
*/
|
|
|
|
const props = defineProps<{
|
|
/** Controls visibility of the sidebar toggle button */
|
|
showSidebarToggle?: boolean;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
/** Emitted when the hamburger menu is clicked */
|
|
toggleSidebar: [];
|
|
}>();
|
|
|
|
const { currentUser } = useAuth();
|
|
const { locale, setLocale } = useI18n();
|
|
const { isDark, set: setTheme } = useThemeMode();
|
|
|
|
const toggleLanguage = () => {
|
|
setLocale(locale.value === 'th' ? 'en' : 'th');
|
|
};
|
|
|
|
const toggleTheme = () => {
|
|
setTheme(!isDark.value);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<q-toolbar class="bg-white dark:!bg-[#020617] text-slate-900 dark:!text-white h-20 border-b border-slate-50 dark:border-slate-800/50 px-6">
|
|
|
|
<!-- Left: Hamburger Toggle -->
|
|
<q-btn
|
|
flat
|
|
round
|
|
dense
|
|
icon="menu"
|
|
class="text-slate-400 hover:text-blue-600 transition-colors"
|
|
size="16px"
|
|
@click="$emit('toggleSidebar')"
|
|
/>
|
|
|
|
<q-space />
|
|
|
|
<!-- Right Section -->
|
|
<div class="flex items-center gap-2 sm:gap-4 md:gap-6 no-wrap">
|
|
|
|
<!-- Theme Toggle -->
|
|
<q-btn
|
|
flat
|
|
round
|
|
dense
|
|
:icon="isDark ? 'dark_mode' : 'light_mode'"
|
|
:class="isDark ? 'text-blue-400' : 'text-amber-500'"
|
|
class="transition-all active:scale-90"
|
|
size="12px"
|
|
@click="toggleTheme"
|
|
>
|
|
<q-tooltip>{{ isDark ? 'โหมดกลางคืน' : 'โหมดกลางวัน' }}</q-tooltip>
|
|
</q-btn>
|
|
|
|
<!-- Language Switcher (Pill Style) -->
|
|
<div
|
|
@click="toggleLanguage"
|
|
class="flex items-center bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-800 rounded-xl p-0.5 sm:p-1 cursor-pointer hover:bg-slate-100 transition-all font-bold text-[11px] sm:text-[13px] select-none"
|
|
>
|
|
<div :class="locale === 'th' ? 'bg-white dark:bg-slate-700 shadow-sm text-blue-600' : 'text-slate-400'" class="px-2 sm:px-3 py-1 rounded-lg transition-all">TH</div>
|
|
<div class="w-[1px] h-3 bg-slate-200 dark:bg-slate-700 mx-0.5"></div>
|
|
<div :class="locale === 'en' ? 'bg-white dark:bg-slate-700 shadow-sm text-blue-600' : 'text-slate-400'" class="px-2 sm:px-3 py-1 rounded-lg transition-all">EN</div>
|
|
</div>
|
|
|
|
<!-- Divider -->
|
|
<div class="hidden sm:block w-[1px] h-8 bg-slate-100 dark:bg-slate-800"></div>
|
|
|
|
<!-- ส่วนข้อมูลผู้ใช้งาน (User Profile) -->
|
|
<div class="flex items-center gap-3 cursor-pointer group" @click="navigateTo('/dashboard/profile')">
|
|
<!-- ชื่อและบทบาท (แสดงเฉพาะบนจอที่ใหญ่กว่า 600px) -->
|
|
<div class="user-info-text flex flex-col items-end text-right">
|
|
<span class="text-[15px] font-bold text-slate-900 dark:text-white leading-tight">
|
|
{{ currentUser?.firstName || 'User' }} {{ currentUser?.lastName || '' }}
|
|
</span>
|
|
<span class="text-[11px] text-slate-500 font-medium">{{ $t('common.student') }}</span>
|
|
</div>
|
|
|
|
<!-- รูปโปรไฟล์พร้อมวงแหวน Gradient นุ่มนวล -->
|
|
<div class="relative p-[3px] rounded-full bg-gradient-to-tr from-[#FFD1D1] via-[#E2E8FF] to-[#D1F7FF] dark:from-slate-800 dark:to-slate-700 transition-transform group-hover:scale-105">
|
|
<div class="bg-white dark:bg-[#020617] p-[1.5px] rounded-full shadow-sm">
|
|
<UserAvatar
|
|
:photoURL="currentUser?.photoURL"
|
|
:firstName="currentUser?.firstName"
|
|
:lastName="currentUser?.lastName"
|
|
size="40"
|
|
class="w-[40px] h-[40px]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</q-toolbar>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Ensure toolbar height is consistent */
|
|
:deep(.q-toolbar) {
|
|
min-height: 80px;
|
|
}
|
|
|
|
/* Hide user name only on small mobile screens */
|
|
@media (max-width: 600px) {
|
|
.user-info-text {
|
|
display: none !important;
|
|
}
|
|
}
|
|
</style>
|