From 10dde68875b1b1681ea45d0216aba553c97a1dd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Mon, 11 Apr 2022 12:18:14 +0200
Subject: [PATCH] dashboard-v2: pin dropdown animation to toggle

---
 .../src/components/DropdownMenu/DropdownMenu.js        | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/dashboard-v2/src/components/DropdownMenu/DropdownMenu.js b/packages/dashboard-v2/src/components/DropdownMenu/DropdownMenu.js
index 86cbad5f..1bf6f001 100644
--- a/packages/dashboard-v2/src/components/DropdownMenu/DropdownMenu.js
+++ b/packages/dashboard-v2/src/components/DropdownMenu/DropdownMenu.js
@@ -7,13 +7,10 @@ import { ChevronDownIcon } from "../Icons";
 
 const dropDown = keyframes`
   0% {
-    transform: scaleY(0);
-  }
-  80% {
-    transform: scaleY(1.1);
+    transform: rotateX(-90deg);
   }
   100% {
-    transform: scaleY(1);
+    transform: rotateX(0deg);
   }
 `;
 
@@ -35,10 +32,11 @@ const Flyout = styled.div.attrs(({ open }) => ({
               bg-white shadow-md shadow-palette-200/50
               ${open ? "visible" : "invisible"}`,
 }))`
+  transform-origin: top center;
   animation: ${({ open }) =>
     open
       ? css`
-          ${dropDown} 0.1s ease-in-out
+          ${dropDown} .15s ease-in-out forwards;
         `
       : "none"};
 `;