diff --git a/src/client/dd-hub-react/src/app.tsx b/src/client/dd-hub-react/src/app.tsx index 7964337..b9e1dce 100644 --- a/src/client/dd-hub-react/src/app.tsx +++ b/src/client/dd-hub-react/src/app.tsx @@ -1,8 +1,9 @@ import 'src/global.css'; -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import Fab from '@mui/material/Fab'; +import KeyboardArrowUpRoundedIcon from '@mui/icons-material/KeyboardArrowUpRounded'; import { usePathname } from 'src/routes/hooks'; @@ -17,12 +18,28 @@ type AppProps = { export default function App({ children }: AppProps) { useScrollToTop(); + const [showScrollTop, setShowScrollTop] = useState(false); + + useEffect(() => { + const handleScroll = () => { + setShowScrollTop(window.scrollY > 160); + }; + + handleScroll(); + window.addEventListener('scroll', handleScroll, { passive: true }); + + return () => window.removeEventListener('scroll', handleScroll); + }, []); + + const handleScrollTop = () => { + window.scrollTo({ top: 0, behavior: 'smooth' }); + }; + const ddButton = () => ( theme.shadows[6], + opacity: showScrollTop ? 1 : 0, + pointerEvents: showScrollTop ? 'auto' : 'none', + transform: showScrollTop ? 'translateY(0)' : 'translateY(12px)', + transition: 'opacity 0.24s ease, transform 0.24s ease', + '&:hover': { + bgcolor: 'primary.dark', + boxShadow: (theme) => theme.shadows[8], + }, }} > - Digital Data + );