-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Render navbar interactives clientside
- Loading branch information
Showing
2 changed files
with
165 additions
and
119 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,70 +1,87 @@ | ||
| import React, { useRef, useEffect } from "react" | ||
| import clsx from "clsx" | ||
| import { Link } from "gatsby" | ||
| import { isDesktop } from "react-device-detect" | ||
|
|
||
| import Chevron from "@mui/icons-material/ChevronRight" | ||
| import NavbarImage from "../../../svgs/navbar-image-1.svg" | ||
|
|
||
| import { products, compare } from "./items" | ||
|
|
||
| import Card from "../Card" | ||
| import CardItem from "../CardItem" | ||
|
|
||
| const HeaderNavbarProduct = ({ active, setActive }) => { | ||
| const wrapperRef = useRef(null); | ||
|
|
||
| const onClick = (ev) => { | ||
| ev.preventDefault() | ||
| if (!isDesktop) setActive((prev) => prev === 'product' ? '' : 'product') | ||
| } | ||
|
|
||
| const onMouseEnter = (ev) => { | ||
| ev.preventDefault() | ||
| if (isDesktop) setActive('product') | ||
| } | ||
|
|
||
| const onMouseLeave = (ev) => { | ||
| ev.preventDefault() | ||
| if (isDesktop) setActive('') | ||
| } | ||
|
|
||
| useEffect(() => { | ||
| function handleClickOutside(event) { | ||
| if (isDesktop && wrapperRef.current && !wrapperRef.current.contains(event.target) && !event.target.className?.includes?.('active')) { | ||
| setActive('') | ||
| } | ||
| } | ||
|
|
||
| if (active) document.addEventListener("mousedown", handleClickOutside) | ||
|
|
||
| return () => { | ||
| document.removeEventListener("mousedown", handleClickOutside) | ||
| }; | ||
| }, [active]); | ||
|
|
||
| return ( | ||
| <> | ||
| <Link className={clsx("global-header-link", active && "active")} to="#" onClick={onClick} onMouseEnter={onMouseEnter}> | ||
| Product | ||
| <Chevron className="menu-chevron" fontSize="small" /> | ||
| </Link> | ||
| <Card customRef={wrapperRef} show={active} onMouseLeave={onMouseLeave}> | ||
| <CardItem title="PRODUCT" onlyContent items={products} /> | ||
| <CardItem title="COMPARE" items={compare} /> | ||
| <CardItem className="hide-on-mobile" title="CASE STUDY"> | ||
| <NavbarImage /> | ||
| <Link | ||
| target="_blank" | ||
| to="/customers/connectngo" | ||
| className="cta-button" | ||
| > | ||
| Read Customer Story | ||
| </Link> | ||
| </CardItem> | ||
| </Card> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default HeaderNavbarProduct | ||
| import React, { useRef, useEffect } from "react" | ||
| import clsx from "clsx" | ||
| import { Link } from "gatsby" | ||
| import { isDesktop } from "react-device-detect" | ||
|
|
||
| import Chevron from "@mui/icons-material/ChevronRight" | ||
| import NavbarImage from "../../../svgs/navbar-image-1.svg" | ||
|
|
||
| import { products, compare } from "./items" | ||
|
|
||
| import CardItem from "../CardItem" | ||
|
|
||
| const Card = React.lazy(() => import("../Card")) | ||
|
|
||
| const HeaderNavbarProduct = ({ active, setActive }) => { | ||
| const wrapperRef = useRef(null) | ||
|
|
||
| const onClick = ev => { | ||
| ev.preventDefault() | ||
| if (!isDesktop) setActive(prev => (prev === "product" ? "" : "product")) | ||
| } | ||
|
|
||
| const onMouseEnter = ev => { | ||
| ev.preventDefault() | ||
| if (isDesktop) setActive("product") | ||
| } | ||
|
|
||
| const onMouseLeave = ev => { | ||
| ev.preventDefault() | ||
| if (isDesktop) setActive("") | ||
| } | ||
|
|
||
| useEffect(() => { | ||
| function handleClickOutside(event) { | ||
| if ( | ||
| isDesktop && | ||
| wrapperRef.current && | ||
| !wrapperRef.current.contains(event.target) && | ||
| !event.target.className?.includes?.("active") | ||
| ) { | ||
| setActive("") | ||
| } | ||
| } | ||
|
|
||
| if (active) document.addEventListener("mousedown", handleClickOutside) | ||
|
|
||
| return () => { | ||
| document.removeEventListener("mousedown", handleClickOutside) | ||
| } | ||
| }, [active]) | ||
|
|
||
| return ( | ||
| <> | ||
| <Link | ||
| className={clsx("global-header-link", active && "active")} | ||
| to="#" | ||
| onClick={onClick} | ||
| onMouseEnter={onMouseEnter} | ||
| > | ||
| Product | ||
| <Chevron className="menu-chevron" fontSize="small" /> | ||
| </Link> | ||
| <React.Suspense fallback={<div>Loading...</div>}> | ||
| <Card | ||
| customRef={wrapperRef} | ||
| show={active} | ||
| onMouseLeave={onMouseLeave} | ||
| > | ||
| <CardItem title="PRODUCT" onlyContent items={products} /> | ||
| <CardItem title="COMPARE" items={compare} /> | ||
| <CardItem className="hide-on-mobile" title="CASE STUDY"> | ||
| <NavbarImage /> | ||
| <Link | ||
| target="_blank" | ||
| to="/customers/connectngo" | ||
| className="cta-button" | ||
| > | ||
| Read Customer Story | ||
| </Link> | ||
| </CardItem> | ||
| </Card> | ||
| </React.Suspense> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default HeaderNavbarProduct |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters