diff --git a/packages/app/src/Element/Button/NavLink.tsx b/packages/app/src/Element/Button/NavLink.tsx
new file mode 100644
index 00000000..1ea45e80
--- /dev/null
+++ b/packages/app/src/Element/Button/NavLink.tsx
@@ -0,0 +1,20 @@
+import { NavLink as RouterNavLink, NavLinkProps, useLocation } from "react-router-dom";
+
+export default function NavLink(props: NavLinkProps) {
+ const { to, onClick, ...rest } = props;
+ const location = useLocation();
+
+ const isActive = location.pathname === to.toString();
+
+ const handleClick = (event) => {
+ if (onClick) {
+ onClick(event);
+ }
+
+ if (isActive) {
+ window.scrollTo({ top: 0, behavior: "instant" });
+ }
+ };
+
+ return ;
+}
diff --git a/packages/app/src/Pages/Layout/Footer.tsx b/packages/app/src/Pages/Layout/Footer.tsx
index c83f845c..30dfe765 100644
--- a/packages/app/src/Pages/Layout/Footer.tsx
+++ b/packages/app/src/Pages/Layout/Footer.tsx
@@ -1,5 +1,5 @@
import React from "react";
-import { NavLink } from "react-router-dom";
+import NavLink from "@/Element/Button/NavLink";
import useLogin from "@/Hooks/useLogin";
import Icon from "@/Icons/Icon";
import { ProfileLink } from "@/Element/User/ProfileLink";
diff --git a/packages/app/src/Pages/Layout/NavSidebar.tsx b/packages/app/src/Pages/Layout/NavSidebar.tsx
index c66a5692..838f0015 100644
--- a/packages/app/src/Pages/Layout/NavSidebar.tsx
+++ b/packages/app/src/Pages/Layout/NavSidebar.tsx
@@ -1,5 +1,5 @@
import { LogoHeader } from "./LogoHeader";
-import { NavLink, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
import Icon from "@/Icons/Icon";
import { ProfileLink } from "../../Element/User/ProfileLink";
import Avatar from "../../Element/User/Avatar";
@@ -10,6 +10,7 @@ import { FormattedMessage, useIntl } from "react-intl";
import classNames from "classnames";
import { getCurrentSubscription } from "@/Subscription";
import { HasNotificationsMarker } from "@/Pages/Layout/HasNotificationsMarker";
+import NavLink from "@/Element/Button/NavLink";
const MENU_ITEMS = [
{
diff --git a/packages/app/src/Pages/Layout/NotificationsHeader.tsx b/packages/app/src/Pages/Layout/NotificationsHeader.tsx
index f06dcd20..2e1c474f 100644
--- a/packages/app/src/Pages/Layout/NotificationsHeader.tsx
+++ b/packages/app/src/Pages/Layout/NotificationsHeader.tsx
@@ -1,4 +1,4 @@
-import { Link, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
import { base64 } from "@scure/base";
import { unwrap } from "@snort/shared";
import { FormattedMessage } from "react-intl";
@@ -9,6 +9,7 @@ import useLogin from "@/Hooks/useLogin";
import useEventPublisher from "@/Hooks/useEventPublisher";
import SnortApi from "@/External/SnortApi";
import { HasNotificationsMarker } from "@/Pages/Layout/HasNotificationsMarker";
+import NavLink from "@/Element/Button/NavLink";
const NotificationsHeader = () => {
const navigate = useNavigate();
@@ -70,10 +71,10 @@ const NotificationsHeader = () => {
return (
-
+
-
+
);
};
diff --git a/packages/app/src/Pages/Layout/index.tsx b/packages/app/src/Pages/Layout/index.tsx
index 17f70407..b2fabbf9 100644
--- a/packages/app/src/Pages/Layout/index.tsx
+++ b/packages/app/src/Pages/Layout/index.tsx
@@ -21,7 +21,6 @@ import Footer from "@/Pages/Layout/Footer";
export default function Index() {
const location = useLocation();
- const [pageClass, setPageClass] = useState("page");
const { id, stalker } = useLogin(s => ({ id: s.id, stalker: s.stalker ?? false }));
useTheme();
@@ -29,22 +28,9 @@ export default function Index() {
useLoginFeed();
const hideHeaderPaths = ["/login", "/new"];
+ const shouldHideFooter = location.pathname.startsWith("/messages/");
const shouldHideHeader = hideHeaderPaths.some(path => location.pathname.startsWith(path));
- const pageClassPaths = useMemo(
- () => ({
- widePage: ["/login", "/messages"],
- noScroll: ["/messages"],
- }),
- [],
- );
-
- useEffect(() => {
- const isWidePage = pageClassPaths.widePage.some(path => location.pathname.startsWith(path));
- const isNoScroll = pageClassPaths.noScroll.some(path => location.pathname.startsWith(path));
- setPageClass(isWidePage ? (isNoScroll ? "scroll-lock" : "") : "page");
- }, [location, pageClassPaths]);
-
const handleKeyboardShortcut = useCallback(event => {
if (event.target && !isFormElement(event.target as HTMLElement)) {
event.preventDefault();
@@ -58,7 +44,7 @@ export default function Index() {
return (
-
+
{!shouldHideHeader &&
}
@@ -73,7 +59,7 @@ export default function Index() {
{isStalker &&
}
-
+ {!shouldHideFooter &&
}
);
}
diff --git a/packages/app/src/Pages/Messages/MessagesPage.tsx b/packages/app/src/Pages/Messages/MessagesPage.tsx
index 9d15b64a..491cc639 100644
--- a/packages/app/src/Pages/Messages/MessagesPage.tsx
+++ b/packages/app/src/Pages/Messages/MessagesPage.tsx
@@ -88,9 +88,9 @@ export default function MessagesPage() {
}
return (
-
+
{(pageWidth >= TwoCol || !chat) && (
-
+