fix: resources added for Helsinki (#327)

* fix: resources added * fixing build * changes * centered the text * changes * changes as per request * changing the drop down behaviour * set timeout --------- Co-authored-by: V Thulisile Sibanda <[email protected]> Co-authored-by: Ace <[email protected]>
asyncapi · Jul 9, 2024 · 6c6ab90 · 6c6ab90
1 parent 788bc04
commit 6c6ab90
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 21 deletions.
diff --git a/components/Agenda/agenda.js b/components/Agenda/agenda.js
@@ -7,22 +7,25 @@ function Agenda({ city }) {
   return (
 	  <div className=''>
 		  <div className='flex flex-col justify-center items-center'>
+
 			  <Heading className='text-[30px] text-white'>
-				Agenda
+				Agenda 
 			</Heading>
 			  {!city.agenda && <div className='w-[720px] lg:w-full mt-[140px] text-center'>
 				<Heading typeStyle='lg' className='text-white text-[30px]'>
 					Agenda Coming Soon - Stay Tuned!
 				</Heading>
           </div>}
 		  </div>
+
 		  {city.agenda && <div className='mt-[40px]'>
 			  <Heading
 				  typeStyle='heading-md'
 				  className='text-gradient text-2xl'
 				  level='h3'>
 				  {city.date}
 			  </Heading>
+
 			  <div className='mt-[40px]'>
 				  {city.agenda.map((talk) => {
 					  return <div key={talk.session} className={`flex sm:flex-col justify-between mt-[50px] ${!talk.speaker && 'countdown-text-gradient'}`}>

diff --git a/components/Navbar/navbar.js b/components/Navbar/navbar.js
@@ -8,30 +8,32 @@ import { useMediaQuery } from 'react-responsive';
 import Cancel from '../illustration/cancel';
 import Image from 'next/image';
 
-
-
 function Navbar() {
 	const isTablet = useMediaQuery({ maxWidth: '1118px' });
 	const [drop, setDrop] = useState(false);
 	const [show, setShow] = useState(null);
+	const [isSubMenuHovered, setIsSubMenuHovered] = useState(false);
 	const menuRef = useRef(null);
 	const svg = useRef(null);
+	let closeTimeout = useRef(null);  
+
 	const handleClosing = useCallback((event) => {
 		if (show && !event.target.closest('.subMenu')) {
-			setShow(false);
+			setShow(null);
 		}
 	}, [show]);
+
 	useEffect(() => {
 		document.addEventListener('mousedown', handleClosing);
 		return () => {
 			document.removeEventListener('mousedown', handleClosing);
 		};
-	}, [handleClosing, show]);
+	}, [handleClosing]);
 
 	const handleCloseMenu = (event) => {
 		if (menuRef.current && !menuRef.current.contains(event.target)) {
 			setDrop(false);
-		} if (svg.current && event.target == svg.current) {
+		} if (svg.current && event.target === svg.current) {
 			setDrop(true);
 		}
 	};
@@ -43,12 +45,29 @@ function Navbar() {
 		};
 	}, [menuRef]);
 
-	const handleVenueHover = () => {
-		setShow('Venue');
+	const handleMouseEnter = (title) => {
+		clearTimeout(closeTimeout.current);
+		setShow(title);
+	};
+
+	const handleMouseLeave = () => {
+		closeTimeout.current = setTimeout(() => {
+			if (!isSubMenuHovered) {
+				setShow(null);
+			}
+		}, 300);  
+	};
+
+	const handleSubMenuEnter = () => {
+		clearTimeout(closeTimeout.current);
+		setIsSubMenuHovered(true);
 	};
+
 	const handleSubMenuLeave = () => {
+		setIsSubMenuHovered(false);
 		setShow(null);
 	};
+
 	return (
 		<div className='flex justify-center items-center sticky top-0 z-[99] text-white'>
 			<div className='w-[1131px]'>
@@ -77,15 +96,13 @@ function Navbar() {
 							{links.map((link) => (
 								<div href={link.ref} key={link.title}>
 									<div
-										onMouseEnter={() => setShow(link.title === 'Venue' ? 'Venue' : null)}
-										onClick={() => setShow(link.title === 'Venue' ? null : link.title)}
+										onMouseEnter={() => handleMouseEnter(link.title)}
+										onMouseLeave={handleMouseLeave}
 										className='ml-16 text-[14px] group cursor-pointer relative flex flex-col'
 									>
 										<div>
 											{link.subMenu ? (
-												<div
-													onMouseEnter={handleVenueHover}
-													className='flex items-center '>
+												<div className='flex items-center'>
 													{link.title}{' '}
 													{link.subMenu && (
 														<Dropdown
@@ -99,15 +116,23 @@ function Navbar() {
 												<Link href={link.ref}>{link.title}</Link>
 											)}
 										</div>
-										{show && show === link.title && link.subMenu && (
+										{show === link.title && link.subMenu && (
 											<div
+												className='subMenu absolute z-[9] mt-8 w-[140px] rounded-md left-[-15px] gradient-bg px-2 py-1 flex flex-col justify-center space-y-0'
+												onMouseEnter={handleSubMenuEnter}
 												onMouseLeave={handleSubMenuLeave}
-												className='subMenu absolute z-[9] mt-8 w-[140px] rounded-md left-[-15px] gradient-bg pl-2 pt-1 flex flex-col justify-center space-y-0'>
+											>
 												{link.subMenu.map((subL) => (
 													<Link href={subL.ref} key={subL.title}>
-														<div className='h-[32px] text-[16px] hover:scale-95 hover:translate-x-1 transition-all'>
-															{subL.title}
-														</div>
+														{link.subMenu.length === 1 ? (
+															<div className='h-[32px] flex items-center justify-center text-[16px] hover:scale-95 hover:translate-x-1 transition-all'>
+																{subL.title}
+															</div>
+														) : (
+															<div className='h-[32px] text-[16px] hover:scale-95 hover:translate-x-1 transition-all'>
+																{subL.title}
+															</div>
+														)}
 													</Link>
 												))}
 											</div>
@@ -124,4 +149,4 @@ function Navbar() {
 	);
 }
 
-export default Navbar;
+export default Navbar;
diff --git a/config/links.json b/config/links.json
@@ -32,7 +32,21 @@
 	{
 		"title":"Past Editions",
 		"ref":"/editions"
-	}
+	},
+	{
+		"title":"Resources Hub",
+		"ref":"",
+		"subMenu": [
+
+            {
+                "title": "Helsinki Slides",
+                "ref": "https://drive.google.com/drive/folders/1nY7dZF8WFXZ3r2rCWJDDoT2C_GMfQJMV?usp=drive_link",
+                "target": "_blank"
+            }
+
+	]
+}
+
 ]
 
 

diff --git a/pages/venue/[id].js b/pages/venue/[id].js
@@ -64,7 +64,7 @@ function Venue({ city }) {
 			</div>
 			<div
 				id='agenda'
-				className='border border border-x-0 border-b-0 border-t-[#333] py-28 container flex flex-col justify-center items-center '
+				className='border border-x-0 border-b-0 border-t-[#333] py-28 container flex flex-col justify-center items-center '
 			>
 				<div className='w-[1130px] lg:w-full'>
 					<Agenda city={city} />