146 lines
3.1 KiB
Vue
146 lines
3.1 KiB
Vue
<!-- MobileHeader.vue -->
|
|
<template>
|
|
<div class="mobile-header">
|
|
<SideBarLogo
|
|
:logo-url="tenantMake.logo_url"
|
|
:make-name="tenantMake.name"
|
|
class="mobile-logo"
|
|
/>
|
|
|
|
<LanguageSelector
|
|
:initial-language="initialLanguage"
|
|
:current-language="currentLanguage"
|
|
:supported-language-details="supportedLanguageDetails"
|
|
:allowed-languages="allowedLanguages"
|
|
@language-changed="handleLanguageChange"
|
|
class="mobile-language-selector"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import SideBarLogo from './SideBarLogo.vue';
|
|
import LanguageSelector from './LanguageSelector.vue';
|
|
|
|
const props = defineProps({
|
|
tenantMake: {
|
|
type: Object,
|
|
default: () => ({
|
|
name: '',
|
|
logo_url: '',
|
|
subtitle: ''
|
|
})
|
|
},
|
|
initialLanguage: {
|
|
type: String,
|
|
default: 'en'
|
|
},
|
|
supportedLanguageDetails: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
allowedLanguages: {
|
|
type: Array,
|
|
default: () => ['nl', 'en', 'fr', 'de']
|
|
},
|
|
apiPrefix: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['language-changed']);
|
|
|
|
const currentLanguage = ref(props.initialLanguage);
|
|
|
|
const handleLanguageChange = (newLanguage) => {
|
|
currentLanguage.value = newLanguage;
|
|
|
|
// Emit to parent
|
|
emit('language-changed', newLanguage);
|
|
|
|
// Global event for backward compatibility
|
|
const globalEvent = new CustomEvent('language-changed', {
|
|
detail: { language: newLanguage }
|
|
});
|
|
document.dispatchEvent(globalEvent);
|
|
|
|
// Update chatConfig
|
|
if (window.chatConfig) {
|
|
window.chatConfig.language = newLanguage;
|
|
}
|
|
|
|
// Save preference
|
|
localStorage.setItem('preferredLanguage', newLanguage);
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.mobile-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 15px;
|
|
background: var(--sidebar-background);
|
|
color: var(--sidebar-color);
|
|
border-bottom: 1px solid rgba(0,0,0,0.1);
|
|
min-height: 60px;
|
|
}
|
|
|
|
/* Mobile logo styling - compact version */
|
|
.mobile-header :deep(.mobile-logo) {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.mobile-header :deep(.mobile-logo .sidebar-logo) {
|
|
padding: 0;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.mobile-header :deep(.mobile-logo .logo-image) {
|
|
max-height: 40px;
|
|
max-width: 120px;
|
|
}
|
|
|
|
.mobile-header :deep(.mobile-logo .logo-placeholder) {
|
|
width: 40px;
|
|
height: 40px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* Mobile language selector styling - compact horizontal version */
|
|
.mobile-header :deep(.mobile-language-selector) {
|
|
flex-shrink: 0;
|
|
min-width: 140px;
|
|
}
|
|
|
|
.mobile-header :deep(.mobile-language-selector .language-selector) {
|
|
margin: 0;
|
|
}
|
|
|
|
.mobile-header :deep(.mobile-language-selector label) {
|
|
display: none; /* Hide label in mobile header */
|
|
}
|
|
|
|
.mobile-header :deep(.mobile-language-selector .language-select) {
|
|
padding: 6px 10px;
|
|
font-size: 0.85rem;
|
|
min-width: 120px;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Show mobile header on mobile */
|
|
@media (max-width: 768px) {
|
|
.mobile-header {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
/* Hide mobile header on desktop */
|
|
@media (min-width: 769px) {
|
|
.mobile-header {
|
|
display: none;
|
|
}
|
|
}
|
|
</style> |