48 lines
1.4 KiB
Vue
48 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file AppHeader.vue
|
|
* @description The main header for the authenticated application dashboard.
|
|
* Includes sidebar toggle, branding, search functionality, and user menu.
|
|
*/
|
|
|
|
defineProps<{
|
|
/** Controls visibility of the search bar */
|
|
showSearch?: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
/** Emitted when the hamburger menu is clicked */
|
|
toggleSidebar: []
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<header class="app-header transition-colors" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color);">
|
|
<!-- Branding & Toggle -->
|
|
<div class="flex items-center gap-2">
|
|
<NuxtLink to="/dashboard" style="font-weight: 800; color: var(--primary); font-size: 20px;">
|
|
e-Learning
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<!-- Right Actions -->
|
|
<div class="flex items-center gap-4">
|
|
<!-- Search Bar (Optional) -->
|
|
<div v-if="showSearch !== false" class="relative hidden-mobile" style="width: 300px;">
|
|
<input
|
|
type="text"
|
|
class="input-field"
|
|
placeholder="ค้นหาคอร์ส..."
|
|
style="padding-left: 36px;"
|
|
>
|
|
<span style="position: absolute; left: 12px; top: 10px; color: var(--text-secondary);">🔍</span>
|
|
</div>
|
|
|
|
<!-- Language Switcher -->
|
|
<LanguageSwitcher />
|
|
|
|
<!-- User Profile Dropdown -->
|
|
<UserMenu />
|
|
</div>
|
|
</header>
|
|
</template>
|