Docs Locale Selection on Mobile

Type-32 · Feb 27, 2024 · 8a4cfd2 · 8a4cfd2
1 parent daed774
commit 8a4cfd2
Showing 1 changed file with 16 additions and 9 deletions.
diff --git a/layouts/DocumentationLayout.vue b/layouts/DocumentationLayout.vue
@@ -28,15 +28,22 @@ onBeforeMount(() => {
                     <input class="input input-ghost w-1/2" :placeholder="$t('docs.nav.search_docs_placeholder')"/>
                 </div>
                 <div class="flex-none laptop:hidden flex flex-row">
-                    <label for="docs-layout-drawer" aria-label="open sidebar" class="btn btn-square btn-ghost">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-6 h-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
-                    </label>
-                    <a class="btn btn-ghost" href="/">
-                        <div class="object-contain size-8 rounded-3xl flex items-center">
-                            <img src="~/assets/moodhelper_icon.png" alt="MoodHelper Icon" class="rounded-3xl object-contain w-full h-full"/>
-                        </div>
-                        <h1 class="text-2xl font-bold">MoodHelper</h1>
-                    </a>
+                    <div class="flex flex-row">
+                        <label for="docs-layout-drawer" aria-label="open sidebar" class="btn btn-square btn-ghost">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-6 h-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
+                        </label>
+                        <a class="btn btn-ghost" href="/">
+                            <div class="object-contain size-8 rounded-3xl flex items-center">
+                                <img src="~/assets/moodhelper_icon.png" alt="MoodHelper Icon" class="rounded-3xl object-contain w-full h-full"/>
+                            </div>
+                            <h1 class="text-2xl font-bold">MoodHelper</h1>
+                        </a>
+                    </div>
+<!--                    <div class="flex-grow"/>-->
+                    <select v-model="selectedLocale" class="select select-bordered h-full bg-transparent">
+                        <option value="en">{{ $t(`locales.en`) }}</option>
+                        <option value="cn">{{ $t(`locales.cn`) }}</option>
+                    </select>
                 </div>
                 <div class="flex-none hidden laptop:block">
                     <select v-model="selectedLocale" class="select select-bordered h-full bg-transparent">