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(), });