From ee52971b36f1deb7a03ab830268ab2419b837bed Mon Sep 17 00:00:00 2001
From: Joen A <1204802+jasmussen@users.noreply.github.com>
Date: Tue, 6 Sep 2022 08:25:01 +0200
Subject: [PATCH] Navigation: Try adding minimal animation to overlay. (#43851)

---
 .../block-library/src/navigation/style.scss    | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index 8a99bfc380cd3..ca448fb3f840c 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -430,6 +430,16 @@ button.wp-block-navigation-item__content {
  * Mobile menu.
  */
 
+@keyframes overlay-menu__fade-in-animation {
+	from {
+		opacity: 0;
+		top: 0.5em;
+	}
+	to {
+		opacity: 1;
+		top: 0;
+	}
+}
 .wp-block-navigation__responsive-container {
 	display: none;
 	position: fixed;
@@ -467,6 +477,11 @@ button.wp-block-navigation-item__content {
 		flex-direction: column;
 		background-color: inherit;
 
+		// Animation.
+		animation: overlay-menu__fade-in-animation 0.1s ease-out;
+		animation-fill-mode: forwards;
+		@include reduce-motion("animation");
+
 		// Try to inherit any root paddings set, so the X can align to a top-right aligned menu.
 		padding-top: var(--wp--style--root--padding-top, 2rem);
 		padding-right: var(--wp--style--root--padding-right, 2rem);
@@ -674,7 +689,8 @@ button.wp-block-navigation-item__content {
 }
 
 // Adjust open dialog top margin when admin-bar is visible.
-.has-modal-open .admin-bar .wp-block-navigation__responsive-dialog {
+// Needs to be scoped to .is-menu-open, or it will shift the position of any other navigations that may be present.
+.has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog {
 	margin-top: $admin-bar-height-big;
 
 	// Handle smaller admin-bar.