Merge pull request #206 from RMoodsTeam/181-scroll-to-top-affix

181: Add ScrollToTop
RMoodsTeam · Dec 2, 2024 · c162f3c · c162f3c
2 parents a69ee44 + e8763fe
commit c162f3c
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 14 deletions.
diff --git a/frontend/src/components/DashboardLayout.tsx b/frontend/src/components/DashboardLayout.tsx
@@ -3,6 +3,7 @@ import { Outlet } from 'react-router-dom';
 import Navbar from './navbar/Navbar.tsx';
 import Footer from './footer/Footer.tsx';
 import { Box, Flex } from '@mantine/core';
+import { ScrollToTop } from '../components/ScrollToTop';
 
 const dashboardFlex = {
   flex: 'auto',
@@ -16,20 +17,23 @@ const dashboardContainer = {
 
 const DashboardLayout = () => {
   return (
-    <Flex>
-      <Sidebar />
-      <Flex
-        // TODO: Cleanup
-        style={{ flex: 'auto', flexDirection: 'column' }}
-        // style={dashboardFlex}
-      >
-        <Navbar />
-        <Box style={dashboardContainer}>
-          <Outlet />
-        </Box>
-        <Footer />
+    <>
+      <Flex>
+        <Sidebar />
+        <Flex
+          // TODO: Cleanup
+          style={{ flex: 'auto', flexDirection: 'column' }}
+          // style={dashboardFlex}
+        >
+          <Navbar />
+          <Box style={dashboardContainer}>
+            <Outlet />
+          </Box>
+          <Footer />
+        </Flex>
       </Flex>
-    </Flex>
+      <ScrollToTop />
+    </>
   );
 };
 

diff --git a/frontend/src/components/Demo.tsx b/frontend/src/components/Demo.tsx
@@ -3,6 +3,7 @@ import { Box, Button, Center, Code, Title } from '@mantine/core';
 import { FeedRequest } from '../rmoods/client/types';
 import RMoodsClient from '../rmoods/client/RMoodsClient.ts';
 import LoremIpsum from './LoremIpsum';
+import { ScrollToTop } from '../components/ScrollToTop';
 
 const Demo: React.FC = () => {
   const [reportRes, setReportRes] = useState<object | null>(null);
@@ -40,7 +41,8 @@ const Demo: React.FC = () => {
           <Code>{JSON.stringify(reportRes, null, 2)}</Code>
         </Center>
       </Box>
-      <LoremIpsum n={3} />
+      <LoremIpsum n={20} />
+      <ScrollToTop />
     </>
   );
 };

diff --git a/frontend/src/components/ScrollToTop.tsx b/frontend/src/components/ScrollToTop.tsx
@@ -0,0 +1,25 @@
+import { Affix, Button, Transition, rem } from '@mantine/core';
+import { IconArrowUp } from '@tabler/icons-react';
+import { useWindowScroll } from '@mantine/hooks';
+
+export const ScrollToTop = () => {
+  const [scroll, scrollTo] = useWindowScroll();
+
+  return (
+    <Affix position={{ bottom: rem(80), right: rem(20) }}>
+      <Transition transition="slide-up" mounted={scroll.y > 0}>
+        {(transitionStyles) => (
+          <Button
+            style={transitionStyles}
+            onClick={() => scrollTo({ y: 0 })}
+            variant="light"
+            radius="xl"
+            aria-label="Scroll to top"
+          >
+            <IconArrowUp size="1.2rem" />
+          </Button>
+        )}
+      </Transition>
+    </Affix>
+  );
+};