111 lines
2.3 KiB
Vue
111 lines
2.3 KiB
Vue
<!-- SideBar.vue -->
|
|
<template>
|
|
<div class="sidebar">
|
|
<SideBarLogo
|
|
:logo-url="tenantMake.logo_url"
|
|
:make-name="tenantMake.name"
|
|
/>
|
|
|
|
<SideBarMakeName
|
|
:make-name="tenantMake.name"
|
|
:subtitle="tenantMake.subtitle"
|
|
/>
|
|
|
|
<LanguageSelector
|
|
:initial-language="initialLanguage"
|
|
:current-language="currentLanguage"
|
|
:supported-language-details="supportedLanguageDetails"
|
|
:allowed-languages="allowedLanguages"
|
|
@language-changed="handleLanguageChange"
|
|
/>
|
|
|
|
<SideBarExplanation
|
|
:original-text="explanationText"
|
|
:current-language="currentLanguage"
|
|
:api-prefix="apiPrefix"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import SideBarLogo from './SideBarLogo.vue';
|
|
import SideBarMakeName from './SideBarMakeName.vue';
|
|
import LanguageSelector from './LanguageSelector.vue';
|
|
import SideBarExplanation from './SideBarExplanation.vue';
|
|
|
|
const props = defineProps({
|
|
tenantMake: {
|
|
type: Object,
|
|
default: () => ({
|
|
name: '',
|
|
logo_url: '',
|
|
subtitle: ''
|
|
})
|
|
},
|
|
explanationText: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
initialLanguage: {
|
|
type: String,
|
|
default: 'nl'
|
|
},
|
|
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>
|
|
.sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
background: var(--sidebar-background);
|
|
color: var(--sidebar-color);
|
|
width: 300px;
|
|
min-width: 250px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.sidebar {
|
|
width: 100%;
|
|
min-width: unset;
|
|
}
|
|
}
|
|
</style> |