feat(SW-593): fix map toggle positioning

components/ContentType/HotelPage/Map/MobileMapToggle/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { useCallback, useEffect, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 
 import useHotelPageStore from "@/stores/hotel-page"
@@ -13,15 +14,45 @@ export default function MobileMapToggle() {
   const { isDynamicMapOpen, openDynamicMap, closeDynamicMap } =
     useHotelPageStore()
 
+  const mapToggleRef = useRef<HTMLDivElement>(null)
+  const [isVisible, setIsVisible] = useState<boolean>(true)
+
+  const handleScroll = useCallback(() => {
+    if (mapToggleRef.current) {
+      const rect = mapToggleRef.current.getBoundingClientRect()
+      if (rect.top >= 150) {
+        setIsVisible(true)
+      } else {
+        setIsVisible(false)
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    handleScroll()
+
+    window.addEventListener("scroll", handleScroll)
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll)
+    }
+  }, [handleScroll])
+
   return (
-    <div className={styles.mobileToggle}>
+    <div
+      ref={mapToggleRef}
+      className={
+        isVisible
+          ? styles.mobileToggle
+          : `${styles.mobileToggle} ${styles.hidden}`
+      }
+    >
       <button
         type="button"
         className={`${styles.button} ${!isDynamicMapOpen ? styles.active : ""}`}
         onClick={closeDynamicMap}
       >
         <HouseIcon
-          className={styles.icon}
           color={!isDynamicMapOpen ? "white" : "red"}
           height={24}
           width={24}
@@ -34,7 +65,6 @@ export default function MobileMapToggle() {
         onClick={openDynamicMap}
       >
         <MapIcon
-          className={styles.icon}
           color={isDynamicMapOpen ? "white" : "red"}
           height={24}
           width={24}

components/ContentType/HotelPage/Map/MobileMapToggle/mobileToggle.module.css

@@ -1,8 +1,7 @@
 .mobileToggle {
-  position: fixed;
+  position: sticky;
   bottom: var(--Spacing-x5);
-  left: 50%;
+  margin: 0 auto;
-  transform: translateX(-50%);
   z-index: 1;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -41,6 +40,10 @@
   background-color: var(--Primary-Strong-Surface-Hover);
 }
 
+.hidden {
+  visibility: hidden;
+}
+
 @media screen and (min-width: 1367px) {
   .mobileToggle {
     display: none;