From d2fc5a248b5005d640f26dd58ef6909a1bc6c282 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 10 Jan 2023 20:17:08 +0900
Subject: [PATCH] refactor(client): use css modules

---
 packages/frontend/src/ui/deck.vue      | 50 +++++++++++++++-----------
 packages/frontend/src/ui/universal.vue |  4 ++-
 2 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index 3414c45e6..4876e6378 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/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;
+	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.transition_menuDrawerBg_enterFrom,
+.transition_menuDrawerBg_leaveTo {
+	opacity: 0;
+}
+
+.transition_menuDrawer_enterActive,
+.transition_menuDrawer_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);
 }
-.menu-enter-from,
-.menu-leave-active {
+.transition_menuDrawer_enterFrom,
+.transition_menuDrawer_leaveTo {
 	opacity: 0;
 	transform: translateX(-240px);
 }
 
-.menu-back-enter-active,
-.menu-back-leave-active {
-	opacity: 1;
-	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.menu-back-enter-from,
-.menu-back-leave-active {
-	opacity: 0;
-}
-</style>
-
-<style lang="scss" module>
 .root {
 	$nav-hide-threshold: 650px; // TODO: どこかに集約したい
 
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index dc8914aac..a292379fe 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/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