feat: scroll to top on nav touch

HORNET-Storage · Jul 6, 2024 · c3a5fb4 · c3a5fb4
1 parent 9353e55
commit c3a5fb4
Showing 1 changed file with 17 additions and 5 deletions.
diff --git a/src/components/header/layouts/MobileHeader.tsx b/src/components/header/layouts/MobileHeader.tsx
@@ -12,30 +12,42 @@ interface MobileHeaderProps {
   isSiderOpened: boolean;
 }
 
+const handleScrollToTop = () => {
+  document.querySelector('#main-content')?.scrollTo({ top: 0, behavior: 'smooth' });
+};
+
+const handleTouchStart = (event: React.TouchEvent) => {
+  const target = event.target as HTMLElement;
+  if (target.closest('.header-button')) {
+    return;
+  }
+  handleScrollToTop();
+};
+
 export const MobileHeader: React.FC<MobileHeaderProps> = ({ toggleSider, isSiderOpened }) => {
   return (
-    <BaseRow justify="space-between" align="middle">
+    <BaseRow onTouchStart={handleTouchStart} justify="space-between" align="middle">
       <BaseCol>
         <ProfileDropdown />
       </BaseCol>
 
       <BaseCol>
         <BaseRow align="middle">
-          <BaseCol>
+          <BaseCol className="mobile-header-button">
             <NotificationsDropdown />
           </BaseCol>
 
-          <BaseCol>
+          <BaseCol className="mobile-header-button">
             <HeaderSearch />
           </BaseCol>
 
-          <BaseCol>
+          <BaseCol className="mobile-header-button">
             <SettingsDropdown />
           </BaseCol>
         </BaseRow>
       </BaseCol>
 
-      <S.BurgerCol>
+      <S.BurgerCol className="mobile-header-button">
         <S.MobileBurger onClick={toggleSider} isCross={isSiderOpened} />
       </S.BurgerCol>
     </BaseRow>