fix: use Dropdown instead of Menu on Mobile (#83)

maru-re · Oct 24, 2024 · 0425f79 · 0425f79
1 parent 15dbfc3
commit 0425f79
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/app/components/SettingsDialog.vue b/app/components/SettingsDialog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { MaruSongDataParsed } from '@marure/schema'
-import { Menu } from 'floating-vue'
+import { Dropdown, Menu } from 'floating-vue'
 import { isMobileScreen } from '~/state/breakpoints'
 import { showSettingsDialog, showShortcutDialog } from '~/state/models'
 
@@ -91,7 +91,9 @@ const { t, locale, locales, setLocale } = useI18n()
           <DarkToggle
             type="button"
           />
-          <Menu>
+          <component
+            :is="isMobileScreen ? Dropdown : Menu"
+          >
             <SimpleButton icon="i-uil-english-to-chinese" :title="t('actions.languages')" />
             <template #popper>
               <div p2 flex="~ col gap-1">
@@ -103,7 +105,7 @@ const { t, locale, locales, setLocale } = useI18n()
                 />
               </div>
             </template>
-          </Menu>
+          </component>
           <ActionButton
             icon="i-uil-keyboard-alt"
             type="button"

diff --git a/app/components/atomic/I18nSelector.vue b/app/components/atomic/I18nSelector.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
-import { Menu } from 'floating-vue'
+import { Dropdown, Menu } from 'floating-vue'
+import { isMobileScreen } from '~/state/breakpoints'
 
 const { locale, locales, setLocale } = useI18n()
 </script>
 
 <template>
-  <Menu placement="top">
+  <component
+    :is="isMobileScreen ? Dropdown : Menu"
+    placement="top"
+  >
     <IconButton icon="i-uil-english-to-chinese" />
     <template #popper>
       <div p2 flex="~ col gap-1">
@@ -17,5 +21,5 @@ const { locale, locales, setLocale } = useI18n()
         />
       </div>
     </template>
-  </Menu>
+  </component>
 </template>