timmypidashev/web
1
0
Fork 0
mirror of https://github.com/timmypidashev/web.git synced 2026-04-14 11:03:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add stagger effect

Browse Source
This commit is contained in:
Timothy Pidashev
2024-03-19 23:31:46 -07:00
parent 8bf39116e9
commit 4f0959f433
1 changed files with 46 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/web/src/components/header.jsx
View File

@@ -98,55 +98,70 @@ function TabMenu({ tabs, activeTab, setActiveTab }) {
); );
} }
// CollapsibleTab component function CollapsibleTab({ tab, onClick }) {
function CollapsibleTab({ tab }) { const handleClick = () => {
onClick(); // Close the menu when a tab is clicked
// You can add additional functionality here if needed
// For example: console.log(`Clicked ${tab.label}`);
};
return ( return (
<motion.div <Link href={`/${tab.id}`} passHref>
initial={{ opacity: 0, y: -20 }} <motion.a
animate={{ opacity: 1, y: 0 }} className={`text-lg font-bold ${tabColors[tab.color]} rounded-full px-4 py-2 focus:outline-none`}
transition={{ duration: 0.2 }} onClick={handleClick}
> whileHover={{ scale: 1.1 }}
<Link href={`/${tab.id}`} passHref> whileTap={{ scale: 0.9 }}
<motion.a >
className={`text-lg font-bold ${tabColors[tab.color]} px-4 py-2 focus:outline-none`}> {tab.label}
{tab.label} </motion.a>
</motion.a> </Link>
</Link>
</motion.div>
); );
} }
function CollapsibleTabMenu({ tabs }) { // CollapsibleTabMenu component
function CollapsibleTabMenu() {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const toggleMenu = () => { const toggleMenu = () => {
setIsOpen(!isOpen); setIsOpen(!isOpen);
}; };
const handleTabClick = () => {
setIsOpen(false); // Close the menu when a tab is clicked
};
return ( return (
<div className="flex items-center justify-end 2xl:hidden xl:hidden lg:hidden md:hidden"> <div>
<button onClick={toggleMenu} className="focus:outline-none"> <div className="justify-end">
<FaBars size={24} /> <button onClick={toggleMenu} className="focus:outline-none">
</button> <FaBars size={24} />
</button>
</div>
<AnimatePresence> <AnimatePresence>
{isOpen && ( {isOpen && (
<motion.div <motion.div
className="fixed top-16 right-4 flex flex-col items-center space-y-4 bg-gray-200 dark:bg-gray-800 rounded-md p-4 shadow-lg z-10" className="fixed top-0 left-0 w-full h-full bg-gray-200 dark:bg-gray-800 z-50"
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
> >
{tabs.map((tab, index) => ( <motion.div
<motion.div className="flex flex-col items-center justify-center h-full"
key={tab.id} initial="hidden"
initial={{ opacity: 0, y: -20 }} animate="visible"
animate={{ opacity: 1, y: 0 }} exit="hidden"
transition={{ duration: 0.2, delay: index * 0.1 }} variants={{
exit={{ opacity: 0, y: -20 }} visible: { opacity: 1, scale: 1, transition: { staggerChildren: 0.1 } },
> hidden: { opacity: 0, scale: 0.9 }
<CollapsibleTab tab={tab} /> }}
</motion.div> >
))} {tabs.map((tab, index) => (
<motion.div key={tab.id} variants={{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }}>
<CollapsibleTab tab={tab} onClick={handleTabClick} />
</motion.div>
))}
</motion.div>
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>