"use client" import styles from "./styles.module.scss" import { useEffect, useMemo, useState } from 'react' import classNames from 'classnames' type SideSliderProps = { children: React.ReactNode; } export const SideSlider = ({ children }: SideSliderProps) => { const [isVisible, setIsVisible] = useState(false) const [startX, setStartX] = useState(undefined) const [endX, setEndX] = useState(undefined) const [isMobile, setIsMobile] = useState(false) useEffect(() => { if(window.innerWidth < 700) { setIsMobile(true) } window.addEventListener("resize", () => { if(window.innerWidth < 700) { setIsMobile(true) } else { setIsMobile(false) } }) }, [setIsMobile]) // translateX the container when startX or endX changed const style = useMemo(() => { if (typeof endX === "number" && typeof startX === "number") return { transform: `translateX(${endX-startX}px)` } return undefined }, [endX, startX]) const className = classNames({ [styles.container]: true, [styles.isVisible]: isVisible, }); return (
setIsVisible(true): undefined} onMouseLeave={!isMobile ? () => setIsVisible(false): undefined} style={style} >
{ if(typeof startX === "undefined" && typeof endX === "undefined") { setStartX(e.touches[0].clientX) setEndX(e.touches[0].clientX) } }} onTouchMove={e => { setEndX(e.changedTouches[0].clientX) }} >
{children}
) }