From 242538ddce37de41d924f12ab8a3637c264d231c Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 14 Jul 2022 17:42:12 +0900
Subject: refactor(client): rename menu(sidebar) -> navbar

---
 locales/ja-JP.yml                                  |   1 +
 packages/client/src/components/launch-pad.vue      |   4 +-
 packages/client/src/menu.ts                        | 135 ---------
 packages/client/src/navbar.ts                      | 135 +++++++++
 packages/client/src/pages/settings/index.vue       |  16 +-
 packages/client/src/pages/settings/menu.vue        |  87 ------
 packages/client/src/pages/settings/navbar.vue      |  87 ++++++
 .../src/pages/settings/statusbars.statusbar.vue    |   1 -
 .../client/src/ui/_common_/navbar-for-mobile.vue   | 209 ++++++++++++++
 packages/client/src/ui/_common_/navbar.vue         | 303 +++++++++++++++++++++
 .../client/src/ui/_common_/sidebar-for-mobile.vue  | 209 --------------
 packages/client/src/ui/_common_/sidebar.vue        | 303 ---------------------
 packages/client/src/ui/classic.header.vue          |  16 +-
 packages/client/src/ui/classic.sidebar.vue         |  16 +-
 packages/client/src/ui/classic.vue                 |   1 -
 packages/client/src/ui/deck.vue                    |  10 +-
 packages/client/src/ui/universal.vue               |  10 +-
 17 files changed, 772 insertions(+), 771 deletions(-)
 delete mode 100644 packages/client/src/menu.ts
 create mode 100644 packages/client/src/navbar.ts
 delete mode 100644 packages/client/src/pages/settings/menu.vue
 create mode 100644 packages/client/src/pages/settings/navbar.vue
 create mode 100644 packages/client/src/ui/_common_/navbar-for-mobile.vue
 create mode 100644 packages/client/src/ui/_common_/navbar.vue
 delete mode 100644 packages/client/src/ui/_common_/sidebar-for-mobile.vue
 delete mode 100644 packages/client/src/ui/_common_/sidebar.vue

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 0e278bead6..fd8aca868b 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -887,6 +887,7 @@ beta: "ベータ"
 enableAutoSensitive: "自動NSFW判定"
 enableAutoSensitiveDescription: "利用可能な場合は、機械学習を利用して自動でメディアにNSFWフラグを設定します。この機能をオフにしても、インスタンスによっては自動で設定されることがあります。"
 activeEmailValidationDescription: "ユーザーのメールアドレスのバリデーションを、捨てアドかどうかや実際に通信可能かどうかなどを判定しより積極的に行います。オフにすると単に文字列として正しいかどうかのみチェックされます。"
+navbar: "ナビゲーションバー"
 
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てることができます。サーバーの負荷が少し増えます。"
diff --git a/packages/client/src/components/launch-pad.vue b/packages/client/src/components/launch-pad.vue
index a6025f8b27..4693df2916 100644
--- a/packages/client/src/components/launch-pad.vue
+++ b/packages/client/src/components/launch-pad.vue
@@ -36,7 +36,7 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import MkModal from '@/components/ui/modal.vue';
-import { menuDef } from '@/menu';
+import { navbarItemDef } from '@/navbar';
 import { instanceName } from '@/config';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
@@ -62,7 +62,7 @@ const modal = $ref<InstanceType<typeof MkModal>>();
 
 const menu = defaultStore.state.menu;
 
