nyne/nysoure
1
0
Fork 0
mirror of https://github.com/wgh136/nysoure.git synced 2025-09-27 12:17:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add Floating To Top button for improved navigation

Browse Source
This commit is contained in:
nyne
2025-05-31 16:19:08 +08:00
parent d597d62c1c
commit 03876d106a
1 changed files with 28 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/components/navigator.tsx
View File

@@ -2,7 +2,7 @@ import { app } from "../app.ts";
import { network } from "../network/network.ts"; import { network } from "../network/network.ts";
import { useNavigate, useOutlet } from "react-router"; import { useNavigate, useOutlet } from "react-router";
import { createContext, useContext, useEffect, useState } from "react"; import { createContext, useContext, useEffect, useState } from "react";
import { MdOutlinePerson, MdSearch, MdSettings } from "react-icons/md"; import {MdArrowUpward, MdOutlinePerson, MdSearch, MdSettings} from "react-icons/md";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import UploadingSideBar from "./uploading_side_bar.tsx"; import UploadingSideBar from "./uploading_side_bar.tsx";
import { IoLogoGithub } from "react-icons/io"; import { IoLogoGithub } from "react-icons/io";
@@ -26,6 +26,7 @@ export default function Navigator() {
const { t } = useTranslation(); const { t } = useTranslation();
return <> return <>
<FloatingToTopButton/>
<div className="navbar bg-base-100 shadow-sm fixed top-0 z-1 lg:z-10" key={key}> <div className="navbar bg-base-100 shadow-sm fixed top-0 z-1 lg:z-10" key={key}>
<div className={"flex-1 max-w-7xl mx-auto flex items-center"}> <div className={"flex-1 max-w-7xl mx-auto flex items-center"}>
<div className="dropdown"> <div className="dropdown">
@@ -270,3 +271,29 @@ function SearchBar() {
return searchField return searchField
} }
function FloatingToTopButton() {
const [visible, setVisible] = useState(false);
useEffect(() => {
const handleScroll = () => {
if (window.scrollY > 200) {
setVisible(true);
} else {
setVisible(false);
}
};
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
return <button className={`btn btn-circle btn-soft btn-secondary border shadow-lg btn-lg fixed right-4 ${visible ? "bottom-4" : "-bottom-12"} transition-all z-50`} onClick={() => {
window.scrollTo({ top: 0, behavior: "smooth" });
}}>
<MdArrowUpward size={20}/>
</button>;
}