md.asif5/osaka
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enhance animation

Browse Source
This commit is contained in:
Md Asif 2024-12-23 18:25:14 +05:30
parent a3d4f2b11c
commit 7ae4e8dbef
1 changed files with 12 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/MenuBar.jsx
View File

@ -13,36 +13,32 @@ function SubMenu({ items, isVisible, onLinkClick }) {
<div> <div>
<motion.div <motion.div
className={clsx( 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 }} initial={{ y: 15, opacity: 0 }}
animate={{ y: 0, opacity: 1 }} animate={{ y: 0, opacity: 1 }}
exit={{ y: 15, opacity: 0 }} exit={{ y: 15, opacity: 0 }}
transition={{ duration: 0.4, type: "spring" }} transition={{ duration: 0.3, type: "spring" }}
> >
{items.map((subItem, index) => ( {items.map((subItem, index) => (
<div <div
key={index} 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} onClick={onLinkClick}
> >
<Link to={subItem.path}>{t(subItem.name)}</Link> <Link to={subItem.path}>{t(subItem.name)}</Link>
</div> </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.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> </div>
)} )}
</AnimatePresence> </AnimatePresence>