enhance(frontend): デッキ表示時にサイドバーを展開・折りたたみできるように

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)

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>