From e0ba3d8e5b970ad2ae8f3998486e9799fd55cfc9 Mon Sep 17 00:00:00 2001
From: Tim Broddin <tim@wannabes.be>
Date: Fri, 24 Nov 2023 16:14:29 +0100
Subject: [PATCH] feat(scrolltotop): add ScrollToTop component

---
 src/components/scroll-to-top.tsx | 11 +++++++++++
 src/index.tsx                    |  2 ++
 2 files changed, 13 insertions(+)
 create mode 100644 src/components/scroll-to-top.tsx

diff --git a/src/components/scroll-to-top.tsx b/src/components/scroll-to-top.tsx
new file mode 100644
index 000000000..0eeb4c0ef
--- /dev/null
+++ b/src/components/scroll-to-top.tsx
@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export default function ScrollToTop() {
+    const { pathname } = useLocation();
+    useEffect(() => {
+        document.getElementsByTagName('main')?.[0]?.scrollTo(0, 0);
+    }, [pathname]);
+
+    return null;
+}
diff --git a/src/index.tsx b/src/index.tsx
index 1aebd89e2..a73a4ec5b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -29,6 +29,7 @@ import ErrorBoundary from './components/ErrorBoundary';
 import DashboardPage from './components/dashboard-page';
 import ExtensionsEditorPage from './components/extensions-editor';
 import GroupPage from './components/groups/GroupPage';
+import ScrollToTop from './components/scroll-to-top';
 
 import { ThemeSwitcherProvider } from 'react-css-theme-switcher';
 import i18n from './i18n';
@@ -55,6 +56,7 @@ const Main = () => {
                     <Provider store={store}>
                         <ThemeSwitcherProvider themeMap={themes} defaultTheme={theme}>
                             <HashRouter>
+                                <ScrollToTop />
                                 <div className="main">
                                     <NavBar />
                                     <main className="content p-0 p-sm-3">