From a47fe0f84575476d50711b790174fe2304e2553a Mon Sep 17 00:00:00 2001 From: Iqbal Date: Thu, 29 Oct 2026 17:35:30 +0700 Subject: [PATCH] Open each page at the top The window scrolls rather than the page area, so moving to another page after scrolling down opened it at the same depth. Scroll to the top whenever the route changes. Co-Authored-By: Claude Opus 5.5 --- src/components/AppLayout.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index 6a3f240..012211b 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from 'react' +import { useEffect, useLayoutEffect, useRef, useState } from 'react' import { useClerk, useOrganization, useOrganizationList, useUser } from '@clerk/react' import { useQuery } from '@tanstack/react-query' import { NavLink, Outlet, useLocation } from 'react-router-dom' @@ -144,6 +144,8 @@ export function AppLayout() { // Nav groups stay closed unless they hold the current page; a click on the label overrides that until the next route. const [toggled, setToggled] = useState>>({}) useEffect(() => setToggled({}), [pathname]) + // The window scrolls, not
, so a new page would open at the last page's scroll position. + useLayoutEffect(() => window.scrollTo(0, 0), [pathname]) const [collapsed, setCollapsed] = useState(readCollapsed) const toggleCollapsed = () => setCollapsed(c => { try { localStorage.setItem(COLLAPSED_KEY, c ? '0' : '1') } catch { /* keep it for this visit only */ }