From f91df20dc10e7f1da32be8c43021375d71abd0a0 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Tue, 4 Jun 2024 18:44:12 -1000
Subject: [PATCH] fix: :bug: Fix AdaptiveDropdown not responding to touch on
 mobile

---
 components/composer/modal.client.vue      |  1 -
 components/dropdowns/AdaptiveDropdown.vue | 66 +++++++++++++++++------
 components/sidebars/navigation.vue        | 39 +++++++-------
 3 files changed, 67 insertions(+), 39 deletions(-)

diff --git a/components/composer/modal.client.vue b/components/composer/modal.client.vue
index 2eee53b..2e307a7 100644
--- a/components/composer/modal.client.vue
+++ b/components/composer/modal.client.vue
@@ -46,7 +46,6 @@ useListen("composer:open", () => {
 useListen("composer:close", () => {
     open.value = false;
 });
-const log = console.log;
 const tokenData = useTokenData();
 const instance = useInstance();
 </script>
\ No newline at end of file
diff --git a/components/dropdowns/AdaptiveDropdown.vue b/components/dropdowns/AdaptiveDropdown.vue
index ae14597..8e62a46 100644
--- a/components/dropdowns/AdaptiveDropdown.vue
+++ b/components/dropdowns/AdaptiveDropdown.vue
@@ -5,23 +5,27 @@
         <Menu.Trigger>
             <slot name="button"></slot>
         </Menu.Trigger>
-        <div @mousedown="open = false" @touchstart="open = false" v-if="open" class="fixed inset-0 z-10 bg-black/50">
-        </div>
-        <Menu.Positioner :class="isSmallScreen && '!bottom-0 !top-[unset] fixed inset-x-0 w-full !translate-y-0'">
-            <transition enter-active-class="transition ease-in duration-100"
-                enter-from-class="transform opacity-0 translate-y-full sm:translate-y-0 scale-95"
-                enter-to-class="transform translate-y-0 opacity-100 scale-100"
-                leave-active-class="transition ease-out duration-75" leave-from-class="transform opacity-100 scale-100"
-                leave-to-class="transform opacity-0 scale-95">
-                <Menu.Content v-if="open"
-                    :class="['z-20 mt-2 rounded overflow-hidden p-1 space-y-1 bg-dark-700 shadow-lg ring-1 ring-white/10 focus:outline-none min-w-56']">
-                    <div v-if="isSmallScreen" class="w-full py-2">
-                        <div class="rounded-full h-1 bg-gray-400 w-12 mx-auto"></div>
-                    </div>
-                    <slot name="items"></slot>
-                </Menu.Content>
-            </transition>
-        </Menu.Positioner>
+
+        <Teleport to="body">
+            <div @mousedown="open = false" @touchstart="open = false" v-if="open"
+                class="fixed inset-0 z-10 bg-black/50">
+            </div>
+            <Menu.Positioner :class="isSmallScreen && '!bottom-0 !top-[unset] fixed inset-x-0 w-full !translate-y-0'">
+                <transition enter-active-class="transition ease-in duration-100"
+                    enter-from-class="transform opacity-0 translate-y-full sm:translate-y-0 scale-95"
+                    enter-to-class="transform translate-y-0 opacity-100 scale-100"
+                    leave-active-class="transition ease-out duration-75"
+                    leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
+                    <Menu.Content v-if="open"
+                        :class="['z-20 mt-2 rounded overflow-hidden p-1 space-y-1 bg-dark-700 shadow-lg ring-1 ring-white/10 focus:outline-none min-w-56', id]">
+                        <div v-if="isSmallScreen" class="w-full py-2">
+                            <div class="rounded-full h-1 bg-gray-400 w-12 mx-auto"></div>
+                        </div>
+                        <slot name="items"></slot>
+                    </Menu.Content>
+                </transition>
+            </Menu.Positioner>
+        </Teleport>
     </Menu.Root>
 </template>
 
@@ -31,4 +35,32 @@ const { width } = useWindowSize();
 const isSmallScreen = computed(() => width.value < 768);
 
 const open = ref(false);
+const id = useId();
+
+// HACK: Fix the menu children not reacting to touch events as click for some reason
+const registerClickHandlers = () => {
+    const targetElement = document.querySelector(`.${id}`);
+    if (targetElement) {
+        for (const el of targetElement.children) {
+            el.addEventListener("pointerdown", (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                // Click all element children
+                for (const elChild of Array.from(el.children)) {
+                    if (elChild instanceof HTMLElement) {
+                        elChild.click();
+                    }
+                }
+            });
+        }
+    }
+};
+
+// When opening, register click handlers
+watch(open, async (o) => {
+    if (o) {
+        await nextTick();
+        registerClickHandlers();
+    }
+});
 </script>
\ No newline at end of file
diff --git a/components/sidebars/navigation.vue b/components/sidebars/navigation.vue
index 5229b18..10a6bd8 100644
--- a/components/sidebars/navigation.vue
+++ b/components/sidebars/navigation.vue
@@ -106,27 +106,25 @@
                 </template>
 
                 <template #items>
-                    <ClientOnly>
-                        <Menu.Item value="" v-if="tokenData">
-                            <ButtonsDropdownElement icon="tabler:logout" class="w-full"
-                                @click="signOut().finally(() => loadingAuth = false)" :loading="loadingAuth">
-                                Sign Out
+                    <Menu.Item value="" v-if="tokenData">
+                        <ButtonsDropdownElement icon="tabler:logout" class="w-full"
+                            @click="signOut().finally(() => loadingAuth = false)" :loading="loadingAuth">
+                            Sign Out
+                        </ButtonsDropdownElement>
+                    </Menu.Item>
+                    <Menu.Item value="" v-if="!tokenData">
+                        <ButtonsDropdownElement icon="tabler:login" class="w-full"
+                            @click="signIn().finally(() => loadingAuth = false)" :loading="loadingAuth">
+                            Sign In
+                        </ButtonsDropdownElement>
+                    </Menu.Item>
+                    <Menu.Item value="" v-if="!tokenData">
+                        <NuxtLink href="/register">
+                            <ButtonsDropdownElement icon="tabler:certificate" class="w-full">
+                                Register
                             </ButtonsDropdownElement>
-                        </Menu.Item>
-                        <Menu.Item value="" v-if="!tokenData">
-                            <ButtonsDropdownElement icon="tabler:login" class="w-full"
-                                @click="signIn().finally(() => loadingAuth = false)" :loading="loadingAuth">
-                                Sign In
-                            </ButtonsDropdownElement>
-                        </Menu.Item>
-                        <Menu.Item value="" v-if="!tokenData">
-                            <NuxtLink href="/register">
-                                <ButtonsDropdownElement icon="tabler:certificate" class="w-full">
-                                    Register
-                                </ButtonsDropdownElement>
-                            </NuxtLink>
-                        </Menu.Item>
-                    </ClientOnly>
+                        </NuxtLink>
+                    </Menu.Item>
                 </template>
             </DropdownsAdaptiveDropdown>
             <button @click="compose" v-if="tokenData"
@@ -165,7 +163,6 @@ const timelines = ref([
         requiresAuth: true,
     },
 ]);
-const log = console.log;
 
 const visibleTimelines = computed(() =>
     timelines.value.filter(