always scroll to top on route change, except on back nav
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
This commit is contained in:
parent
73753c2764
commit
86906682f9
@ -225,7 +225,6 @@ export function ThreadRoute({ id }: { id?: string }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<ThreadContextWrapper link={link}>
|
<ThreadContextWrapper link={link}>
|
||||||
<ScrollToTop />
|
|
||||||
<Thread />
|
<Thread />
|
||||||
</ThreadContextWrapper>
|
</ThreadContextWrapper>
|
||||||
);
|
);
|
||||||
|
@ -1,12 +1,16 @@
|
|||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
import { useLocation } from "react-router-dom";
|
import { useLocation, useNavigationType } from "react-router-dom";
|
||||||
|
|
||||||
export default function ScrollToTop() {
|
export default function ScrollToTop() {
|
||||||
const { pathname } = useLocation();
|
const { pathname } = useLocation();
|
||||||
|
const navigationType = useNavigationType(); // This hook is available in React Router v6
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
window.scrollTo(0, 0);
|
if (navigationType !== "POP") {
|
||||||
}, [pathname]);
|
window.scrollTo(0, 0);
|
||||||
|
}
|
||||||
|
// Only scrolls to top on PUSH or REPLACE, not on POP
|
||||||
|
}, [pathname, navigationType]);
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
@ -74,7 +74,7 @@ const getNavLinkClass = (isActive: boolean, narrow: boolean) => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function NavSidebar({ narrow = false }: { narrow: boolean }) {
|
export default function NavSidebar({ narrow = false }: { narrow?: boolean }) {
|
||||||
const { publicKey, readonly } = useLogin(s => ({
|
const { publicKey, readonly } = useLogin(s => ({
|
||||||
publicKey: s.publicKey,
|
publicKey: s.publicKey,
|
||||||
readonly: s.readonly,
|
readonly: s.readonly,
|
||||||
|
@ -20,6 +20,7 @@ import { LoginStore } from "@/Utils/Login";
|
|||||||
|
|
||||||
import NavSidebar from "./NavSidebar";
|
import NavSidebar from "./NavSidebar";
|
||||||
import RightColumn from "./RightColumn";
|
import RightColumn from "./RightColumn";
|
||||||
|
import ScrollToTop from "@/Components/ScrollToTop";
|
||||||
|
|
||||||
export default function Index() {
|
export default function Index() {
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
@ -57,6 +58,7 @@ export default function Index() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<ErrorBoundary>
|
<ErrorBoundary>
|
||||||
|
<ScrollToTop />
|
||||||
<div className="flex justify-center">
|
<div className="flex justify-center">
|
||||||
<div className="w-full max-w-screen-xl">
|
<div className="w-full max-w-screen-xl">
|
||||||
<div className="flex flex-row">
|
<div className="flex flex-row">
|
||||||
|
@ -53,7 +53,6 @@ export default function NotificationsPage({ onClick }: { onClick?: (link: NostrL
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ScrollToTop />
|
|
||||||
<div className="main-content">
|
<div className="main-content">
|
||||||
{CONFIG.features.notificationGraph && (
|
{CONFIG.features.notificationGraph && (
|
||||||
<Suspense fallback={<PageSpinner />}>
|
<Suspense fallback={<PageSpinner />}>
|
||||||
|
Loading…
Reference in New Issue
Block a user