- Full implementation of tab bar next to logo in mobile client

- Customisation option in Tenant Make - Splitting all controls in the newly created tabs
2025-11-27 11:32:46 +01:00
parent d68dfde52a
commit 14273b8a70
11 changed files with 524 additions and 205 deletions
--- a/eveai_chat_client/static/assets/vue-components/SideBarMobileSetup.vue
+++ b/eveai_chat_client/static/assets/vue-components/SideBarMobileSetup.vue
@@ -0,0 +1,118 @@
+<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>