diff --git a/CHANGELOG.md b/CHANGELOG.md
index 96c558ad2b..f13327a6a1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
-
### Client
+- 画面サイズが変わった際にナビゲーションバーが自動で折りたたまれない問題を修正
- Fix: サーバー情報メニューに区切り線が不足していたのを修正
### Server
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index 8fc76741e3..9724905e02 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-
+
{{ i18n.ts.controlPanel }}
-
@@ -83,8 +83,12 @@ import { $i, openAccountMenu as openAccountMenu_ } from '@/account.js';
import { defaultStore } from '@/store.js';
import { i18n } from '@/i18n.js';
import { instance } from '@/instance.js';
+import { getHTMLElementOrNull } from '@/scripts/get-dom-node-or-null.js';
-const iconOnly = ref(false);
+const forceIconOnly = ref(window.innerWidth <= 1279);
+const iconOnly = computed(() => {
+ return forceIconOnly.value || (defaultStore.reactiveState.menuDisplay.value === 'sideIcon');
+});
const menu = computed(() => defaultStore.state.menu);
const otherMenuItemIndicated = computed(() => {
@@ -95,14 +99,10 @@ const otherMenuItemIndicated = computed(() => {
return false;
});
-const forceIconOnly = window.innerWidth <= 1279;
-
function calcViewState() {
- iconOnly.value = forceIconOnly || (defaultStore.state.menuDisplay === 'sideIcon');
+ forceIconOnly.value = window.innerWidth <= 1279;
}
-calcViewState();
-
window.addEventListener('resize', calcViewState);
watch(defaultStore.reactiveState.menuDisplay, () => {
@@ -120,8 +120,10 @@ function openAccountMenu(ev: MouseEvent) {
}
function more(ev: MouseEvent) {
+ const target = getHTMLElementOrNull(ev.currentTarget ?? ev.target);
+ if (!target) return;
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
- src: ev.currentTarget ?? ev.target,
+ src: target,
}, {
closed: () => dispose(),
});