From 31c3482831751da49bcbea1f0bbb0d2cac48fa8d Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Thu, 20 Feb 2025 00:12:06 +0100
Subject: [PATCH] perf(topbar): optimize scroll up/down animation with GPU
 acceleration

---
 src/components/topbar/topbar.module.css | 4 +++-
 src/components/topbar/topbar.tsx        | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/topbar/topbar.module.css b/src/components/topbar/topbar.module.css
index 1dae083c..9a8ed07c 100644
--- a/src/components/topbar/topbar.module.css
+++ b/src/components/topbar/topbar.module.css
@@ -52,7 +52,9 @@
   position: fixed;
   width: 100%;
   z-index: 3;
-  transition: top 0.2s ease-in-out;
+  will-change: transform;
+  transform: translateY(0);
+  transition: transform 0.2s ease-in-out;
   align-items: center;
   justify-content: space-around;
 }
diff --git a/src/components/topbar/topbar.tsx b/src/components/topbar/topbar.tsx
index 1dec0c2a..27dc6436 100644
--- a/src/components/topbar/topbar.tsx
+++ b/src/components/topbar/topbar.tsx
@@ -194,7 +194,7 @@ const TopBarMobile = ({ subplebbitAddress }: { subplebbitAddress: string }) => {
   }, []);
 
   return (
-    <div className={styles.boardNavMobile} id='sticky-menu' style={{ top: visible ? 0 : '-23px' }}>
+    <div className={styles.boardNavMobile} style={{ transform: visible ? 'translateY(0)' : 'translateY(-23px)' }}>
       <div className={styles.boardSelect}>
         <strong>{t('board')}</strong>
         {boardSelect}