diff --git a/app/routes/home.tsx b/app/routes/home.tsx index fd8c52e..004b92e 100644 --- a/app/routes/home.tsx +++ b/app/routes/home.tsx @@ -14,6 +14,7 @@ import {ResponseError} from "~/classes/responseError"; import ItemList from "~/components/itemList"; import ItemDialog from "~/components/itemDialog"; import OutlinedFlagIcon from '@mui/icons-material/OutlinedFlag'; +import NorthOutlinedIcon from '@mui/icons-material/NorthOutlined'; import ReportDialog from "~/components/reportDialog"; import LoopIcon from '@mui/icons-material/Loop'; import ClearIcon from '@mui/icons-material/Clear'; @@ -28,6 +29,8 @@ export default function Home() { const [showDialog, setShowDialog] = useState(false); const [currentDialogBlacklistItem, setCurrentDialogBlacklistItem] = useState(null); const [fabIsHovered, setFabIsHovered] = useState(false); + const [fabGetUpIsHovered, setFabGetUpIsHovered] = useState(false); + const [getUpFabIsVisible, setGetUpFabIsVisible] = useState(false); const [showReportDialog, setReportShowDialog] = useState(false); const [triggerUpdate, setTriggerUpdate] = useState(0); const [showEraseButton, setShowEraseButton] = useState(false); @@ -66,6 +69,13 @@ export default function Home() { } }, [searchText]); + useEffect(() => { + window.addEventListener('scroll', toggleVisibility); + return () => { + window.removeEventListener('scroll', toggleVisibility); + }; + }, []); + function handleSearch(text: string) { setSearchText(text); } @@ -96,6 +106,21 @@ export default function Home() { setSearchText(""); }; + const toggleVisibility = () => { + if (window.pageYOffset > 70) { + setGetUpFabIsVisible(true); + } else { + setGetUpFabIsVisible(false); + } + }; + + const scrollToTop = () => { + window.scrollTo({ + top: 0, + behavior: 'smooth', // Плавная прокрутка + }); + }; + const search = (searchString: string) => { searchString = searchString.toLowerCase(); return totalBlacklistItems.filter((item) => { @@ -161,6 +186,23 @@ export default function Home() { + scrollToTop()} + onMouseEnter={() => setFabGetUpIsHovered(true)} + onMouseLeave={() => setFabGetUpIsHovered(false)} + variant='circular' + sx={{ + position: 'fixed', + bottom: 85, + right: 16, + zIndex: 1000, + width: '56px', + overflow: 'hidden', + display: getUpFabIsVisible ? 'block' : 'none', + }} + > + + handleReportDialogOpen()} onMouseEnter={() => setFabIsHovered(true)}