From 4bedf04e49709d730c221f22cea97d3f03620336 Mon Sep 17 00:00:00 2001 From: mildtomato Date: Thu, 3 Dec 2020 15:56:33 +0800 Subject: [PATCH 1/3] removed triggers from flyout and logic now handled by nav component --- www/components/Nav/index.tsx | 76 +++++++++++++++++++++++++++++--- www/components/UI/FlyOut.tsx | 85 +++++++++++++++++------------------- 2 files changed, 110 insertions(+), 51 deletions(-) diff --git a/www/components/Nav/index.tsx b/www/components/Nav/index.tsx index b4a24d7b680..e3f33a4ace6 100644 --- a/www/components/Nav/index.tsx +++ b/www/components/Nav/index.tsx @@ -17,6 +17,10 @@ const Nav = (props: Props) => { const { darkMode } = props const [open, setOpen] = useState(false) + const [openProduct, setOpenProduct] = useState(false) + const [openDevelopers, setOpenDevelopers] = useState(false) + const [openCompany, setOpenCompany] = useState(false) + React.useEffect(() => { if (open) { console.log('open if') @@ -25,11 +29,25 @@ const Nav = (props: Props) => { } else { document.body.style.overflow = 'auto' } + + // window is accessible here. + window.addEventListener('scroll', function (e) { + // close Fly Outs window if user scrolls past 96px from top + if (window.pageYOffset > 96) { + handleCancel() + } + }) }, [open]) - function handleNavClick() { - // @ts-ignore - ref.current + function handleToggle(callback: any) { + handleCancel() + callback() + } + + function handleCancel() { + setOpenProduct(false) + setOpenDevelopers(false) + setOpenCompany(false) } const iconSections = Object.values(SolutionsData).map((solution: any, idx: number) => { @@ -135,6 +153,36 @@ const Nav = (props: Props) => { ) + const FlyOutNavButton = (props: any) => ( +
+ <> + {props.title} + + +
+ ) + return (