feat: animate ButtonMenu dropdown

1 files changed, 26 insertions, 5 deletions

diff --git a/src/components/ButtonMenu.css b/src/components/ButtonMenu.css
index c454849..45d986a 100644
--- a/src/components/ButtonMenu.css
+++ b/src/components/ButtonMenu.css
@@ -3,7 +3,7 @@
 		> button {
 			position: relative;
 			padding-left: 2.5rem;
-			
+
 			&::before {
 				content: '';
 				width: 1rem;
@@ -13,20 +13,41 @@
 				background: url('../icons/chevron-right.svg');
 				background-position: left 2px center;
 				background-repeat: no-repeat;
-				transition: transform 0.2s;
 			}
+
 			&:has(+ :popover-open)::before {
 				transform: rotate(90deg);
 			}
+
+			@media not (prefers-reduced-motion) {
+				&::before {
+					transition: transform 0.2s;
+				}
+			}
 		}
 
 		[popover] {
 			inset: unset;
-			top: 0;
+			top: var(--anchor-y);
 			left: var(--anchor-x);
 
-			&:popover-open {
-				top: var(--anchor-y);
+			@media not (prefers-reduced-motion) {
+				transform: translate(0, -100%);
+				clip-path: xywh(0 100% 100% 100%);
+
+				transition-property: transform, clip-path, overlay, display;
+				transition-duration: 0.2s;
+				transition-behavior: allow-discrete;
+	
+				&:popover-open {
+					transform: none;
+					clip-path: xywh(0 0 100% 100%);
+	
+					@starting-style {
+						transform: translate(0, -100%);
+						clip-path: xywh(0 100% 100% 100%);
+					}
+				}
 			}
 		}
 	}