From 4bcb7e2f31557c5fb61508498f9472e52309508c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8A=E3=81=95=E3=82=80=E3=81=AE=E3=81=B2=E3=81=A8?=
 <46447427+samunohito@users.noreply.github.com>
Date: Sun, 17 Nov 2024 17:57:55 +0900
Subject: [PATCH 1/7] =?UTF-8?q?enhance(frontend):=20=E3=83=87=E3=83=83?=
 =?UTF-8?q?=E3=82=AD=E8=A1=A8=E7=A4=BA=E6=99=82=E3=81=AB=E3=82=B5=E3=82=A4?=
 =?UTF-8?q?=E3=83=89=E3=83=90=E3=83=BC=E3=82=92=E5=B1=95=E9=96=8B=E3=83=BB?=
 =?UTF-8?q?=E6=8A=98=E3=82=8A=E3=81=9F=E3=81=9F=E3=81=BF=E3=81=A7=E3=81=8D?=
 =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                 |  1 +
 packages/frontend/src/ui/_common_/navbar.vue | 30 ++++++++++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 232d52d7e1c7..33b962bd59c3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -26,6 +26,7 @@
 - Enhance: ノート詳細画面にロールのバッジを表示
 - Enhance: 過去に送信したフォローリクエストを確認できるように  
   (Based on https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/663)
