import React from "react" import { Flex } from "@chakra-ui/react" import { Attention } from "../Buttons/Attention" import { Hamburger } from "../Buttons/Hamburger" import { RightNav } from "./ReactiveRightNav" export const ReactiveNav = (props) => { const [navItems] = React.useState([{}]) const setNav = React.useCallback((active) => { setMt(active ? "100%" : "0%") setNavActive(active) }, []) React.useEffect(() => { // react to mouse move event const listener = (event) => { if (event?.clientY <= 20) { setNav(true) } else if (event?.clientY >= 100) { setNav(false) } } window.addEventListener("mousemove", listener) return () => { window.removeEventListener("mousemove", listener) } }, [setNav]) const [navActive, setNavActive] = React.useState(false) const [mt, setMt] = React.useState("0%") return ( <> {/* w={navActive ? '0px' : '40px'} */} ) }