82 lines
2 KiB
Vue
82 lines
2 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-transparent text-slate-800 dark:text-white h-16 px-4">
|
||
|
|
<!-- Mobile Menu Toggle -->
|
||
|
|
<q-btn
|
||
|
|
flat
|
||
|
|
round
|
||
|
|
dense
|
||
|
|
icon="menu"
|
||
|
|
@click="emit('toggleSidebar')"
|
||
|
|
class="md:hidden mr-2 text-slate-700 dark:text-white"
|
||
|
|
aria-label="Menu"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<!-- Branding -->
|
||
|
|
<div class="flex items-center gap-2 cursor-pointer" @click="navigateTo('/dashboard')">
|
||
|
|
<div class="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center text-white font-bold">
|
||
|
|
E
|
||
|
|
</div>
|
||
|
|
<span class="font-bold text-xl text-blue-600 dark:text-blue-400 hidden xs:block">e-Learning</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<q-space />
|
||
|
|
|
||
|
|
<!-- Center Search (Optional) -->
|
||
|
|
<div v-if="showSearch !== false" class="hidden md:block w-1/3 max-w-md mx-4">
|
||
|
|
<q-input
|
||
|
|
dense
|
||
|
|
outlined
|
||
|
|
rounded
|
||
|
|
v-model="searchText"
|
||
|
|
:placeholder="$t('menu.searchCourses')"
|
||
|
|
class="bg-slate-50 dark:bg-slate-700/50 search-input"
|
||
|
|
bg-color="transparent"
|
||
|
|
>
|
||
|
|
<template v-slot:prepend>
|
||
|
|
<q-icon name="search" class="text-slate-400" />
|
||
|
|
</template>
|
||
|
|
</q-input>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<q-space />
|
||
|
|
|
||
|
|
<!-- Right Actions -->
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<!-- Language Switcher -->
|
||
|
|
<LanguageSwitcher />
|
||
|
|
|
||
|
|
<!-- User Profile Dropdown -->
|
||
|
|
<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>
|