Added Entry and Exit animation for menu

src/components/Page/Menu/MenuGrid/MenuGrid.module.css

@@ -75,11 +75,29 @@
     visibility: hidden;
     opacity: 0;
     background-color: var(--grid-bg);
+    clip-path: inset(0 0 100% 0);
+
+    transition: clip-path 0.35s steps(8, end);
+
 
     &.isOpen {
       pointer-events: auto;
+
+      transform: translateY(0);
+
       visibility: visible;
       opacity: 1;
+      clip-path: inset(0 0 0 0);
+    }
+
+    &.isClosing {
+      clip-path: inset(0 0 100% 0);
+      transition: clip-path 0.25s steps(6, end);
+
+      &.isOpen {
+        clip-path: inset(0 0 100% 0);
+        transition: clip-path 0.25s steps(6, end);
+      }
     }
 
     @media screen and (--bp-desktop) {

src/components/Page/Menu/MenuGrid/index.tsx

@@ -16,17 +16,16 @@ interface MenuGridProps {
 }
 
 export default function MenuGrid({ navigationData }: MenuGridProps) {
-  const { isMenuOpen, closeMenu } = useMenu();
+  const { isMenuOpen, closeMenu, isClosing, startClosing, resetClosing } =
+    useMenu();
   const menuRef = React.useRef<HTMLElement>(null);
-  const [isClosing, setIsClosing] = React.useState(false);
-
   const handleClose = React.useCallback(() => {
-    setIsClosing(true);
+    startClosing();
     setTimeout(() => {
       closeMenu();
-      setIsClosing(false);
+      resetClosing();
     }, 800);
-  }, [closeMenu]);
+  }, [closeMenu, startClosing, resetClosing]);
 
   React.useEffect(() => {
     const handleEscape = (e: KeyboardEvent) => {