223 lines
7.5 KiB
TypeScript
223 lines
7.5 KiB
TypeScript
// import { useState, useEffect } from 'react';
|
|
// import { motion } from 'motion/react';
|
|
// import { useLocation, useNavigate } from 'react-router-dom';
|
|
|
|
// interface CitySubmenuProps {
|
|
// onClose: () => void;
|
|
// }
|
|
|
|
// interface SubmenuItem {
|
|
// id: string;
|
|
// label: string;
|
|
// path?: string;
|
|
// action?: () => void;
|
|
// }
|
|
|
|
// export function CitySubmenu({ onClose }: CitySubmenuProps) {
|
|
// const [isScrolled, setIsScrolled] = useState(false);
|
|
// const [activeItem, setActiveItem] = useState<string | null>(null);
|
|
|
|
// const location = useLocation();
|
|
// const navigate = useNavigate();
|
|
|
|
// // Direct submenu items for Melbourne
|
|
// const submenuItems: SubmenuItem[] = [
|
|
// {
|
|
// id: 'melbourne',
|
|
// label: 'Melbourne',
|
|
// path: '/melbourne'
|
|
// },
|
|
// {
|
|
// id: 'attractions',
|
|
// label: 'Attractions',
|
|
// path: '/attractions'
|
|
// },
|
|
// {
|
|
// id: 'buy-now',
|
|
// label: 'Buy Now',
|
|
// path: '/passes'
|
|
// },
|
|
// {
|
|
// id: 'blogs',
|
|
// label: 'Blogs',
|
|
// path: '/blogs'
|
|
// },
|
|
// {
|
|
// id: 'how-it-works',
|
|
// label: 'How It Works',
|
|
// path: '/how-it-works'
|
|
// }
|
|
// ];
|
|
|
|
// // Handle scroll effects
|
|
// useEffect(() => {
|
|
// const handleScroll = () => {
|
|
// const scrolled = window.scrollY > 20;
|
|
// setIsScrolled(scrolled);
|
|
// };
|
|
|
|
// window.addEventListener('scroll', handleScroll);
|
|
// return () => window.removeEventListener('scroll', handleScroll);
|
|
// }, []);
|
|
|
|
// // Determine active item based on current route
|
|
// useEffect(() => {
|
|
// const currentItem = submenuItems.find(item =>
|
|
// item.path && location.pathname === item.path
|
|
// );
|
|
// setActiveItem(currentItem?.id || null);
|
|
// }, [location.pathname]);
|
|
|
|
// const handleSubmenuItemClick = (item: SubmenuItem) => {
|
|
// if (item.path) {
|
|
// navigate(item.path);
|
|
// }
|
|
// setActiveItem(item.id);
|
|
// item.action?.();
|
|
// onClose();
|
|
// };
|
|
|
|
// const isSubmenuItemActive = (itemId: string) => {
|
|
// return activeItem === itemId;
|
|
// };
|
|
|
|
// // Render direct submenu items
|
|
// const renderSubmenu = () => (
|
|
// <div className="flex items-center gap-1">
|
|
// {submenuItems.map((item) => (
|
|
// <motion.button
|
|
// key={item.id}
|
|
// onClick={() => handleSubmenuItemClick(item)}
|
|
// className={`font-poppins font-medium text-base relative px-4 py-2.5 transition-all duration-300 whitespace-nowrap rounded-full ${
|
|
// isSubmenuItemActive(item.id)
|
|
// ? 'bg-primary text-white shadow-md'
|
|
// : 'text-gray-700 hover:text-white hover:bg-gray-800'
|
|
// }`}
|
|
// whileHover={{ scale: 1.02 }}
|
|
// whileTap={{ scale: 0.98 }}
|
|
// >
|
|
// {item.label}
|
|
|
|
// {!isSubmenuItemActive(item.id) && (
|
|
// <motion.div
|
|
// className="absolute inset-0 bg-gray-800 rounded-full -z-10"
|
|
// initial={{ opacity: 0, scale: 0.9 }}
|
|
// whileHover={{ opacity: 1, scale: 1 }}
|
|
// transition={{ duration: 0.2 }}
|
|
// />
|
|
// )}
|
|
// </motion.button>
|
|
// ))}
|
|
// </div>
|
|
// );
|
|
|
|
// return (
|
|
// <>
|
|
// {/* Desktop Submenu */}
|
|
// <motion.div
|
|
// className="fixed top-[120px] left-1/2 transform -translate-x-1/2 z-30 hidden lg:block"
|
|
// initial={{ y: -20, opacity: 0 }}
|
|
// animate={{ y: 0, opacity: 1 }}
|
|
// transition={{
|
|
// duration: 0.6,
|
|
// ease: [0.25, 0.1, 0.25, 1],
|
|
// delay: 0.4
|
|
// }}
|
|
// >
|
|
// <motion.div
|
|
// className="bg-white rounded-full px-2 py-2 shadow-lg border border-gray-200"
|
|
// initial={{ scale: 0.9 }}
|
|
// animate={{
|
|
// scale: isScrolled ? 0.95 : 1,
|
|
// y: isScrolled ? 2 : 0,
|
|
// boxShadow: isScrolled
|
|
// ? "0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"
|
|
// : "0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)"
|
|
// }}
|
|
// transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
|
|
// >
|
|
// {renderSubmenu()}
|
|
// </motion.div>
|
|
// </motion.div>
|
|
|
|
// {/* Mobile Submenu */}
|
|
// <motion.div
|
|
// className="fixed top-[100px] left-4 right-4 z-30 md:hidden"
|
|
// initial={{ y: -20, opacity: 0 }}
|
|
// animate={{ y: 0, opacity: 1 }}
|
|
// transition={{
|
|
// duration: 0.6,
|
|
// ease: [0.25, 0.1, 0.25, 1],
|
|
// delay: 0.4
|
|
// }}
|
|
// >
|
|
// <motion.div
|
|
// className="bg-white rounded-2xl px-3 py-3 shadow-lg border border-gray-200"
|
|
// initial={{ scale: 0.9 }}
|
|
// animate={{
|
|
// scale: isScrolled ? 0.95 : 1,
|
|
// y: isScrolled ? 2 : 0,
|
|
// boxShadow: isScrolled
|
|
// ? "0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"
|
|
// : "0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)"
|
|
// }}
|
|
// transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
|
|
// >
|
|
// <div className="flex items-center gap-2 overflow-x-auto scrollbar-hide">
|
|
// {submenuItems.map((item) => (
|
|
// <motion.button
|
|
// key={item.id}
|
|
// onClick={() => handleSubmenuItemClick(item)}
|
|
// className={`relative px-3 py-2 text-sm font-medium transition-all duration-300 whitespace-nowrap rounded-xl flex-shrink-0 ${
|
|
// isSubmenuItemActive(item.id)
|
|
// ? 'bg-primary text-white shadow-md'
|
|
// : 'text-gray-700 hover:text-white hover:bg-gray-800'
|
|
// }`}
|
|
// whileHover={{ scale: 1.02 }}
|
|
// whileTap={{ scale: 0.98 }}
|
|
// >
|
|
// {item.label}
|
|
|
|
// {!isSubmenuItemActive(item.id) && (
|
|
// <motion.div
|
|
// className="absolute inset-0 bg-gray-800 rounded-xl -z-10"
|
|
// initial={{ opacity: 0, scale: 0.9 }}
|
|
// whileHover={{ opacity: 1, scale: 1 }}
|
|
// transition={{ duration: 0.2 }}
|
|
// />
|
|
// )}
|
|
// </motion.button>
|
|
// ))}
|
|
// </div>
|
|
// </motion.div>
|
|
// </motion.div>
|
|
|
|
// {/* Medium Screen Submenu */}
|
|
// <motion.div
|
|
// className="fixed top-[110px] left-1/2 transform -translate-x-1/2 z-30 hidden md:block lg:hidden"
|
|
// initial={{ y: -20, opacity: 0 }}
|
|
// animate={{ y: 0, opacity: 1 }}
|
|
// transition={{
|
|
// duration: 0.6,
|
|
// ease: [0.25, 0.1, 0.25, 1],
|
|
// delay: 0.4
|
|
// }}
|
|
// >
|
|
// <motion.div
|
|
// className="bg-white rounded-full px-2 py-2 shadow-lg border border-gray-200"
|
|
// initial={{ scale: 0.9 }}
|
|
// animate={{
|
|
// scale: isScrolled ? 0.95 : 1,
|
|
// y: isScrolled ? 2 : 0,
|
|
// boxShadow: isScrolled
|
|
// ? "0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"
|
|
// : "0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)"
|
|
// }}
|
|
// transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
|
|
// >
|
|
// {renderSubmenu()}
|
|
// </motion.div>
|
|
// </motion.div>
|
|
// </>
|
|
// );
|
|
// }
|