119 lines
2.4 KiB
Vue
119 lines
2.4 KiB
Vue
<template>
|
|
<div class="sidebar-mobile-setup">
|
|
<SideBarMakeName
|
|
:make-name="tenantMake.name"
|
|
:subtitle="tenantMake.subtitle"
|
|
class="setup-make-name"
|
|
/>
|
|
|
|
<LanguageSelector
|
|
:initial-language="initialLanguage"
|
|
:current-language="currentLanguageInternal"
|
|
:supported-language-details="supportedLanguageDetails"
|
|
:allowed-languages="allowedLanguages"
|
|
@language-changed="handleLanguageChange"
|
|
class="setup-language-selector"
|
|
/>
|
|
|
|
<SideBarExplanation
|
|
:original-text="explanationText"
|
|
:current-language="currentLanguageInternal"
|
|
:api-prefix="apiPrefix"
|
|
class="setup-explanation"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch } from 'vue';
|
|
import SideBarMakeName from './SideBarMakeName.vue';
|
|
import LanguageSelector from './LanguageSelector.vue';
|
|
import SideBarExplanation from './SideBarExplanation.vue';
|
|
|
|
const props = defineProps({
|
|
tenantMake: {
|
|
type: Object,
|
|
default: () => ({
|
|
name: '',
|
|
subtitle: ''
|
|
})
|
|
},
|
|
explanationText: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
initialLanguage: {
|
|
type: String,
|
|
default: 'en'
|
|
},
|
|
currentLanguage: {
|
|
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 currentLanguageInternal = ref(props.currentLanguage || props.initialLanguage);
|
|
|
|
watch(
|
|
() => props.currentLanguage,
|
|
(newVal) => {
|
|
if (newVal && newVal !== currentLanguageInternal.value) {
|
|
currentLanguageInternal.value = newVal;
|
|
}
|
|
}
|
|
);
|
|
|
|
const handleLanguageChange = (newLanguage) => {
|
|
currentLanguageInternal.value = newLanguage;
|
|
emit('language-changed', newLanguage);
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.sidebar-mobile-setup {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
padding: 12px 8px 16px 8px;
|
|
gap: 8px;
|
|
}
|
|
|
|
.setup-make-name {
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.setup-language-selector {
|
|
flex-shrink: 0;
|
|
border-radius: 12px;
|
|
background: var(--sidebar-background, rgba(255, 255, 255, 0.02));
|
|
padding: 8px;
|
|
}
|
|
|
|
.setup-explanation {
|
|
flex: 1 1 auto;
|
|
border-radius: 12px;
|
|
padding: 8px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
@media (min-width: 769px) {
|
|
.sidebar-mobile-setup {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|