From bc44409f9e182ac42eb91afe41a2836de9837e10 Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Sun, 6 Oct 2024 00:23:59 +0900
Subject: [PATCH] tweak 36c922fb

---
 locales/en-US.yml                             |  1 +
 locales/index.d.ts                            |  4 +++
 locales/ja-JP.yml                             |  1 +
 locales/ko-KR.yml                             |  1 +
 .../frontend/src/pages/settings/navbar.vue    | 35 +++++++++++++------
 5 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/locales/en-US.yml b/locales/en-US.yml
index ba21579e0a..50787c03a9 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -3,6 +3,7 @@ _lang_: "English"
 widgets: "Widgets"
 postNote: "Post note"
 bottomNavbar: "Bottom navigation bar"
+bottomNavbarDescription: "This setting is only available in a mobile environment."
 scheduledNoteDelete: "Schedule note deletion"
 getQRCode: "Get QR code"
 customSplashText: "Custom splash text"
diff --git a/locales/index.d.ts b/locales/index.d.ts
index 28355c7c56..ccc6d09f9c 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -25,6 +25,10 @@ export interface Locale extends ILocale {
      * 下のナビゲーションバー
      */
     "bottomNavbar": string;
+    /**
+     * この設定は、モバイル環境でのみ使用できます。
+     */
+    "bottomNavbarDescription": string;
     /**
      * ノートの削除を予約
      */
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index d82d43185e..48570b64d0 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -3,6 +3,7 @@ _lang_: "日本語"
 widgets: "ウィジェット"
 postNote: "ノートを作成"
 bottomNavbar: "下のナビゲーションバー"
+bottomNavbarDescription: "この設定は、モバイル環境でのみ使用できます。"
 scheduledNoteDelete: "ノートの削除を予約"
 getQRCode: "QRコードを取得"
 customSplashText: "カスタムスプラッシュテキスト"
diff --git a/locales/ko-KR.yml b/locales/ko-KR.yml
index 1d403abbe1..01f01e91c4 100644
--- a/locales/ko-KR.yml
+++ b/locales/ko-KR.yml
@@ -3,6 +3,7 @@ _lang_: "한국어"
 widgets: "위젯"
 postNote: "노트 작성"
 bottomNavbar: "하단 내비게이션 바"
+bottomNavbarDescription: "이 설정은 모바일 환경에서만 사용할 수 있어요."
 scheduledNoteDelete: "노트 삭제 예약"
 getQRCode: "QR 코드 생성"
 customSplashText: "사용자 정의 스플래시 텍스트"
diff --git a/packages/frontend/src/pages/settings/navbar.vue b/packages/frontend/src/pages/settings/navbar.vue
index daa3e16a5a..a229f10019 100644
--- a/packages/frontend/src/pages/settings/navbar.vue
+++ b/packages/frontend/src/pages/settings/navbar.vue
@@ -55,19 +55,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<FormSection>
 		<template #label>{{ i18n.ts.bottomNavbar }}</template>
+		<template v-if="!isMobile" #description>{{ i18n.ts.cannotBeUsedFunc }} <a class="_link" @click="learnMoreBottomNavbar">{{ i18n.ts.learnMore }}</a></template>
 		<div class="_gaps_m">
-			<MkSwitch v-model="showMenuButtonInNavbar"><i class="ti ti-menu-2"></i> {{ i18n.ts.menu }}</MkSwitch>
-			<MkSwitch v-model="showHomeButtonInNavbar"><i class="ti ti-home"></i> {{ i18n.ts.home }}</MkSwitch>
-			<MkSwitch v-model="showExploreButtonInNavbar"><i class="ti ti-hash"></i> {{ i18n.ts.explore }}</MkSwitch>
-			<MkSwitch v-model="showSearchButtonInNavbar"><i class="ti ti-search"></i> {{ i18n.ts.search }}</MkSwitch>
-			<MkSwitch v-model="showNotificationButtonInNavbar"><i class="ti ti-bell"></i> {{ i18n.ts.notifications }}</MkSwitch>
-			<MkSwitch v-model="showMessageButtonInNavbar"><i class="ti ti-messages"></i> {{ i18n.ts.messaging }}</MkSwitch>
-			<MkSwitch v-model="showWidgetButtonInNavbar"><i class="ti ti-apps"></i> {{ i18n.ts.widgets }}</MkSwitch>
-			<MkSwitch v-model="showPostButtonInNavbar"><i class="ti ti-pencil"></i> {{ i18n.ts.postNote }}</MkSwitch>
+			<MkSwitch v-model="showMenuButtonInNavbar" :disabled="!isMobile"><i class="ti ti-menu-2"></i> {{ i18n.ts.menu }}</MkSwitch>
+			<MkSwitch v-model="showHomeButtonInNavbar" :disabled="!isMobile"><i class="ti ti-home"></i> {{ i18n.ts.home }}</MkSwitch>
+			<MkSwitch v-model="showExploreButtonInNavbar" :disabled="!isMobile"><i class="ti ti-hash"></i> {{ i18n.ts.explore }}</MkSwitch>
+			<MkSwitch v-model="showSearchButtonInNavbar" :disabled="!isMobile"><i class="ti ti-search"></i> {{ i18n.ts.search }}</MkSwitch>
+			<MkSwitch v-model="showNotificationButtonInNavbar" :disabled="!isMobile"><i class="ti ti-bell"></i> {{ i18n.ts.notifications }}</MkSwitch>
+			<MkSwitch v-model="showMessageButtonInNavbar" :disabled="!isMobile"><i class="ti ti-messages"></i> {{ i18n.ts.messaging }}</MkSwitch>
+			<MkSwitch v-model="showWidgetButtonInNavbar" :disabled="!isMobile"><i class="ti ti-apps"></i> {{ i18n.ts.widgets }}</MkSwitch>
+			<MkSwitch v-model="showPostButtonInNavbar" :disabled="!isMobile"><i class="ti ti-pencil"></i> {{ i18n.ts.postNote }}</MkSwitch>
 		</div>
 		<div class="_buttons" style="margin-top: 20px;">
-			<MkButton danger @click="resetButtomNavbar"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</MkButton>
-			<MkButton primary class="save" @click="reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true })"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
+			<MkButton :disabled="!isMobile" danger @click="resetButtomNavbar"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</MkButton>
+			<MkButton :disabled="!isMobile" primary class="save" @click="reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true })"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
 		</div>
 	</FormSection>
 </div>
@@ -88,7 +89,14 @@ import { reloadAsk } from '@/scripts/reload-ask.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { miLocalStorage } from '@/local-storage.js';
+import { deviceKind } from '@/scripts/device-kind.js';
 
+const MOBILE_THRESHOLD = 500;
+
+const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
+window.addEventListener('resize', () => {
+	isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
+});
 const isFriendly = ref(miLocalStorage.getItem('ui') === 'friendly');
 
 const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
@@ -163,6 +171,13 @@ function resetButtomNavbar() {
 	defaultStore.set('showWidgetButtonInNavbar', true);
 }
 
+function learnMoreBottomNavbar() {
+	os.alert({
+		type: 'info',
+		text: i18n.ts.bottomNavbarDescription,
+	});
+}
+
 watch([menuDisplay, bannerDisplay], async () => {
 	await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
 });