diff --git a/components/Agenda/agenda.js b/components/Agenda/agenda.js index e6829c61..db9ba536 100644 --- a/components/Agenda/agenda.js +++ b/components/Agenda/agenda.js @@ -7,8 +7,9 @@ function Agenda({ city }) { return (
+ - Agenda + Agenda {!city.agenda &&
@@ -16,6 +17,7 @@ function Agenda({ city }) {
}
+ {city.agenda &&
{city.date} +
{city.agenda.map((talk) => { return
diff --git a/components/Navbar/navbar.js b/components/Navbar/navbar.js index 213b1765..87bd031e 100644 --- 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 (
@@ -77,15 +96,13 @@ function Navbar() { {links.map((link) => (
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' >
{link.subMenu ? ( -
+
{link.title}{' '} {link.subMenu && ( {link.title} )}
- {show && show === link.title && link.subMenu && ( + {show === link.title && link.subMenu && (
+ > {link.subMenu.map((subL) => ( -
- {subL.title} -
+ {link.subMenu.length === 1 ? ( +
+ {subL.title} +
+ ) : ( +
+ {subL.title} +
+ )} ))}
@@ -124,4 +149,4 @@ function Navbar() { ); } -export default Navbar; \ No newline at end of file +export default Navbar; diff --git a/config/links.json b/config/links.json index c36c080a..155bb309 100644 --- 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 index 9ae6adfe..e0a2b21e 100644 --- a/pages/venue/[id].js +++ b/pages/venue/[id].js @@ -64,7 +64,7 @@ function Venue({ city }) {