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] =?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 232d52d7e1..33b962bd59 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 8ae11efa2c..e0f2e85649 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>