From 7ae4e8dbefd136792ca479e9047a6f2e7630d498 Mon Sep 17 00:00:00 2001
From: asif <md.asif5@tcs.com>
Date: Mon, 23 Dec 2024 18:25:14 +0530
Subject: [PATCH] enhance animation

---
 src/components/MenuBar.jsx | 28 ++++++++++++----------------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/components/MenuBar.jsx b/src/components/MenuBar.jsx
index f2959d3..3e53f03 100644
--- a/src/components/MenuBar.jsx
+++ b/src/components/MenuBar.jsx
@@ -13,36 +13,32 @@ function SubMenu({ items, isVisible, onLinkClick }) {
         <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"
+              "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"
             )}
             initial={{ y: 15, opacity: 0 }}
             animate={{ y: 0, opacity: 1 }}
             exit={{ y: 15, opacity: 0 }}
-            transition={{ duration: 0.4, type: "spring" }}
+            transition={{ duration: 0.3, 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"
+                className="px-3 py-2 cursor-pointer text-nowrap dark:hover:bg-secondary-variant-dark first:rounded-t-2xl first:pt-4 last:pb-4 second-last:rounded-b-2xl hover:bg-white"
                 onClick={onLinkClick}
               >
                 <Link to={subItem.path}>{t(subItem.name)}</Link>
               </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>
           </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>
       )}
     </AnimatePresence>