From e4841bec1032c676b3527cc0c315101d744a758f Mon Sep 17 00:00:00 2001
From: Last2014 <info@last2014.com>
Date: Wed, 3 Jun 2026 22:03:54 +0900
Subject: [PATCH] =?UTF-8?q?Enhance:=20=E3=82=B3=E3=83=9F=E3=83=A5=E3=83=8B?=
 =?UTF-8?q?=E3=83=86=E3=82=A3=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC=E5=A4=96?=
 =?UTF-8?q?=E3=82=92=E3=82=AF=E3=83=AA=E3=83=83=E3=82=AF=E3=81=97=E3=81=A6?=
 =?UTF-8?q?=E9=96=89=E3=81=98=E3=82=8B=E6=A9=9F=E8=83=BD=E3=81=AE=E5=88=A4?=
 =?UTF-8?q?=E5=AE=9A=E6=96=B9=E6=B3=95=E3=82=92=E6=94=B9=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/routes/community/index.vue   | 39 ++++++++++++-------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/packages/frontend/src/routes/community/index.vue b/packages/frontend/src/routes/community/index.vue
index fdcc8fd..ee693ff 100644
--- a/packages/frontend/src/routes/community/index.vue
+++ b/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;