90 lines
3 KiB
Vue
90 lines
3 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file AppHeader.vue
|
|
* @description The main header for the authenticated application dashboard.
|
|
* Uses Quasar QToolbar.
|
|
*/
|
|
|
|
defineProps<{
|
|
/** Controls visibility of the search bar */
|
|
showSearch?: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
/** Emitted when the hamburger menu is clicked */
|
|
toggleSidebar: []
|
|
}>()
|
|
|
|
const searchText = ref('')
|
|
</script>
|
|
|
|
<template>
|
|
<q-toolbar class="bg-white text-slate-900 h-16 px-4 md:px-8">
|
|
<!-- Mobile Menu Toggle -->
|
|
<q-btn
|
|
flat
|
|
round
|
|
dense
|
|
icon="menu"
|
|
class="lg:hidden mr-2 text-gray-500"
|
|
@click="$emit('toggleSidebar')"
|
|
/>
|
|
|
|
<!-- Branding -->
|
|
<div class="flex items-center gap-3 cursor-pointer group" @click="navigateTo('/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 group-hover:text-blue-600 transition-colors">E-Learning</span>
|
|
<span class="text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 text-slate-500">Platform</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Desktop Navigation -->
|
|
<nav class="hidden lg:flex items-center gap-6 text-sm font-medium text-gray-600">
|
|
<div class="cursor-pointer hover:text-purple-600 flex items-center gap-1 transition-colors">
|
|
คอร์สออนไลน์ <q-icon name="keyboard_arrow_down" />
|
|
<q-menu>
|
|
<q-list dense style="min-width: 150px">
|
|
<q-item clickable v-close-popup to="/browse">
|
|
<q-item-section>ทั้งหมด</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</div>
|
|
<div class="cursor-pointer hover:text-purple-600 flex items-center gap-1 transition-colors">
|
|
หลักสูตร Onsite <q-icon name="keyboard_arrow_down" />
|
|
</div>
|
|
<NuxtLink to="/browse/recommended" class="hover:text-purple-600 transition-colors">
|
|
คอร์สแนะนำ
|
|
</NuxtLink>
|
|
<div class="cursor-pointer hover:text-purple-600 transition-colors">บทความ</div>
|
|
<div class="cursor-pointer hover:text-purple-600 transition-colors">สมาชิกรายปี</div>
|
|
<div class="cursor-pointer hover:text-purple-600 transition-colors">สำหรับองค์กร</div>
|
|
</nav>
|
|
|
|
<q-space />
|
|
|
|
<!-- Right Actions -->
|
|
<div class="flex items-center gap-2 sm:gap-4 text-gray-500">
|
|
<!-- Search Icon -->
|
|
|
|
|
|
<!-- Language -->
|
|
<LanguageSwitcher />
|
|
|
|
<!-- User Profile -->
|
|
<UserMenu />
|
|
</div>
|
|
</q-toolbar>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.search-input :deep(.q-field__control) {
|
|
border-radius: 9999px; /* Full rounded */
|
|
}
|
|
.search-input :deep(.q-field__control:before) {
|
|
border-color: #e2e8f0; /* slate-200 */
|
|
}
|
|
</style>
|