+- Enhance: デッキ表示時にサイドバーを展開・折りたたみできるように ( #14981 )
 - Fix: 通知の範囲指定の設定項目が必要ない通知設定でも範囲指定の設定がでている問題を修正
 - Fix: Turnstileが失敗・期限切れした際にも成功扱いとなってしまう問題を修正  
   (Cherry-picked from https://github.com/MisskeyIO/misskey/pull/768)
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index 8ae11efa2c66..e0f2e856496c 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -55,6 +55,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkAvatar :user="$i" :class="$style.avatar"/><MkAcct class="_nowrap" :class="$style.acct" :user="$i"/>
 			</button>
 		</div>
+		<div :class="$style.right">
+			<button :class="$style.toggleButton" @click="iconOnly = !iconOnly">
+				<i :class="'ti ' + `ti-chevron-${ iconOnly ? 'right' : 'left' }`"></i>
+			</button>
+		</div>
 	</div>
 </div>
 </template>
@@ -116,6 +121,19 @@ function more(ev: MouseEvent) {
 	flex: 0 0 var(--nav-width);
 	width: var(--nav-width);
 	box-sizing: border-box;
+
+	.right {
+		position: fixed;
+		top: 0;
+		right: 0;
+		width: fit-content;
+		height: 100dvh;
+
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
 }
 
 .body {
@@ -564,4 +582,16 @@ function more(ev: MouseEvent) {
 		}
 	}
 }
+
+.toggleButton {
+	width: fit-content;
+	height: 80px;
+	margin: 0;
+	padding: 0;
+	background-color: transparent;
+	border: none;
+	border-radius: 9999px;
+	box-sizing: border-box;
+	font-size: 0.75em;
+}
 </style>

From 6af19cb88b7afea75ad1ace9558e09a85e8e1772 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 18 Nov 2024 09:09:02 +0900
Subject: [PATCH 2/7] wip

---
 packages/frontend/src/ui/_common_/navbar.vue | 69 +++++++++++++++-----
 1 file changed, 53 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index e0f2e856496c..e7cb20d183c6 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -55,12 +55,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkAvatar :user="$i" :class="$style.avatar"/><MkAcct class="_nowrap" :class="$style.acct" :user="$i"/>
 			</button>
 		</div>
-		<div :class="$style.right">
-			<button :class="$style.toggleButton" @click="iconOnly = !iconOnly">
-				<i :class="'ti ' + `ti-chevron-${ iconOnly ? 'right' : 'left' }`"></i>
-			</button>
-		</div>
 	</div>
+	<button class="_button" :class="$style.toggleButton" @click="iconOnly = !iconOnly">
+		<svg viewBox="0 0 16 48" :class="$style.toggleButtonShape">
+			<g transform="matrix(0.333333,0,0,0.222222,0.000895785,13.3333)">
+				<path d="M23.935,-24C37.223,-24 47.995,-7.842 47.995,12.09C47.995,34.077 47.995,62.07 47.995,84.034C47.995,93.573 45.469,102.721 40.972,109.466C36.475,116.211 30.377,120 24.018,120L23.997,120C10.743,120 -0.003,136.118 -0.003,156C-0.003,156 -0.003,156 -0.003,156L-0.003,-60L-0.003,-59.901C-0.003,-50.379 2.519,-41.248 7.007,-34.515C11.496,-27.782 17.584,-24 23.931,-24C23.932,-24 23.934,-24 23.935,-24Z" style="fill:var(--MI_THEME-navBg);"/>
+			</g>
+		</svg>
+		<i :class="'ti ' + `ti-chevron-${ iconOnly ? 'right' : 'left' }`" style="font-size: 12px; margin-left: -8px;"></i>
+	</button>
 </div>
 </template>
 
@@ -151,6 +154,44 @@ function more(ev: MouseEvent) {
 	contain: strict;
 	display: flex;
 	flex-direction: column;
+	direction: rtl; // スクロールバーを左に表示したいため
+}
+
+.top {
+	direction: ltr;
+}
+
+.middle {
+	direction: ltr;
+}
+
+.bottom {
+	direction: ltr;
+}
+
+.right {
+	direction: ltr;
+}
+
+.toggleButton {
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	margin: auto;
+	left: var(--nav-width);
+	z-index: 1001;
+	width: 16px;
+	height: 48px;
+	box-sizing: border-box;
+}
+
+.toggleButtonShape {
+	position: absolute;
+	z-index: -1;
+	top: 0;
+	left: 0;
+	width: 16px;
+	height: 48px;
 }
 
 .root:not(.iconOnly) {
@@ -381,6 +422,10 @@ function more(ev: MouseEvent) {
 		position: relative;
 		font-size: 0.9em;
 	}
+
+	.toggleButton {
+		left: var(--nav-width);
+	}
 }
 
 .root.iconOnly {
@@ -581,17 +626,9 @@ function more(ev: MouseEvent) {
 			font-size: 10px;
 		}
 	}
-}
 
-.toggleButton {
-	width: fit-content;
-	height: 80px;
-	margin: 0;
-	padding: 0;
-	background-color: transparent;
-	border: none;
-	border-radius: 9999px;
-	box-sizing: border-box;
-	font-size: 0.75em;
+	.toggleButton {
+		left: var(--nav-icon-only-width);
+	}
 }
 </style>

From 173783b8bbf0e22820d4055f9534aa1c9d07a8df Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 18 Nov 2024 09:22:15 +0900
Subject: [PATCH 3/7] wip

---
 packages/frontend/src/ui/_common_/navbar.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index e7cb20d183c6..f7e77cd0aefe 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -57,11 +57,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 	</div>
 	<button class="_button" :class="$style.toggleButton" @click="iconOnly = !iconOnly">
+		<!--
 		<svg viewBox="0 0 16 48" :class="$style.toggleButtonShape">
 			<g transform="matrix(0.333333,0,0,0.222222,0.000895785,13.3333)">
 				<path d="M23.935,-24C37.223,-24 47.995,-7.842 47.995,12.09C47.995,34.077 47.995,62.07 47.995,84.034C47.995,93.573 45.469,102.721 40.972,109.466C36.475,116.211 30.377,120 24.018,120L23.997,120C10.743,120 -0.003,136.118 -0.003,156C-0.003,156 -0.003,156 -0.003,156L-0.003,-60L-0.003,-59.901C-0.003,-50.379 2.519,-41.248 7.007,-34.515C11.496,-27.782 17.584,-24 23.931,-24C23.932,-24 23.934,-24 23.935,-24Z" style="fill:var(--MI_THEME-navBg);"/>
 			</g>
 		</svg>
+		-->
+		<svg viewBox="0 0 16 64" :class="$style.toggleButtonShape">
+			<g transform="matrix(0.333333,0,0,0.222222,0.000895785,21.3333)">
+				<path d="M47.488,7.995C47.79,10.11 47.943,12.266 47.943,14.429C47.997,26.989 47.997,84 47.997,84C47.997,84 44.018,118.246 23.997,133.5C-0.374,152.07 -0.003,192 -0.003,192L-0.003,-96C-0.003,-96 0.151,-56.216 23.997,-37.5C40.861,-24.265 46.043,-1.243 47.488,7.995Z" style="fill:var(--MI_THEME-navBg);"/>
+			</g>
+		</svg>
 		<i :class="'ti ' + `ti-chevron-${ iconOnly ? 'right' : 'left' }`" style="font-size: 12px; margin-left: -8px;"></i>
 	</button>
 </div>
@@ -181,7 +188,7 @@ function more(ev: MouseEvent) {
 	left: var(--nav-width);
 	z-index: 1001;
 	width: 16px;
-	height: 48px;
+	height: 64px;
 	box-sizing: border-box;
 }
 
@@ -191,7 +198,7 @@ function more(ev: MouseEvent) {
 	top: 0;
 	left: 0;
 	width: 16px;
-	height: 48px;
+	height: 64px;
 }
 
 .root:not(.iconOnly) {

From 66ba29a980cb25b2cf574e6bee019a89d09ecc6c Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 18 Nov 2024 09:23:06 +0900
Subject: [PATCH 4/7] Update navbar.vue

---
 packages/frontend/src/ui/_common_/navbar.vue | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index f7e77cd0aefe..e38ef73609c4 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -131,19 +131,6 @@ function more(ev: MouseEvent) {
 	flex: 0 0 var(--nav-width);
 	width: var(--nav-width);
 	box-sizing: border-box;
-
-	.right {
-		position: fixed;
-		top: 0;
-		right: 0;
-		width: fit-content;
-		height: 100dvh;
-
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
 }
 
 .body {
@@ -176,10 +163,6 @@ function more(ev: MouseEvent) {
 	direction: ltr;
 }
 
-.right {
-	direction: ltr;
-}
-
 .toggleButton {
 	position: fixed;
 	top: 0;

From c4b0723de061bf150735c33e59bfdf3002ffb5af Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 18 Nov 2024 09:28:11 +0900
Subject: [PATCH 5/7] =?UTF-8?q?=E2=9C=8C=EF=B8=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/pages/settings/navbar.vue |  4 ----
 packages/frontend/src/ui/_common_/navbar.vue    | 14 ++++++++++----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/frontend/src/pages/settings/navbar.vue b/packages/frontend/src/pages/settings/navbar.vue
index b189db0f8fd4..c38cdc4fc24f 100644
--- a/packages/frontend/src/pages/settings/navbar.vue
+++ b/packages/frontend/src/pages/settings/navbar.vue
@@ -100,10 +100,6 @@ function reset() {
 	}));
 }
 
-watch(menuDisplay, async () => {
-	await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
-});
-
 const headerActions = computed(() => []);
 
 const headerTabs = computed(() => []);
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index e38ef73609c4..66dedaf6dacb 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -56,7 +56,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</button>
 		</div>
 	</div>
-	<button class="_button" :class="$style.toggleButton" @click="iconOnly = !iconOnly">
+	<button v-if="!forceIconOnly" class="_button" :class="$style.toggleButton" @click="toggleIconOnly">
 		<!--
 		<svg viewBox="0 0 16 48" :class="$style.toggleButtonShape">
 			<g transform="matrix(0.333333,0,0,0.222222,0.000895785,13.3333)">
@@ -95,9 +95,11 @@ const otherMenuItemIndicated = computed(() => {
 	return false;
 });
 
-const calcViewState = () => {
-	iconOnly.value = (window.innerWidth <= 1279) || (defaultStore.state.menuDisplay === 'sideIcon');
-};
+const forceIconOnly = window.innerWidth <= 1279;
+
+function calcViewState() {
+	iconOnly.value = forceIconOnly || (defaultStore.state.menuDisplay === 'sideIcon');
+}
 
 calcViewState();
 
@@ -107,6 +109,10 @@ watch(defaultStore.reactiveState.menuDisplay, () => {
 	calcViewState();
 });
 
+function toggleIconOnly() {
+	defaultStore.set('menuDisplay', iconOnly.value ? 'sideFull' : 'sideIcon');
+}
+
 function openAccountMenu(ev: MouseEvent) {
 	openAccountMenu_({
 		withExtraOperation: true,

From 2b61ad10579697a6a59805642f25fc2833e34d09 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 18 Nov 2024 09:29:52 +0900
Subject: [PATCH 6/7] Update CHANGELOG.md

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 33b962bd59c3..17db94468d11 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -26,7 +26,7 @@
 - Enhance: ノート詳細画面にロールのバッジを表示
 - Enhance: 過去に送信したフォローリクエストを確認できるように  
   (Based on https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/663)
-- Enhance: デッキ表示時にサイドバーを展開・折りたたみできるように ( #14981 )
+- Enhance: サイドバーを簡単に展開・折りたたみできるように ( #14981 )
 - Fix: 通知の範囲指定の設定項目が必要ない通知設定でも範囲指定の設定がでている問題を修正
 - Fix: Turnstileが失敗・期限切れした際にも成功扱いとなってしまう問題を修正  
   (Cherry-picked from https://github.com/MisskeyIO/misskey/pull/768)

From 5e59f51db84e5803c92f5570a4466812c832b1cd Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 18 Nov 2024 10:36:32 +0900
Subject: [PATCH 7/7] =?UTF-8?q?=F0=9F=8E=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/ui/_common_/navbar.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index 66dedaf6dacb..8fc76741e3d8 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -171,9 +171,7 @@ function more(ev: MouseEvent) {
 
 .toggleButton {
 	position: fixed;
-	top: 0;
-	bottom: 0;
-	margin: auto;
+	bottom: 20px;
 	left: var(--nav-width);
 	z-index: 1001;
 	width: 16px;