client: refactor sidebar-for-mobile.vue to composition api

packages/client/src/ui/_common_/sidebar-for-mobile.vue

@@ -1,13 +1,13 @@
 <template>
 <div class="kmwsukvl">
 	<div>
-		<button v-click-anime class="item _button account" @click="openAccountMenu">
+		<button v-click-anime class="item _button account" @click="openAccountMenuWrapper">
 			<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="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
 		</MkA>
-		<template v-for="item in menu">
+		<template v-for="item in menu" :key="item">
 			<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="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
@@ -15,7 +15,7 @@
 			</component>
 		</template>
 		<div class="divider"></div>
-		<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin">
+		<MkA v-if="iAmModerator" v-click-anime class="item" active-class="active" to="/admin">
 			<i class="fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
 		</MkA>
 		<button v-click-anime class="item _button" @click="more">
@@ -32,47 +32,32 @@
 </div>
 </template>
 
-<script lang="ts">
-import { computed, defineAsyncComponent, defineComponent, ref, toRef, watch } from 'vue';
-import { host } from '@/config';
-import { search } from '@/scripts/search';
+<script lang="ts" setup>
+import { defineAsyncComponent, toRef } from 'vue';
 import * as os from '@/os';
 import { menuDef } from '@/menu';
-import { openAccountMenu } from '@/account';
+import { openAccountMenu, $i, iAmModerator } 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,
-			accounts: [],
-			connection: null,
-			menu,
-			menuDef,
-			otherMenuItemIndicated,
-			post: os.post,
-			search,
-			openAccountMenu: (ev) => {
-				openAccountMenu({
-					withExtraOperation: true,
-				}, ev);
-			},
-			more: () => {
-				os.popup(defineAsyncComponent(() => import('@/components/launch-pad.vue')), {}, {
-				}, 'closed');
-			},
-		};
-	},
+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;
 });
+const post = $ref(os.post);
+
+function openAccountMenuWrapper(ev: MouseEvent): void {
+	openAccountMenu({
+		withExtraOperation: true,
+	}, ev);
+}
+
+function more(): void {
+	os.popup(defineAsyncComponent(() => import('@/components/launch-pad.vue')), {}, {}, 'closed');
+}
 </script>
 
 <style lang="scss" scoped>