chore: listen scroll to hide/show back to top button

1 files changed, 18 insertions, 3 deletions

diff --git a/src/components/organisms/layout/footer.tsx b/src/components/organisms/layout/footer.tsx
index 1426e96..c60afec 100644
--- a/src/components/organisms/layout/footer.tsx
+++ b/src/components/organisms/layout/footer.tsx
@@ -1,7 +1,9 @@
 import Copyright, {
   type CopyrightProps,
 } from '@components/atoms/layout/copyright';
-import BackToTop from '@components/molecules/buttons/back-to-top';
+import BackToTop, {
+  type BackToTopProps,
+} from '@components/molecules/buttons/back-to-top';
 import Nav, { type NavItem } from '@components/molecules/nav/nav';
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
@@ -9,6 +11,10 @@ import styles from './footer.module.scss';
 
 export type FooterProps = {
   /**
+   * Set additional classnames to the back to top button.
+   */
+  backToTopClassName?: BackToTopProps['className'];
+  /**
    * Set additional classnames to the footer element.
    */
   className?: string;
@@ -31,7 +37,13 @@ export type FooterProps = {
  *
  * Renders a footer with copyright and nav;
  */
-const Footer: FC<FooterProps> = ({ className, copyright, navItems, topId }) => {
+const Footer: FC<FooterProps> = ({
+  backToTopClassName,
+  className = '',
+  copyright,
+  navItems,
+  topId,
+}) => {
   const intl = useIntl();
   const ariaLabel = intl.formatMessage({
     defaultMessage: 'Footer',
@@ -54,7 +66,10 @@ const Footer: FC<FooterProps> = ({ className, copyright, navItems, topId }) => {
           className={styles.nav}
         />
       )}
-      <BackToTop target={topId} className={styles['back-to-top']} />
+      <BackToTop
+        target={topId}
+        className={`${styles['back-to-top']} ${backToTopClassName}`}
+      />
     </footer>
   );
 };