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

added animation to submenu

Browse Source
This commit is contained in:
Md Asif 2024-12-23 17:36:42 +05:30
parent c1df68b27a
commit a3d4f2b11c
1 changed files with 47 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/MenuBar.jsx
View File

@ -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
<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",
isVisible ? "block" : "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 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 hover:bg-white dark:hover:bg-secondary-variant-dark first:rounded-t-2xl second-last:rounded-b-2xl first:pt-4 last:pb-4"
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>
))}
<svg
className="absolute top-0 left-6 mt-[-13px] fill-primary dark:fill-primary-dark"
</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" />
</svg>
</motion.svg>
</div>
)}
</AnimatePresence>
);
}
@ -48,7 +62,13 @@ function MenuBar({ menuItems }) {
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>