From a1b5937129e0e7dbd62cc9300f706fd6b98a323c Mon Sep 17 00:00:00 2001
From: hoshinotsuyoshi <tsuyoshi.hoshino@route06.co.jp>
Date: Thu, 30 Jan 2025 22:56:04 +0900
Subject: [PATCH] resize animation poc

---
 .../Toolbar/MobileToolbar.module.css          | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/Toolbar/MobileToolbar.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/Toolbar/MobileToolbar.module.css
index 001e84a9..a613147e 100644
--- a/frontend/packages/erd-core/src/components/ERDRenderer/Toolbar/MobileToolbar.module.css
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/Toolbar/MobileToolbar.module.css
@@ -1,22 +1,28 @@
 @keyframes collapse {
-  from {
-    width: 170px; /* TODO: 157px */
-    height: 245px;
+  0% {
+    transform: scale(3, 4);
+    border-width: calc(1px / 3);
+    border-radius: calc(8px / 3);
   }
+
   to {
-    width: 40px;
-    height: 40px;
+    transform: scale(1, 1);
+    border-width: 1px;
+    border-radius: 8px;
   }
 }
 
 @keyframes expand {
-  from {
-    width: 40px;
-    height: 40px;
+  0% {
+    transform: scale(0.235, 0.167);
+    border-width: calc(1px * 0.235);
+    border-radius: calc(8px * 0.235);
   }
+
   to {
-    width: 170px;
-    height: 245px;
+    transform: scale(1, 1);
+    border-width: 1px;
+    border-radius: 8px;
   }
 }
 
@@ -42,9 +48,10 @@
   flex-direction: column;
   justify-content: center;
   gap: var(--spacing-2, 8px);
-  transition: width 150ms ease, height 150ms ease;
+  transition: transform 150ms ease;
   min-height: 40px;
   z-index: var(--z-index-toolbar);
+  transform-origin: bottom left;
 }
 
 @media screen and (max-width: 767px) {