Merge pull request #50 from returnkirbo/scroll-reset

reset scroll upon navigation

src/components/LinksDropdown.tsx

@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
+import { To, useNavigate } from "react-router-dom";
 
 import { base64ToBuffer, decryptData } from "@/backend/accounts/crypto";
 import { UserAvatar } from "@/components/Avatar";
@@ -24,8 +24,12 @@ function GoToLink(props: {
   const navigate = useNavigate();
 
   const goTo = (href: string) => {
-    if (href.startsWith("http")) window.open(href, "_blank");
+    if (href.startsWith("http")) {
-    else navigate(href);
+      window.open(href, "_blank");
+    } else {
+      window.scrollTo(0, 0);
+      navigate(href);
+    }
   };
 
   return (

src/components/layout/Navigation.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, To, useNavigate } from "react-router-dom";
 
 import { NoUserAvatar, UserAvatar } from "@/components/Avatar";
 import { IconPatch } from "@/components/buttons/IconPatch";
@@ -24,6 +24,11 @@ export function Navigation(props: NavigationProps) {
   const navigate = useNavigate();
   const { loggedIn } = useAuth();
 
+  const handleClick = (path: To) => {
+    window.scrollTo(0, 0);
+    navigate(path);
+  };
+
   return (
     <>
       {/* lightbar */}
@@ -84,6 +89,7 @@ export function Navigation(props: NavigationProps) {
               <Link
                 className="block tabbable rounded-full text-xs ssm:text-base"
                 to="/"
+                onClick={() => window.scrollTo(0, 0)}
               >
                 <BrandPill clickable header />
               </Link>
@@ -104,7 +110,7 @@ export function Navigation(props: NavigationProps) {
                 <IconPatch icon={Icons.GITHUB} clickable downsized />
               </a>
               <a
-                onClick={() => navigate("/discover")}
+                onClick={() => handleClick("/discover")}
                 rel="noreferrer"
                 className="text-xl text-white tabbable rounded-full"
               >

src/pages/HomePage.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
+import { To, useNavigate } from "react-router-dom";
 
 import { WideContainer } from "@/components/layout/WideContainer";
 import { useDebounce } from "@/hooks/useDebounce";
@@ -48,6 +48,11 @@ export function HomePage() {
   const [showBookmarks, setShowBookmarks] = useState(false);
   const [showWatching, setShowWatching] = useState(false);
 
+  const handleClick = (path: To) => {
+    window.scrollTo(0, 0);
+    navigate(path);
+  };
+
   return (
     <HomeLayout showBg={showBg}>
       <div className="mb-16 sm:mb-24">
@@ -77,7 +82,7 @@ export function HomePage() {
                 <p className="text-[18.5px] pb-3">{emptyText}</p>
                 <Button
                   className="px-py p-[0.35em] mt-3 rounded-xl text-type-dimmed box-content text-[18px] bg-largeCard-background text-buttons-secondaryText justify-center items-center"
-                  onClick={() => navigate("/discover")}
+                  onClick={() => handleClick("/discover")}
                 >
                   {t("home.search.discover")}
                 </Button>