-const items = Object.keys(menuDef).filter(k => !menu.includes(k)).map(k => menuDef[k]).filter(def => def.show == null ? true : def.show).map(def => ({
+const items = Object.keys(navbarItemDef).filter(k => !menu.includes(k)).map(k => navbarItemDef[k]).filter(def => def.show == null ? true : def.show).map(def => ({
 	type: def.to ? 'link' : 'button',
 	text: i18n.ts[def.title],
 	icon: def.icon,
diff --git a/packages/client/src/menu.ts b/packages/client/src/menu.ts
deleted file mode 100644
index 31b2ed597c..0000000000
--- a/packages/client/src/menu.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-import { computed, ref, reactive } from 'vue';
-import { $i } from './account';
-import { search } from '@/scripts/search';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { ui } from '@/config';
-import { unisonReload } from '@/scripts/unison-reload';
-
-export const menuDef = reactive({
-	notifications: {
-		title: 'notifications',
-		icon: 'fas fa-bell',
-		show: computed(() => $i != null),
-		indicated: computed(() => $i != null && $i.hasUnreadNotification),
-		to: '/my/notifications',
-	},
-	messaging: {
-		title: 'messaging',
-		icon: 'fas fa-comments',
-		show: computed(() => $i != null),
-		indicated: computed(() => $i != null && $i.hasUnreadMessagingMessage),
-		to: '/my/messaging',
-	},
-	drive: {
-		title: 'drive',
-		icon: 'fas fa-cloud',
-		show: computed(() => $i != null),
-		to: '/my/drive',
-	},
-	followRequests: {
-		title: 'followRequests',
-		icon: 'fas fa-user-clock',
-		show: computed(() => $i != null && $i.isLocked),
-		indicated: computed(() => $i != null && $i.hasPendingReceivedFollowRequest),
-		to: '/my/follow-requests',
-	},
-	explore: {
-		title: 'explore',
-		icon: 'fas fa-hashtag',
-		to: '/explore',
-	},
-	announcements: {
-		title: 'announcements',
-		icon: 'fas fa-broadcast-tower',
-		indicated: computed(() => $i != null && $i.hasUnreadAnnouncement),
-		to: '/announcements',
-	},
-	search: {
-		title: 'search',
-		icon: 'fas fa-search',
-		action: () => search(),
-	},
-	lists: {
-		title: 'lists',
-		icon: 'fas fa-list-ul',
-		show: computed(() => $i != null),
-		to: '/my/lists',
-	},
-	/*
-	groups: {
-		title: 'groups',
-		icon: 'fas fa-users',
-		show: computed(() => $i != null),
-		to: '/my/groups',
-	},
-	*/
-	antennas: {
-		title: 'antennas',
-		icon: 'fas fa-satellite',
-		show: computed(() => $i != null),
-		to: '/my/antennas',
-	},
-	favorites: {
-		title: 'favorites',
-		icon: 'fas fa-star',
-		show: computed(() => $i != null),
-		to: '/my/favorites',
-	},
-	pages: {
-		title: 'pages',
-		icon: 'fas fa-file-alt',
-		to: '/pages',
-	},
-	gallery: {
-		title: 'gallery',
-		icon: 'fas fa-icons',
-		to: '/gallery',
-	},
-	clips: {
-		title: 'clip',
-		icon: 'fas fa-paperclip',
-		show: computed(() => $i != null),
-		to: '/my/clips',
-	},
-	channels: {
-		title: 'channel',
-		icon: 'fas fa-satellite-dish',
-		to: '/channels',
-	},
-	ui: {
-		title: 'switchUi',
-		icon: 'fas fa-columns',
-		action: (ev) => {
-			os.popupMenu([{
-				text: i18n.ts.default,
-				active: ui === 'default' || ui === null,
-				action: () => {
-					localStorage.setItem('ui', 'default');
-					unisonReload();
-				},
-			}, {
-				text: i18n.ts.deck,
-				active: ui === 'deck',
-				action: () => {
-					localStorage.setItem('ui', 'deck');
-					unisonReload();
-				},
-			}, {
-				text: i18n.ts.classic,
-				active: ui === 'classic',
-				action: () => {
-					localStorage.setItem('ui', 'classic');
-					unisonReload();
-				},
-			}], ev.currentTarget ?? ev.target);
-		},
-	},
-	reload: {
-		title: 'reload',
-		icon: 'fas fa-refresh',
-		action: (ev) => {
-			location.reload();
-		},
-	},
-});
diff --git a/packages/client/src/navbar.ts b/packages/client/src/navbar.ts
new file mode 100644
index 0000000000..03e00b1c17
--- /dev/null
+++ b/packages/client/src/navbar.ts
@@ -0,0 +1,135 @@
+import { computed, ref, reactive } from 'vue';
+import { $i } from './account';
+import { search } from '@/scripts/search';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { ui } from '@/config';
+import { unisonReload } from '@/scripts/unison-reload';
+
+export const navbarItemDef = reactive({
+	notifications: {
+		title: 'notifications',
+		icon: 'fas fa-bell',
+		show: computed(() => $i != null),
+		indicated: computed(() => $i != null && $i.hasUnreadNotification),
+		to: '/my/notifications',
+	},
+	messaging: {
+		title: 'messaging',
+		icon: 'fas fa-comments',
+		show: computed(() => $i != null),
+		indicated: computed(() => $i != null && $i.hasUnreadMessagingMessage),
+		to: '/my/messaging',
+	},
+	drive: {
+		title: 'drive',
+		icon: 'fas fa-cloud',
+		show: computed(() => $i != null),
+		to: '/my/drive',
+	},
+	followRequests: {
+		title: 'followRequests',
+		icon: 'fas fa-user-clock',
+		show: computed(() => $i != null && $i.isLocked),
+		indicated: computed(() => $i != null && $i.hasPendingReceivedFollowRequest),
+		to: '/my/follow-requests',
+	},
+	explore: {
+		title: 'explore',
+		icon: 'fas fa-hashtag',
+		to: '/explore',
+	},
+	announcements: {
+		title: 'announcements',
+		icon: 'fas fa-broadcast-tower',
+		indicated: computed(() => $i != null && $i.hasUnreadAnnouncement),
+		to: '/announcements',
+	},
+	search: {
+		title: 'search',
+		icon: 'fas fa-search',
+		action: () => search(),
+	},
+	lists: {
+		title: 'lists',
+		icon: 'fas fa-list-ul',
+		show: computed(() => $i != null),
+		to: '/my/lists',
+	},
+	/*
+	groups: {
+		title: 'groups',
+		icon: 'fas fa-users',
+		show: computed(() => $i != null),
+		to: '/my/groups',
+	},
+	*/
+	antennas: {
+		title: 'antennas',
+		icon: 'fas fa-satellite',
+		show: computed(() => $i != null),
+		to: '/my/antennas',
+	},
+	favorites: {
+		title: 'favorites',
+		icon: 'fas fa-star',
+		show: computed(() => $i != null),
+		to: '/my/favorites',
+	},
+	pages: {
+		title: 'pages',
+		icon: 'fas fa-file-alt',
+		to: '/pages',
+	},
+	gallery: {
+		title: 'gallery',
+		icon: 'fas fa-icons',
+		to: '/gallery',
+	},
+	clips: {
+		title: 'clip',
+		icon: 'fas fa-paperclip',
+		show: computed(() => $i != null),
+		to: '/my/clips',
+	},
+	channels: {
+		title: 'channel',
+		icon: 'fas fa-satellite-dish',
+		to: '/channels',
+	},
+	ui: {
+		title: 'switchUi',
+		icon: 'fas fa-columns',
+		action: (ev) => {
+			os.popupMenu([{
+				text: i18n.ts.default,
+				active: ui === 'default' || ui === null,
+				action: () => {
+					localStorage.setItem('ui', 'default');
+					unisonReload();
+				},
+			}, {
+				text: i18n.ts.deck,
+				active: ui === 'deck',
+				action: () => {
+					localStorage.setItem('ui', 'deck');
+					unisonReload();
+				},
+			}, {
+				text: i18n.ts.classic,
+				active: ui === 'classic',
+				action: () => {
+					localStorage.setItem('ui', 'classic');
+					unisonReload();
+				},
+			}], ev.currentTarget ?? ev.target);
+		},
+	},
+	reload: {
+		title: 'reload',
+		icon: 'fas fa-refresh',
+		action: (ev) => {
+			location.reload();
+		},
+	},
+});
diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index 76410ec12f..f970660a4a 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -114,15 +114,15 @@ const menuDef = computed(() => [{
 		to: '/settings/theme',
 		active: props.initialPage === 'theme',
 	}, {
-		icon: 'fas fa-list-ul',
+		icon: 'fas fa-bars',
+		text: i18n.ts.navbar,
+		to: '/settings/navbar',
+		active: props.initialPage === 'navbar',
+	}, {
+		icon: 'fas fa-bars-progress',
 		text: i18n.ts.statusbar,
 		to: '/settings/statusbars',
 		active: props.initialPage === 'statusbars',
-	}, {
-		icon: 'fas fa-list-ul',
-		text: i18n.ts.menu,
-		to: '/settings/menu',
-		active: props.initialPage === 'menu',
 	}, {
 		icon: 'fas fa-music',
 		text: i18n.ts.sounds,
@@ -225,7 +225,7 @@ const component = computed(() => {
 		case 'theme': return defineAsyncComponent(() => import('./theme.vue'));
 		case 'theme/install': return defineAsyncComponent(() => import('./theme.install.vue'));
 		case 'theme/manage': return defineAsyncComponent(() => import('./theme.manage.vue'));
-		case 'menu': return defineAsyncComponent(() => import('./menu.vue'));
+		case 'navbar': return defineAsyncComponent(() => import('./navbar.vue'));
 		case 'statusbars': return defineAsyncComponent(() => import('./statusbars.vue'));
 		case 'sounds': return defineAsyncComponent(() => import('./sounds.vue'));
 		case 'custom-css': return defineAsyncComponent(() => import('./custom-css.vue'));
@@ -291,6 +291,8 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => []);
 
 definePageMetadata(INFO);
+// w 890
+// h 700
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/pages/settings/menu.vue b/packages/client/src/pages/settings/menu.vue
deleted file mode 100644
index 076654c105..0000000000
--- a/packages/client/src/pages/settings/menu.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormTextarea v-model="items" tall manual-save class="_formBlock">
-		<template #label>{{ i18n.ts.menu }}</template>
-		<template #caption><button class="_textButton" @click="addItem">{{ i18n.ts.addItem }}</button></template>
-	</FormTextarea>
-
-	<FormRadios v-model="menuDisplay" class="_formBlock">
-		<template #label>{{ i18n.ts.display }}</template>
-		<option value="sideFull">{{ i18n.ts._menuDisplay.sideFull }}</option>
-		<option value="sideIcon">{{ i18n.ts._menuDisplay.sideIcon }}</option>
-		<option value="top">{{ i18n.ts._menuDisplay.top }}</option>
-		<!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ i18n.ts._menuDisplay.hide }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
-	</FormRadios>
-
-	<FormButton danger class="_formBlock" @click="reset()"><i class="fas fa-redo"></i> {{ i18n.ts.default }}</FormButton>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormRadios from '@/components/form/radios.vue';
-import FormButton from '@/components/ui/button.vue';
-import * as os from '@/os';
-import { menuDef } from '@/menu';
-import { defaultStore } from '@/store';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const items = ref(defaultStore.state.menu.join('\n'));
-
-const split = computed(() => items.value.trim().split('\n').filter(x => x.trim() !== ''));
-const menuDisplay = computed(defaultStore.makeGetterSetter('menuDisplay'));
-
-async function reloadAsk() {
-	const { canceled } = await os.confirm({
-		type: 'info',
-		text: i18n.ts.reloadToApplySetting,
-	});
-	if (canceled) return;
-
-	unisonReload();
-}
-
-async function addItem() {
-	const menu = Object.keys(menuDef).filter(k => !defaultStore.state.menu.includes(k));
-	const { canceled, result: item } = await os.select({
-		title: i18n.ts.addItem,
-		items: [...menu.map(k => ({
-			value: k, text: i18n.ts[menuDef[k].title],
-		})), {
-			value: '-', text: i18n.ts.divider,
-		}],
-	});
-	if (canceled) return;
-	items.value = [...split.value, item].join('\n');
-}
-
-async function save() {
-	defaultStore.set('menu', split.value);
-	await reloadAsk();
-}
-
-function reset() {
-	defaultStore.reset('menu');
-	items.value = defaultStore.state.menu.join('\n');
-}
-
-watch(items, async () => {
-	await save();
-});
-
-watch(menuDisplay, async () => {
-	await reloadAsk();
-});
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.menu,
-	icon: 'fas fa-list-ul',
-});
-</script>
diff --git a/packages/client/src/pages/settings/navbar.vue b/packages/client/src/pages/settings/navbar.vue
new file mode 100644
index 0000000000..534112c3e0
--- /dev/null
+++ b/packages/client/src/pages/settings/navbar.vue
@@ -0,0 +1,87 @@
+<template>
+<div class="_formRoot">
+	<FormTextarea v-model="items" tall manual-save class="_formBlock">
+		<template #label>{{ i18n.ts.navbar }}</template>
+		<template #caption><button class="_textButton" @click="addItem">{{ i18n.ts.addItem }}</button></template>
+	</FormTextarea>
+
+	<FormRadios v-model="menuDisplay" class="_formBlock">
+		<template #label>{{ i18n.ts.display }}</template>
+		<option value="sideFull">{{ i18n.ts._menuDisplay.sideFull }}</option>
+		<option value="sideIcon">{{ i18n.ts._menuDisplay.sideIcon }}</option>
+		<option value="top">{{ i18n.ts._menuDisplay.top }}</option>
+		<!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ i18n.ts._menuDisplay.hide }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
+	</FormRadios>
+
+	<FormButton danger class="_formBlock" @click="reset()"><i class="fas fa-redo"></i> {{ i18n.ts.default }}</FormButton>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+import FormTextarea from '@/components/form/textarea.vue';
+import FormRadios from '@/components/form/radios.vue';
+import FormButton from '@/components/ui/button.vue';
+import * as os from '@/os';
+import { navbarItemDef } from '@/navbar';
+import { defaultStore } from '@/store';
+import { unisonReload } from '@/scripts/unison-reload';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const items = ref(defaultStore.state.menu.join('\n'));
+
+const split = computed(() => items.value.trim().split('\n').filter(x => x.trim() !== ''));
+const menuDisplay = computed(defaultStore.makeGetterSetter('menuDisplay'));
+
+async function reloadAsk() {
+	const { canceled } = await os.confirm({
+		type: 'info',
+		text: i18n.ts.reloadToApplySetting,
+	});
+	if (canceled) return;
+
+	unisonReload();
+}
+
+async function addItem() {
+	const menu = Object.keys(navbarItemDef).filter(k => !defaultStore.state.menu.includes(k));
+	const { canceled, result: item } = await os.select({
+		title: i18n.ts.addItem,
+		items: [...menu.map(k => ({
+			value: k, text: i18n.ts[navbarItemDef[k].title],
+		})), {
+			value: '-', text: i18n.ts.divider,
+		}],
+	});
+	if (canceled) return;
+	items.value = [...split.value, item].join('\n');
+}
+
+async function save() {
+	defaultStore.set('menu', split.value);
+	await reloadAsk();
+}
+
+function reset() {
+	defaultStore.reset('menu');
+	items.value = defaultStore.state.menu.join('\n');
+}
+
+watch(items, async () => {
+	await save();
+});
+
+watch(menuDisplay, async () => {
+	await reloadAsk();
+});
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.navbar,
+	icon: 'fas fa-list-ul',
+});
+</script>
diff --git a/packages/client/src/pages/settings/statusbars.statusbar.vue b/packages/client/src/pages/settings/statusbars.statusbar.vue
index 206979925e..e19690209a 100644
--- a/packages/client/src/pages/settings/statusbars.statusbar.vue
+++ b/packages/client/src/pages/settings/statusbars.statusbar.vue
@@ -86,7 +86,6 @@ import FormRadios from '@/components/form/radios.vue';
 import FormButton from '@/components/ui/button.vue';
 import FormRange from '@/components/form/range.vue';
 import * as os from '@/os';
-import { menuDef } from '@/menu';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
 
diff --git a/packages/client/src/ui/_common_/navbar-for-mobile.vue b/packages/client/src/ui/_common_/navbar-for-mobile.vue
new file mode 100644
index 0000000000..8ac4c1150a
--- /dev/null
+++ b/packages/client/src/ui/_common_/navbar-for-mobile.vue
@@ -0,0 +1,209 @@
+<template>
+<div class="kmwsukvl">
+	<div class="body">
+		<button v-click-anime class="item _button account" @click="openAccountMenu">
+			<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
+		</button>
+		<MkA v-click-anime class="item index" active-class="active" to="/" exact>
+			<i class="icon fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
+		</MkA>
+		<template v-for="item in menu">
+			<div v-if="item === '-'" class="divider"></div>
+			<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: navbarItemDef[item].active }]" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
+				<i class="icon fa-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ $ts[navbarItemDef[item].title] }}</span>
+				<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon fas fa-circle"></i></span>
+			</component>
+		</template>
+		<div class="divider"></div>
+		<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin">
+			<i class="icon fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
+		</MkA>
+		<button v-click-anime class="item _button" @click="more">
+			<i class="icon fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
+			<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon fas fa-circle"></i></span>
+		</button>
+		<MkA v-click-anime class="item" active-class="active" to="/settings">
+			<i class="icon fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
+		</MkA>
+		<button class="item _button post" data-cy-open-post-form @click="post">
+			<i class="icon fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
+		</button>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { computed, defineAsyncComponent, defineComponent, ref, toRef, watch } from 'vue';
+import { host } from '@/config';
+import { search } from '@/scripts/search';
+import * as os from '@/os';
+import { navbarItemDef } from '@/navbar';
+import { openAccountMenu } from '@/account';
+import { defaultStore } from '@/store';
+
+export default defineComponent({
+	setup(props, context) {
+		const menu = toRef(defaultStore.state, 'menu');
+		const otherMenuItemIndicated = computed(() => {
+			for (const def in navbarItemDef) {
+				if (menu.value.includes(def)) continue;
+				if (navbarItemDef[def].indicated) return true;
+			}
+			return false;
+		});
+
+		return {
+			host: host,
+			accounts: [],
+			connection: null,
+			menu,
+			navbarItemDef: navbarItemDef,
+			otherMenuItemIndicated,
+			post: os.post,
+			search,
+			openAccountMenu: (ev) => {
+				openAccountMenu({
+					withExtraOperation: true,
+				}, ev);
+			},
+			more: () => {
+				os.popup(defineAsyncComponent(() => import('@/components/launch-pad.vue')), {}, {
+				}, 'closed');
+			},
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.kmwsukvl {
+	$ui-font-size: 1em; // TODO: どこかに集約したい
+	$avatar-size: 32px;
+	$avatar-margin: 8px;
+
+	> .body {
+
+		> .divider {
+			margin: 16px 16px;
+			border-top: solid 0.5px var(--divider);
+		}
+
+		> .item {
+			position: relative;
+			display: block;
+			padding-left: 24px;
+			font-size: $ui-font-size;
+			line-height: 2.85rem;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			white-space: nowrap;
+			width: 100%;
+			text-align: left;
+			box-sizing: border-box;
+			color: var(--navFg);
+
+			> .icon {
+				position: relative;
+				width: 32px;
+			}
+
+			> .icon,
+			> .avatar {
+				margin-right: $avatar-margin;
+			}
+
+			> .avatar {
+				width: $avatar-size;
+				height: $avatar-size;
+				vertical-align: middle;
+			}
+
+			> .indicator {
+				position: absolute;
+				top: 0;
+				left: 20px;
+				color: var(--navIndicator);
+				font-size: 8px;
+				animation: blink 1s infinite;
+			}
+
+			> .text {
+				position: relative;
+				font-size: 0.9em;
+			}
+
+			&:hover {
+				text-decoration: none;
+				color: var(--navHoverFg);
+			}
+
+			&.active {
+				color: var(--navActive);
+			}
+
+			&:hover, &.active {
+				&:before {
+					content: "";
+					display: block;
+					width: calc(100% - 24px);
+					height: 100%;
+					margin: auto;
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					border-radius: 999px;
+					background: var(--accentedBg);
+				}
+			}
+
+			&:first-child, &:last-child {
+				position: sticky;
+				z-index: 1;
+				padding-top: 8px;
+				padding-bottom: 8px;
+				background: var(--X14);
+				-webkit-backdrop-filter: var(--blur, blur(8px));
+				backdrop-filter: var(--blur, blur(8px));
+			}
+
+			&:first-child {
+				top: 0;
+
+				&:hover, &.active {
+					&:before {
+						content: none;
+					}
+				}
+			}
+
+			&:last-child {
+				bottom: 0;
+				color: var(--fgOnAccent);
+
+				&:before {
+					content: "";
+					display: block;
+					width: calc(100% - 20px);
+					height: calc(100% - 20px);
+					margin: auto;
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					border-radius: 999px;
+					background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+				}
+				
+				&:hover, &.active {
+					&:before {
+						background: var(--accentLighten);
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
new file mode 100644
index 0000000000..4fb3980142
--- /dev/null
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -0,0 +1,303 @@
+<template>
+<div class="mvcprjjd" :class="{ iconOnly }">
+	<div class="body">
+		<button v-click-anime class="item _button account" @click="openAccountMenu">
+			<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
+		</button>
+		<MkA v-click-anime class="item index" active-class="active" to="/" exact>
+			<i class="icon fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
+		</MkA>
+		<template v-for="item in menu">
+			<div v-if="item === '-'" class="divider"></div>
+			<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: navbarItemDef[item].active }]" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
+				<i class="icon fa-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ $ts[navbarItemDef[item].title] }}</span>
+				<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon fas fa-circle"></i></span>
+			</component>
+		</template>
+		<div class="divider"></div>
+		<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin">
+			<i class="icon fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
+		</MkA>
+		<button v-click-anime class="item _button" @click="more">
+			<i class="icon fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
+			<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon fas fa-circle"></i></span>
+		</button>
+		<MkA v-click-anime class="item" active-class="active" to="/settings">
+			<i class="icon fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
+		</MkA>
+		<button class="item _button post" data-cy-open-post-form @click="os.post">
+			<i class="icon fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
+		</button>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineAsyncComponent, ref, watch } from 'vue';
+import * as os from '@/os';
+import { navbarItemDef } from '@/navbar';
+import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
+import { defaultStore } from '@/store';
+
+const iconOnly = ref(false);
+
+const menu = computed(() => defaultStore.state.menu);
+const otherMenuItemIndicated = computed(() => {
+	for (const def in navbarItemDef) {
+		if (menu.value.includes(def)) continue;
+		if (navbarItemDef[def].indicated) return true;
+	}
+	return false;
+});
+
+const calcViewState = () => {
+	iconOnly.value = (window.innerWidth <= 1279) || (defaultStore.state.menuDisplay === 'sideIcon');
+};
+
+calcViewState();
+
+window.addEventListener('resize', calcViewState);
+
+watch(defaultStore.reactiveState.menuDisplay, () => {
+	calcViewState();
+});
+
+function openAccountMenu(ev: MouseEvent) {
+	openAccountMenu_({
+		withExtraOperation: true,
+	}, ev);
+}
+
+function more(ev: MouseEvent) {
+	os.popup(defineAsyncComponent(() => import('@/components/launch-pad.vue')), {
+		src: ev.currentTarget ?? ev.target,
+	}, {
+	}, 'closed');
+}
+</script>
+
+<style lang="scss" scoped>
+.mvcprjjd {
+	$ui-font-size: 1em; // TODO: どこかに集約したい
+	$nav-width: 250px;
+	$nav-icon-only-width: 86px;
+	$avatar-size: 32px;
+	$avatar-margin: 8px;
+
+	flex: 0 0 $nav-width;
+	width: $nav-width;
+	box-sizing: border-box;
+
+	> .body {
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 1001;
+		width: $nav-width;
+		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+		height: calc(var(--vh, 1vh) * 100);
+		box-sizing: border-box;
+		overflow: auto;
+		overflow-x: clip;
+		background: var(--navBg);
+		contain: strict;
+
+		> .divider {
+			margin: 16px 16px;
+			border-top: solid 0.5px var(--divider);
+		}
+
+		> .item {
+			position: relative;
+			display: block;
+			padding-left: 24px;
+			font-size: $ui-font-size;
+			line-height: 2.85rem;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			white-space: nowrap;
+			width: 100%;
+			text-align: left;
+			box-sizing: border-box;
+			color: var(--navFg);
+
+			> .icon {
+				position: relative;
+				width: 32px;
+			}
+
+			> .icon,
+			> .avatar {
+				margin-right: $avatar-margin;
+			}
+
+			> .avatar {
+				width: $avatar-size;
+				height: $avatar-size;
+				vertical-align: middle;
+			}
+
+			> .indicator {
+				position: absolute;
+				top: 0;
+				left: 20px;
+				color: var(--navIndicator);
+				font-size: 8px;
+				animation: blink 1s infinite;
+			}
+
+			> .text {
+				position: relative;
+				font-size: 0.9em;
+			}
+
+			&:hover {
+				text-decoration: none;
+				color: var(--navHoverFg);
+			}
+
+			&.active {
+				color: var(--navActive);
+			}
+
+			&:hover, &.active {
+				color: var(--accent);
+
+				&:before {
+					content: "";
+					display: block;
+					width: calc(100% - 24px);
+					height: 100%;
+					margin: auto;
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					border-radius: 999px;
+					background: var(--accentedBg);
+				}
+			}
+
+			&:first-child, &:last-child {
+				position: sticky;
+				z-index: 1;
+				padding-top: 8px;
+				padding-bottom: 8px;
+				background: var(--X14);
+				-webkit-backdrop-filter: var(--blur, blur(8px));
+				backdrop-filter: var(--blur, blur(8px));
+			}
+
+			&:first-child {
+				top: 0;
+
+				&:hover, &.active {
+					&:before {
+						content: none;
+					}
+				}
+			}
+
+			&:last-child {
+				bottom: 0;
+				color: var(--fgOnAccent);
+
+				&:before {
+					content: "";
+					display: block;
+					width: calc(100% - 20px);
+					height: calc(100% - 20px);
+					margin: auto;
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					border-radius: 999px;
+					background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+				}
+				
+				&:hover, &.active {
+					&:before {
+						background: var(--accentLighten);
+					}
+				}
+			}
+		}
+	}
+
+	&.iconOnly {
+		flex: 0 0 $nav-icon-only-width;
+		width: $nav-icon-only-width;
+
+		> .body {
+			width: $nav-icon-only-width;
+
+			> .divider {
+				margin: 8px auto;
+				width: calc(100% - 32px);
+			}
+
+			> .item {
+				padding-left: 0;
+				padding: 18px 0;
+				width: 100%;
+				text-align: center;
+				font-size: $ui-font-size;
+				line-height: initial;
+
+				> .icon,
+				> .avatar {
+					display: block;
+					margin: 0 auto;
+				}
+
+				> .icon {
+					opacity: 0.7;
+				}
+
+				> .text {
+					display: none;
+				}
+
+				&:hover, &.active {
+					> .icon, > .text {
+						opacity: 1;
+					}
+				}
+
+				&:first-child {
+					margin-bottom: 8px;
+				}
+
+				&:last-child {
+					margin-top: 8px;
+				}
+
+				&:before {
+					width: min-content;
+					height: 100%;
+					aspect-ratio: 1/1;
+					border-radius: 8px;
+				}
+
+				&.post {
+					height: $nav-icon-only-width;
+
+					> .icon {
+						opacity: 1;
+					}
+				}
+
+				&.post:before {
+					width: calc(100% - 28px);
+					height: auto;
+					aspect-ratio: 1/1;
+					border-radius: 100%;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/client/src/ui/_common_/sidebar-for-mobile.vue b/packages/client/src/ui/_common_/sidebar-for-mobile.vue
deleted file mode 100644
index e789ae5e06..0000000000
--- a/packages/client/src/ui/_common_/sidebar-for-mobile.vue
+++ /dev/null
@@ -1,209 +0,0 @@
-<template>
-<div class="kmwsukvl">
-	<div class="body">
-		<button v-click-anime class="item _button account" @click="openAccountMenu">
-			<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
-		</button>
-		<MkA v-click-anime class="item index" active-class="active" to="/" exact>
-			<i class="icon fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
-		</MkA>
-		<template v-for="item in menu">
-			<div v-if="item === '-'" class="divider"></div>
-			<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
-				<i class="icon fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
-				<span v-if="menuDef[item].indicated" class="indicator"><i class="icon fas fa-circle"></i></span>
-			</component>
-		</template>
-		<div class="divider"></div>
-		<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin">
-			<i class="icon fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
-		</MkA>
-		<button v-click-anime class="item _button" @click="more">
-			<i class="icon fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
-			<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon fas fa-circle"></i></span>
-		</button>
-		<MkA v-click-anime class="item" active-class="active" to="/settings">
-			<i class="icon fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
-		</MkA>
-		<button class="item _button post" data-cy-open-post-form @click="post">
-			<i class="icon fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
-		</button>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { computed, defineAsyncComponent, defineComponent, ref, toRef, watch } from 'vue';
-import { host } from '@/config';
-import { search } from '@/scripts/search';
-import * as os from '@/os';
-import { menuDef } from '@/menu';
-import { openAccountMenu } from '@/account';
-import { defaultStore } from '@/store';
-
-export default defineComponent({
-	setup(props, context) {
-		const menu = toRef(defaultStore.state, 'menu');
-		const otherMenuItemIndicated = computed(() => {
-			for (const def in menuDef) {
-				if (menu.value.includes(def)) continue;
-				if (menuDef[def].indicated) return true;
-			}
-			return false;
-		});
-
-		return {
-			host: host,
-			accounts: [],
-			connection: null,
-			menu,
-			menuDef: menuDef,
-			otherMenuItemIndicated,
-			post: os.post,
-			search,
-			openAccountMenu: (ev) => {
-				openAccountMenu({
-					withExtraOperation: true,
-				}, ev);
-			},
-			more: () => {
-				os.popup(defineAsyncComponent(() => import('@/components/launch-pad.vue')), {}, {
-				}, 'closed');
-			},
-		};
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.kmwsukvl {
-	$ui-font-size: 1em; // TODO: どこかに集約したい
-	$avatar-size: 32px;
-	$avatar-margin: 8px;
-
-	> .body {
-
-		> .divider {
-			margin: 16px 16px;
-			border-top: solid 0.5px var(--divider);
-		}
-
-		> .item {
-			position: relative;
-			display: block;
-			padding-left: 24px;
-			font-size: $ui-font-size;
-			line-height: 2.85rem;
-			text-overflow: ellipsis;
-			overflow: hidden;
-			white-space: nowrap;
-			width: 100%;
-			text-align: left;
-			box-sizing: border-box;
-			color: var(--navFg);
-
-			> .icon {
-				position: relative;
-				width: 32px;
-			}
-
-			> .icon,
-			> .avatar {
-				margin-right: $avatar-margin;
-			}
-
-			> .avatar {
-				width: $avatar-size;
-				height: $avatar-size;
-				vertical-align: middle;
-			}
-
-			> .indicator {
-				position: absolute;
-				top: 0;
-				left: 20px;
-				color: var(--navIndicator);
-				font-size: 8px;
-				animation: blink 1s infinite;
-			}
-
-			> .text {
-				position: relative;
-				font-size: 0.9em;
-			}
-
-			&:hover {
-				text-decoration: none;
-				color: var(--navHoverFg);
-			}
-
-			&.active {
-				color: var(--navActive);
-			}
-
-			&:hover, &.active {
-				&:before {
-					content: "";
-					display: block;
-					width: calc(100% - 24px);
-					height: 100%;
-					margin: auto;
-					position: absolute;
-					top: 0;
-					left: 0;
-					right: 0;
-					bottom: 0;
-					border-radius: 999px;
-					background: var(--accentedBg);
-				}
-			}
-
-			&:first-child, &:last-child {
-				position: sticky;
-				z-index: 1;
-				padding-top: 8px;
-				padding-bottom: 8px;
-				background: var(--X14);
-				-webkit-backdrop-filter: var(--blur, blur(8px));
-				backdrop-filter: var(--blur, blur(8px));
-			}
-
-			&:first-child {
-				top: 0;
-
-				&:hover, &.active {
-					&:before {
-						content: none;
-					}
-				}
-			}
-
-			&:last-child {
-				bottom: 0;
-				color: var(--fgOnAccent);
-
-				&:before {
-					content: "";
-					display: block;
-					width: calc(100% - 20px);
-					height: calc(100% - 20px);
-					margin: auto;
-					position: absolute;
-					top: 0;
-					left: 0;
-					right: 0;
-					bottom: 0;
-					border-radius: 999px;
-					background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
-				}
-				
-				&:hover, &.active {
-					&:before {
-						background: var(--accentLighten);
-					}
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/ui/_common_/sidebar.vue b/packages/client/src/ui/_common_/sidebar.vue
deleted file mode 100644
index f082af9aa8..0000000000
--- a/packages/client/src/ui/_common_/sidebar.vue
+++ /dev/null
@@ -1,303 +0,0 @@
-<template>
-<div class="mvcprjjd" :class="{ iconOnly }">
-	<div class="body">
-		<button v-click-anime class="item _button account" @click="openAccountMenu">
-			<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
-		</button>
-		<MkA v-click-anime class="item index" active-class="active" to="/" exact>
-			<i class="icon fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
-		</MkA>
-		<template v-for="item in menu">
-			<div v-if="item === '-'" class="divider"></div>
-			<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
-				<i class="icon fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
-				<span v-if="menuDef[item].indicated" class="indicator"><i class="icon fas fa-circle"></i></span>
-			</component>
-		</template>
-		<div class="divider"></div>
-		<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin">
-			<i class="icon fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
-		</MkA>
-		<button v-click-anime class="item _button" @click="more">
-			<i class="icon fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
-			<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon fas fa-circle"></i></span>
-		</button>
-		<MkA v-click-anime class="item" active-class="active" to="/settings">
-			<i class="icon fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
-		</MkA>
-		<button class="item _button post" data-cy-open-post-form @click="os.post">
-			<i class="icon fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
-		</button>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, defineAsyncComponent, ref, watch } from 'vue';
-import * as os from '@/os';
-import { menuDef } from '@/menu';
-import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
-import { defaultStore } from '@/store';
-
-const iconOnly = ref(false);
-
-const menu = computed(() => defaultStore.state.menu);
-const otherMenuItemIndicated = computed(() => {
-	for (const def in menuDef) {
-		if (menu.value.includes(def)) continue;
-		if (menuDef[def].indicated) return true;
-	}
-	return false;
-});
-
-const calcViewState = () => {
-	iconOnly.value = (window.innerWidth <= 1279) || (defaultStore.state.menuDisplay === 'sideIcon');
-};
-
-calcViewState();
-
-window.addEventListener('resize', calcViewState);
-
-watch(defaultStore.reactiveState.menuDisplay, () => {
-	calcViewState();
-});
-
-function openAccountMenu(ev: MouseEvent) {
-	openAccountMenu_({
-		withExtraOperation: true,
-	}, ev);
-}
-
-function more(ev: MouseEvent) {
-	os.popup(defineAsyncComponent(() => import('@/components/launch-pad.vue')), {
-		src: ev.currentTarget ?? ev.target,
-	}, {
-	}, 'closed');
-}
-</script>
-
-<style lang="scss" scoped>
-.mvcprjjd {
-	$ui-font-size: 1em; // TODO: どこかに集約したい
-	$nav-width: 250px;
-	$nav-icon-only-width: 86px;
-	$avatar-size: 32px;
-	$avatar-margin: 8px;
-
-	flex: 0 0 $nav-width;
-	width: $nav-width;
-	box-sizing: border-box;
-
-	> .body {
-		position: fixed;
-		top: 0;
-		left: 0;
-		z-index: 1001;
-		width: $nav-width;
-		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-		height: calc(var(--vh, 1vh) * 100);
-		box-sizing: border-box;
-		overflow: auto;
-		overflow-x: clip;
-		background: var(--navBg);
-		contain: strict;
-
-		> .divider {
-			margin: 16px 16px;
-			border-top: solid 0.5px var(--divider);
-		}
-
-		> .item {
-			position: relative;
-			display: block;
-			padding-left: 24px;
-			font-size: $ui-font-size;
-			line-height: 2.85rem;
-			text-overflow: ellipsis;
-			overflow: hidden;
-			white-space: nowrap;
-			width: 100%;
-			text-align: left;
-			box-sizing: border-box;
-			color: var(--navFg);
-
-			> .icon {
-				position: relative;
-				width: 32px;
-			}
-
-			> .icon,
-			> .avatar {
-				margin-right: $avatar-margin;
-			}
-
-			> .avatar {
-				width: $avatar-size;
-				height: $avatar-size;
-				vertical-align: middle;
-			}
-
-			> .indicator {
-				position: absolute;
-				top: 0;
-				left: 20px;
-				color: var(--navIndicator);
-				font-size: 8px;
-				animation: blink 1s infinite;
-			}
-
-			> .text {
-				position: relative;
-				font-size: 0.9em;
-			}
-
-			&:hover {
-				text-decoration: none;
-				color: var(--navHoverFg);
-			}
-
-			&.active {
-				color: var(--navActive);
-			}
-
-			&:hover, &.active {
-				color: var(--accent);
-
-				&:before {
-					content: "";
-					display: block;
-					width: calc(100% - 24px);
-					height: 100%;
-					margin: auto;
-					position: absolute;
-					top: 0;
-					left: 0;
-					right: 0;
-					bottom: 0;
-					border-radius: 999px;
-					background: var(--accentedBg);
-				}
-			}
-
-			&:first-child, &:last-child {
-				position: sticky;
-				z-index: 1;
-				padding-top: 8px;
-				padding-bottom: 8px;
-				background: var(--X14);
-				-webkit-backdrop-filter: var(--blur, blur(8px));
-				backdrop-filter: var(--blur, blur(8px));
-			}
-
-			&:first-child {
-				top: 0;
-
-				&:hover, &.active {
-					&:before {
-						content: none;
-					}
-				}
-			}
-
-			&:last-child {
-				bottom: 0;
-				color: var(--fgOnAccent);
-
-				&:before {
-					content: "";
-					display: block;
-					width: calc(100% - 20px);
-					height: calc(100% - 20px);
-					margin: auto;
-					position: absolute;
-					top: 0;
-					left: 0;
-					right: 0;
-					bottom: 0;
-					border-radius: 999px;
-					background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
-				}
-				
-				&:hover, &.active {
-					&:before {
-						background: var(--accentLighten);
-					}
-				}
-			}
-		}
-	}
-
-	&.iconOnly {
-		flex: 0 0 $nav-icon-only-width;
-		width: $nav-icon-only-width;
-
-		> .body {
-			width: $nav-icon-only-width;
-
-			> .divider {
-				margin: 8px auto;
-				width: calc(100% - 32px);
-			}
-
-			> .item {
-				padding-left: 0;
-				padding: 18px 0;
-				width: 100%;
-				text-align: center;
-				font-size: $ui-font-size;
-				line-height: initial;
-
-				> .icon,
-				> .avatar {
-					display: block;
-					margin: 0 auto;
-				}
-
-				> .icon {
-					opacity: 0.7;
-				}
-
-				> .text {
-					display: none;
-				}
-
-				&:hover, &.active {
-					> .icon, > .text {
-						opacity: 1;
-					}
-				}
-
-				&:first-child {
-					margin-bottom: 8px;
-				}
-
-				&:last-child {
-					margin-top: 8px;
-				}
-
-				&:before {
-					width: min-content;
-					height: 100%;
-					aspect-ratio: 1/1;
-					border-radius: 8px;
-				}
-
-				&.post {
-					height: $nav-icon-only-width;
-
-					> .icon {
-						opacity: 1;
-					}
-				}
-
-				&.post:before {
-					width: calc(100% - 28px);
-					height: auto;
-					aspect-ratio: 1/1;
-					border-radius: 100%;
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/ui/classic.header.vue b/packages/client/src/ui/classic.header.vue
index 57008aeaed..131767c0e3 100644
--- a/packages/client/src/ui/classic.header.vue
+++ b/packages/client/src/ui/classic.header.vue
@@ -7,9 +7,9 @@
 			</MkA>
 			<template v-for="item in menu">
 				<div v-if="item === '-'" class="divider"></div>
-				<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime v-tooltip="$ts[menuDef[item].title]" class="item _button" :class="item" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
-					<i class="fa-fw" :class="menuDef[item].icon"></i>
-					<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
+				<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime v-tooltip="$ts[navbarItemDef[item].title]" class="item _button" :class="item" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
+					<i class="fa-fw" :class="navbarItemDef[item].icon"></i>
+					<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
 				</component>
 			</template>
 			<div class="divider"></div>
@@ -43,7 +43,7 @@ import { defineAsyncComponent, defineComponent } from 'vue';
 import { host } from '@/config';
 import { search } from '@/scripts/search';
 import * as os from '@/os';
-import { menuDef } from '@/menu';
+import { navbarItemDef } from '@/navbar';
 import { openAccountMenu } from '@/account';
 import MkButton from '@/components/ui/button.vue';
 
@@ -57,7 +57,7 @@ export default defineComponent({
 			host: host,
 			accounts: [],
 			connection: null,
-			menuDef: menuDef,
+			navbarItemDef: navbarItemDef,
 			settingsWindowed: false,
 		};
 	},
@@ -68,9 +68,9 @@ export default defineComponent({
 		},
 
 		otherNavItemIndicated(): boolean {
-			for (const def in this.menuDef) {
+			for (const def in this.navbarItemDef) {
 				if (this.menu.includes(def)) continue;
-				if (this.menuDef[def].indicated) return true;
+				if (this.navbarItemDef[def].indicated) return true;
 			}
 			return false;
 		},
@@ -113,7 +113,7 @@ export default defineComponent({
 				withExtraOperation: true,
 			}, ev);
 		},
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/ui/classic.sidebar.vue b/packages/client/src/ui/classic.sidebar.vue
index 6c0ce023e4..172401f420 100644
--- a/packages/client/src/ui/classic.sidebar.vue
+++ b/packages/client/src/ui/classic.sidebar.vue
@@ -14,9 +14,9 @@
 	</MkA>
 	<template v-for="item in menu">
 		<div v-if="item === '-'" class="divider"></div>
-		<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime class="item _button" :class="item" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
-			<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
-			<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
+		<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="item" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
+			<i class="fa-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ $ts[navbarItemDef[item].title] }}</span>
+			<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
 		</component>
 	</template>
 	<div class="divider"></div>
@@ -45,7 +45,7 @@ import { defineAsyncComponent, defineComponent } from 'vue';
 import { host } from '@/config';
 import { search } from '@/scripts/search';
 import * as os from '@/os';
-import { menuDef } from '@/menu';
+import { navbarItemDef } from '@/navbar';
 import { openAccountMenu } from '@/account';
 import MkButton from '@/components/ui/button.vue';
 import { StickySidebar } from '@/scripts/sticky-sidebar';
@@ -62,7 +62,7 @@ export default defineComponent({
 			host: host,
 			accounts: [],
 			connection: null,
-			menuDef: menuDef,
+			navbarItemDef: navbarItemDef,
 			iconOnly: false,
 			settingsWindowed: false,
 		};
@@ -74,9 +74,9 @@ export default defineComponent({
 		},
 
 		otherNavItemIndicated(): boolean {
-			for (const def in this.menuDef) {
+			for (const def in this.navbarItemDef) {
 				if (this.menu.includes(def)) continue;
-				if (this.menuDef[def].indicated) return true;
+				if (this.navbarItemDef[def].indicated) return true;
 			}
 			return false;
 		},
@@ -131,7 +131,7 @@ export default defineComponent({
 				withExtraOperation: true,
 			}, ev);
 		},
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/ui/classic.vue b/packages/client/src/ui/classic.vue
index 70db7ed12b..c42407f5b0 100644
--- a/packages/client/src/ui/classic.vue
+++ b/packages/client/src/ui/classic.vue
@@ -47,7 +47,6 @@ import XCommon from './_common_/common.vue';
 import { instanceName } from '@/config';
 import { StickySidebar } from '@/scripts/sticky-sidebar';
 import * as os from '@/os';
-import { menuDef } from '@/menu';
 import { mainRouter } from '@/router';
 import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
 import { defaultStore } from '@/store';
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index 19a99a95aa..f330c99814 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -69,12 +69,12 @@ import { v4 as uuid } from 'uuid';
 import XCommon from './_common_/common.vue';
 import { deckStore, addColumn as addColumnToStore, loadDeck } from './deck/deck-store';
 import DeckColumnCore from '@/ui/deck/column-core.vue';
-import XSidebar from '@/ui/_common_/sidebar.vue';
-import XDrawerMenu from '@/ui/_common_/sidebar-for-mobile.vue';
+import XSidebar from '@/ui/_common_/navbar.vue';
+import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
 import MkButton from '@/components/ui/button.vue';
 import { getScrollContainer } from '@/scripts/scroll';
 import * as os from '@/os';
-import { menuDef } from '@/menu';
+import { navbarItemDef } from '@/navbar';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';
 import { mainRouter } from '@/router';
@@ -105,8 +105,8 @@ const columns = deckStore.reactiveState.columns;
 const layout = deckStore.reactiveState.layout;
 const menuIndicated = computed(() => {
 	if ($i == null) return false;
-	for (const def in menuDef) {
-		if (menuDef[def].indicated) return true;
+	for (const def in navbarItemDef) {
+		if (navbarItemDef[def].indicated) return true;
 	}
 	return false;
 });
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 2edfb3f12d..fe4fc425cd 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -61,17 +61,17 @@ import { defineAsyncComponent, provide, onMounted, computed, ref, watch, Compute
 import XCommon from './_common_/common.vue';
 import { instanceName } from '@/config';
 import { StickySidebar } from '@/scripts/sticky-sidebar';
-import XDrawerMenu from '@/ui/_common_/sidebar-for-mobile.vue';
+import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
 import * as os from '@/os';
 import { defaultStore } from '@/store';
-import { menuDef } from '@/menu';
+import { navbarItemDef } from '@/navbar';
 import { i18n } from '@/i18n';
 import { $i } from '@/account';
 import { Router } from '@/nirax';
 import { mainRouter } from '@/router';
 import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
 const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
-const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/sidebar.vue'));
+const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
 const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
 
 const DESKTOP_THRESHOLD = 1100;
@@ -97,9 +97,9 @@ provideMetadataReceiver((info) => {
 });
 
 const menuIndicated = computed(() => {
-	for (const def in menuDef) {
+	for (const def in navbarItemDef) {
 		if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
-		if (menuDef[def].indicated) return true;
+		if (navbarItemDef[def].indicated) return true;
 	}
 	return false;
 });
-- 
cgit v1.2.3-freya