refactor(client): use css modules

packages/frontend/src/ui/deck.vue

@@ -52,7 +52,12 @@
 		<button :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
 	</div>
 
-	<Transition :name="$store.state.animation ? 'menu-back' : ''">
+	<Transition
+		:enter-active-class="$store.state.animation ? $style.transition_menuDrawerBg_enterActive : ''"
+		:leave-active-class="$store.state.animation ? $style.transition_menuDrawerBg_leaveActive : ''"
+		:enter-from-class="$store.state.animation ? $style.transition_menuDrawerBg_enterFrom : ''"
+		:leave-to-class="$store.state.animation ? $style.transition_menuDrawerBg_leaveTo : ''"
+	>
 		<div
 			v-if="drawerMenuShowing"
 			:class="$style.menuBg"
@@ -62,8 +67,15 @@
 		></div>
 	</Transition>
 
-	<Transition :name="$store.state.animation ? 'menu' : ''">
-		<XDrawerMenu v-if="drawerMenuShowing" class="menu"/>
+	<Transition
+		:enter-active-class="$store.state.animation ? $style.transition_menuDrawer_enterActive : ''"
+		:leave-active-class="$store.state.animation ? $style.transition_menuDrawer_leaveActive : ''"
+		:enter-from-class="$store.state.animation ? $style.transition_menuDrawer_enterFrom : ''"
+		:leave-to-class="$store.state.animation ? $style.transition_menuDrawer_leaveTo : ''"
+	>
+		<div v-if="drawerMenuShowing" :class="$style.menu">
+			<XDrawerMenu/>
+		</div>
 	</Transition>
 
 	<XCommon/>
@@ -222,31 +234,29 @@ async function deleteProfile() {
 }
 </script>
 
-<style lang="scss" scoped>
-.menu-enter-active,
-.menu-leave-active {
+<style lang="scss" module>
+.transition_menuDrawerBg_enterActive,
+.transition_menuDrawerBg_leaveActive {
 	opacity: 1;
-	transform: translateX(0);
-	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
-.menu-enter-from,
-.menu-leave-active {
+.transition_menuDrawerBg_enterFrom,
+.transition_menuDrawerBg_leaveTo {
 	opacity: 0;
-	transform: translateX(-240px);
 }
 
-.menu-back-enter-active,
-.menu-back-leave-active {
+.transition_menuDrawer_enterActive,
+.transition_menuDrawer_leaveActive {
 	opacity: 1;
-	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+	transform: translateX(0);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
-.menu-back-enter-from,
-.menu-back-leave-active {
+.transition_menuDrawer_enterFrom,
+.transition_menuDrawer_leaveTo {
 	opacity: 0;
+	transform: translateX(-240px);
 }
-</style>
 
-<style lang="scss" module>
 .root {
 	$nav-hide-threshold: 650px; // TODO: どこかに集約したい
 

packages/frontend/src/ui/universal.vue

@@ -47,7 +47,9 @@
 		:enter-from-class="$store.state.animation ? $style.transition_menuDrawer_enterFrom : ''"
 		:leave-to-class="$store.state.animation ? $style.transition_menuDrawer_leaveTo : ''"
 	>
-		<XDrawerMenu v-if="drawerMenuShowing" :class="$style.menuDrawer"/>
+		<div v-if="drawerMenuShowing" :class="$style.menuDrawer">
+			<XDrawerMenu/>
+		</div>
 	</Transition>
 
 	<Transition