scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SW-337): make tabnavigation sticky

Browse Source
This commit is contained in:
Chuma McPhoy
2024-09-04 11:24:42 +02:00
parent 16370f58b6
commit 346ccfdfbb
5 changed files with 48 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/globals.css
View File

@@ -109,6 +109,8 @@
--header-z-index: 10; --header-z-index: 10;
--menu-overlay-z-index: 10; --menu-overlay-z-index: 10;
--hotel-page-map-desktop-width: 23.75rem;
} }
* { * {

11
components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
View File

@@ -6,7 +6,7 @@ import { ChevronRightIcon, ImageIcon } from "@/components/Icons"
import Image from "@/components/Image" import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button" import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body" 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" import styles from "./roomCard.module.css"
@@ -57,9 +57,14 @@ export function RoomCard({
</button> </button>
<div className={styles.content}> <div className={styles.content}>
<div className={styles.innerContent}> <div className={styles.innerContent}>
<Title as="h4" level="h3" textTransform="capitalize" color="black"> <Subtitle
textTransform="capitalize"
textAlign="center"
type="one"
color="black"
>
{title} {title}
</Title> </Subtitle>
<Body color="grey">{subtitle}</Body> <Body color="grey">{subtitle}</Body>
</div> </div>
<Button <Button

24
components/ContentType/HotelPage/TabNavigation/index.tsx
View File

@@ -1,4 +1,5 @@
"use client" "use client"
import { useEffect, useRef } from "react"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import Link from "@/components/TempDesignSystem/Link" import Link from "@/components/TempDesignSystem/Link"
@@ -11,6 +12,26 @@ import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
export default function TabNavigation() { export default function TabNavigation() {
const hash = useHash() const hash = useHash()
const intl = useIntl() 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 }[] = [ const hotelTabLinks: { href: HotelHashValues; text: string }[] = [
{ href: HotelHashValues.overview, text: "Overview" }, { href: HotelHashValues.overview, text: "Overview" },
{ href: HotelHashValues.rooms, text: "Rooms" }, { href: HotelHashValues.rooms, text: "Rooms" },
@@ -20,8 +41,9 @@ export default function TabNavigation() {
{ href: HotelHashValues.activities, text: "Activities" }, { href: HotelHashValues.activities, text: "Activities" },
{ href: HotelHashValues.faq, text: "FAQ" }, { href: HotelHashValues.faq, text: "FAQ" },
] ]
return ( return (
<nav className={styles.tabsContainer}> <nav ref={navRef} className={styles.tabsContainer}>
{hotelTabLinks.map((link) => { {hotelTabLinks.map((link) => {
const isActive = const isActive =
hash === link.href || hash === link.href ||

14
components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css
View File

@@ -7,10 +7,24 @@
padding: 0 var(--Spacing-x2); padding: 0 var(--Spacing-x2);
max-width: 100vw; max-width: 100vw;
width: 100%; 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) { @media screen and (min-width: 1367px) {
.tabsContainer { .tabsContainer {
padding: 0 var(--Spacing-x5); padding: 0 var(--Spacing-x5);
} }
.sticky {
max-width: calc(100% - var(--hotel-page-map-desktop-width));
}
} }

2
components/ContentType/HotelPage/hotelPage.module.css
View File

@@ -29,7 +29,7 @@
grid-template-areas: grid-template-areas:
"topSection mapContainer" "topSection mapContainer"
"mainSection mapContainer"; "mainSection mapContainer";
grid-template-columns: 1fr 23.75rem; grid-template-columns: 1fr var(--hotel-page-map-desktop-width);
} }
.topSection { .topSection {
grid-area: topSection; grid-area: topSection;