From a3d4f2b11c6ba1ab8f9ff8883fc346f20e3aef65 Mon Sep 17 00:00:00 2001
From: asif <md.asif5@tcs.com>
Date: Mon, 23 Dec 2024 17:36:42 +0530
Subject: [PATCH] added animation to submenu

---
 src/components/MenuBar.jsx | 74 ++++++++++++++++++++++++--------------
 1 file changed, 47 insertions(+), 27 deletions(-)

diff --git a/src/components/MenuBar.jsx b/src/components/MenuBar.jsx
index 06b385b..f2959d3 100644
--- a/src/components/MenuBar.jsx
+++ b/src/components/MenuBar.jsx
@@ -3,35 +3,49 @@ import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
 import { useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
 
 function SubMenu({ items, isVisible, onLinkClick }) {
   const { t } = useTranslation();
   return (
-    <div
-      className={clsx(
-        "absolute left-0 z-50 shadow-sm top-full border-t-3 border-primary dark:border-primary-dark bg-secondary dark:bg-secondary-dark rounded-2xl shadow-surface-variant-dark dark:shadow-primary",
-        isVisible ? "block" : "hidden"
-      )}
-    >
-      {items.map((subItem, index) => (
-        <div
-          key={index}
-          className="px-6 py-2 cursor-pointer text-nowrap hover:bg-white dark:hover:bg-secondary-variant-dark first:rounded-t-2xl second-last:rounded-b-2xl first:pt-4 last:pb-4"
-          onClick={onLinkClick}
-        >
-          <Link to={subItem.path}>{t(subItem.name)}</Link>
+    <AnimatePresence mode="popLayout">
+      {isVisible && (
+        <div>
+          <motion.div
+            className={clsx(
+              "absolute left-0 z-50 shadow-sm top-full border-t-3 border-primary dark:border-primary-dark bg-secondary dark:bg-secondary-dark rounded-2xl shadow-surface-variant-dark dark:shadow-primary overflow-hidden"
+            )}
+            initial={{ y: 15, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: 15, opacity: 0 }}
+            transition={{ duration: 0.4, type: "spring" }}
+          >
+            {items.map((subItem, index) => (
+              <div
+                key={index}
+                className="px-6 py-2 cursor-pointer text-nowrap dark:hover:bg-secondary-variant-dark first:rounded-t-2xl second-last:rounded-b-2xl first:pt-4 last:pb-4 hover:bg-white"
+                onClick={onLinkClick}
+              >
+                <Link to={subItem.path}>{t(subItem.name)}</Link>
+              </div>
+            ))}
+          </motion.div>
+          <motion.svg
+            initial={{ y: 15, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: 15, opacity: 0 }}
+            transition={{ duration: 0.4, type: "spring" }}
+            className="absolute top-10 left-6 mt-[-13px] fill-primary dark:fill-primary-dark"
+            width="16"
+            height="13"
+            viewBox="0 0 16 13"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M6.26795 1C7.03775 -0.333332 8.96225 -0.333334 9.73205 0.999999L14.9282 10C15.698 11.3333 14.7358 13 13.1962 13H2.80385C1.26425 13 0.301996 11.3333 1.0718 10L6.26795 1Z" />
+          </motion.svg>
         </div>
-      ))}
-      <svg
-        className="absolute top-0 left-6 mt-[-13px] fill-primary dark:fill-primary-dark"
-        width="16"
-        height="13"
-        viewBox="0 0 16 13"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M6.26795 1C7.03775 -0.333332 8.96225 -0.333334 9.73205 0.999999L14.9282 10C15.698 11.3333 14.7358 13 13.1962 13H2.80385C1.26425 13 0.301996 11.3333 1.0718 10L6.26795 1Z" />
-      </svg>
-    </div>
+      )}
+    </AnimatePresence>
   );
 }
 
@@ -41,14 +55,20 @@ function MenuBar({ menuItems }) {
   return (
     <div className="flex justify-between pt-5 pb-2 text-base font-body">
       {menuItems.map((item, index) => (
-        <div 
-          key={index} 
+        <div
+          key={index}
           className="relative pb-3 cursor-pointer"
           onMouseEnter={() => setActiveMenu(index)}
           onMouseLeave={() => setActiveMenu(null)}
         >
           <Link to={item.path}>{t(item.name)}</Link>
-          {item.submenu.length > 0 && <SubMenu items={item.submenu} isVisible={ activeMenu === index } onLinkClick={() => setActiveMenu(null)}/>}
+          {item.submenu.length > 0 && (
+            <SubMenu
+              items={item.submenu}
+              isVisible={activeMenu === index}
+              onLinkClick={() => setActiveMenu(null)}
+            />
+          )}
         </div>
       ))}
     </div>