Enhance: コミュニティメニュー外をクリックして閉じる機能の判定方法を改善

packages/frontend/src/routes/community/index.vue

@@ -28,14 +28,8 @@
         </div>
 
         <div
-          @click="changeMenu()"
-          class="menu-bg"
-          v-show="isMenuOpen"
-        />
-
-        <div
-          @click.stop
           class="menu"
+          ref="menuElem"
           v-show="isMenuOpen"
         >
           <div
@@ -128,13 +122,6 @@
   margin-left: auto;
 }
 
-.menu-bg {
-  position: fixed;
-  inset: 0;
-  width: 100dvw;
-  height: 100dvh;
-}
-
 .menu {
   position: absolute;
   top: 100%;
@@ -270,17 +257,20 @@ import { account, presentCommunity, serverInfo } from "@/lib/account";
 import client from "@/lib/client";
 import { createModal } from "@/lib/modal";
 import GoHomeError from "@/components/Modal/GoHomeError.vue";
-import { ref } from "vue";
+import { onBeforeUnmount, ref, watch } from "vue";
 import Progress from "@/components/Progress.vue";
 import { title } from "@/lib/router";
 import type ApiMap from "lynqchat-js/1.0.0-alpha.0/map";
 import { Icon } from "@iconify/vue";
 import CreateChannel from "@/components/Modal/CreateChannel.vue";
+
 const route = useRoute();
 const router = useRouter();
 const isProcessing = ref<boolean>(false);
 
 const isMenuOpen = ref<boolean>(false);
+const menuElem = ref<HTMLElement | null>(null);
+
 const isChannelsLoading = ref<boolean>(false);
 const channels = ref<Extract<ApiMap["channel/list"]["response"], { channels: any }>["channels"]>();
 
@@ -302,6 +292,25 @@ if (!account.value?.success) {
   }
 }
 
+const handleOutsideClick = (event: any) => {
+  if (menuElem.value && !menuElem.value.contains(event.target)) {
+    isMenuOpen.value = false;
+  }
+}
+
+watch(isMenuOpen, async (newVal) => {
+  if (newVal) {
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+    window.addEventListener("click", handleOutsideClick);
+  } else {
+    window.removeEventListener("click", handleOutsideClick);
+  }
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener("click", handleOutsideClick);
+});
+
 const createChannel = () => {
   isMenuOpen.value = false;