feat(SW-337): make tabnavigation sticky

2024-09-04 11:24:42 +02:00
parent 16370f58b6
commit 346ccfdfbb
5 changed files with 48 additions and 5 deletions
--- a/app/globals.css
+++ b/app/globals.css
@@ -109,6 +109,8 @@

  --header-z-index: 10;
  --menu-overlay-z-index: 10;
+
+  --hotel-page-map-desktop-width: 23.75rem;
 }

 * {
--- a/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
+++ b/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
@@ -6,7 +6,7 @@ import { ChevronRightIcon, ImageIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Title from "@/components/TempDesignSystem/Text/Title"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

 import styles from "./roomCard.module.css"

@@ -57,9 +57,14 @@ export function RoomCard({
      </button>
      <div className={styles.content}>
        <div className={styles.innerContent}>
-          <Title as="h4" level="h3" textTransform="capitalize" color="black">
+          <Subtitle
+            textTransform="capitalize"
+            textAlign="center"
+            type="one"
+            color="black"
+          >
            {title}
-          </Title>
+          </Subtitle>
          <Body color="grey">{subtitle}</Body>
        </div>
        <Button
--- a/components/ContentType/HotelPage/TabNavigation/index.tsx
+++ b/components/ContentType/HotelPage/TabNavigation/index.tsx
@@ -1,4 +1,5 @@
 "use client"
+import { useEffect, useRef } from "react"
 import { useIntl } from "react-intl"

 import Link from "@/components/TempDesignSystem/Link"
@@ -11,6 +12,26 @@ import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
 export default function TabNavigation() {
  const hash = useHash()
  const intl = useIntl()
+  const navRef = useRef<HTMLElement>(null)
+
+  useEffect(() => {
+    const nav = navRef.current
+    if (!nav) return
+
+    const sticky = nav.offsetTop
+
+    const handleScroll = () => {
+      if (window.scrollY > sticky) {
+        nav.classList.add(styles.sticky)
+      } else {
+        nav.classList.remove(styles.sticky)
+      }
+    }
+
+    window.addEventListener("scroll", handleScroll)
+    return () => window.removeEventListener("scroll", handleScroll)
+  }, [])
+
  const hotelTabLinks: { href: HotelHashValues; text: string }[] = [
    { href: HotelHashValues.overview, text: "Overview" },
    { href: HotelHashValues.rooms, text: "Rooms" },
@@ -20,8 +41,9 @@ export default function TabNavigation() {
    { href: HotelHashValues.activities, text: "Activities" },
    { href: HotelHashValues.faq, text: "FAQ" },
  ]
+
  return (
-    <nav className={styles.tabsContainer}>
+    <nav ref={navRef} className={styles.tabsContainer}>
      {hotelTabLinks.map((link) => {
        const isActive =
          hash === link.href ||
--- a/components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css
+++ b/components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css
@@ -7,10 +7,24 @@
  padding: 0 var(--Spacing-x2);
  max-width: 100vw;
  width: 100%;
+  background-color: var(--Base-Surface-Subtle-Normal);
+  z-index: 1000;
+}
+
+.sticky {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-bottom: 1px solid var(--Base-Border-Subtle);
+  width: 100%;
 }

@media screen and (min-width: 1367px) {
  .tabsContainer {
    padding: 0 var(--Spacing-x5);
  }
+  .sticky {
+    max-width: calc(100% - var(--hotel-page-map-desktop-width));
+  }
 }
--- a/components/ContentType/HotelPage/hotelPage.module.css
+++ b/components/ContentType/HotelPage/hotelPage.module.css
@@ -29,7 +29,7 @@
    grid-template-areas:
      "topSection mapContainer"
      "mainSection mapContainer";
-    grid-template-columns: 1fr 23.75rem;
+    grid-template-columns: 1fr var(--hotel-page-map-desktop-width);
  }
  .topSection {
    grid-area: topSection;