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

feat(SW-184): added menu buttons and my pages menu

Browse Source
This commit is contained in:
Erik Tiekstra
2024-08-20 13:31:14 +02:00
parent 08cde7ae2f
commit 45095a27d4
20 changed files with 255 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
components/Header/MainMenu/MenuButton/index.tsx Normal file
View File

@@ -0,0 +1,11 @@
import styles from "./menuButton.module.css"
export default function MenuButton({
className,
...props
}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
const classNames = className
? `${styles.menuButton} ${className}`
: styles.menuButton
return <button type="button" className={classNames} {...props} />
}

13
components/Header/MainMenu/MenuButton/menuButton.module.css Normal file
View File

@@ -0,0 +1,13 @@
.menuButton {
display: flex;
gap: var(--Spacing-x1);
align-items: center;
background-color: transparent;
color: var(--Base-Text-High-contrast);
border-width: 0;
padding: 0;
cursor: pointer;
font-family: var(--typography-Body-Bold-fontFamily);
font-weight: var(--typography-Body-Bold-fontWeight);
font-size: var(--typography-Body-Bold-fontSize);
}

9
components/Header/MainMenu/MenuItem/index.tsx
View File

@@ -5,6 +5,7 @@ import { useState } from "react"
import { ChevronDownIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import MenuButton from "../MenuButton"
import { MenuItemProps } from "./menuItem"
import styles from "./menuItem.module.css"
@@ -18,17 +19,13 @@ export default function MenuItem({ item }: MenuItemProps) {
}
return children?.length ? (
<button
type="button"
className={styles.navigationButton}
onClick={handleButtonClick}
>
<MenuButton onClick={handleButtonClick}>
{title}
<ChevronDownIcon
className={`${styles.chevron} ${isExpanded ? styles.isExpanded : ""}`}
color="red"
/>
</button>
</MenuButton>
) : (
<Link href={href} color="burgundy">
{title}

14
components/Header/MainMenu/MenuItem/menuItem.module.css
View File

@@ -1,17 +1,3 @@
.navigationButton {
display: flex;
gap: var(--Spacing-x1);
align-items: center;
background-color: transparent;
color: var(--Base-Text-High-contrast);
border-width: 0;
padding: 0;
cursor: pointer;
font-family: var(--typography-Body-Bold-fontFamily);
font-weight: var(--typography-Body-Bold-fontWeight);
font-size: var(--typography-Body-Bold-fontSize);
}
.chevron {
transition: transform 0.2s;
}

0
components/Header/MainMenu/User/Avatar/avatar.module.css → components/Header/MainMenu/MyPages/Avatar/avatar.module.css
View File

2
components/Header/MainMenu/User/Avatar/avatar.ts → components/Header/MainMenu/MyPages/Avatar/avatar.ts
View File

@@ -2,5 +2,5 @@ import { ImageProps } from "next/image"
export interface AvatarProps {
image?: ImageProps
initials?: string
initials?: string | null
}

0
components/Header/MainMenu/User/Avatar/index.tsx → components/Header/MainMenu/MyPages/Avatar/index.tsx
View File

53
components/Header/MainMenu/MyPages/index.tsx Normal file
View File

@@ -0,0 +1,53 @@
"use client"
import Link from "next/link"
import { useIntl } from "react-intl"
import { myPages } from "@/constants/routes/myPages"
import { navigationQueryRouter } from "@/server/routers/contentstack/myPages/navigation/query"
import useDropdownStore from "@/stores/main-menu"
import { ChevronDownIcon } from "@/components/Icons"
import useLang from "@/hooks/useLang"
import { getInitials } from "@/utils/user"
import MenuButton from "../MenuButton"
import MyPagesMenu from "../MyPagesMenu"
import Avatar from "./Avatar"
import styles from "./myPages.module.css"
import { User } from "@/types/user"
export default function MyPages({
myPagesNavigation,
user,
}: {
myPagesNavigation: Awaited<ReturnType<(typeof navigationQueryRouter)["get"]>>
user: Pick<User, "firstName" | "lastName"> | null
}) {
const intl = useIntl()
const lang = useLang()
const { toggleMyPagesMobileMenu, isMyPagesMobileMenuOpen } =
useDropdownStore()
return user ? (
<>
<MenuButton className={styles.button} onClick={toggleMyPagesMobileMenu}>
<Avatar initials={getInitials(user.firstName, user.lastName)} />
{intl.formatMessage({ id: "Hi" })} {user.firstName}!
<ChevronDownIcon
className={`${styles.chevron} ${isMyPagesMobileMenuOpen ? styles.isExpanded : ""}`}
color="red"
/>
</MenuButton>
<MyPagesMenu navigation={myPagesNavigation} />
</>
) : (
<Link href={myPages[lang]} className={styles.link}>
<Avatar />
{intl.formatMessage({ id: "Log in/Join" })}
</Link>
)
}

11
components/Header/MainMenu/MyPages/myPages.module.css Normal file
View File

@@ -0,0 +1,11 @@
.button {
font-weight: 600;
}
.chevron {
transition: transform 0.2s;
}
.chevron.isExpanded {
transform: rotate(180deg);
}

83
components/Header/MainMenu/MyPagesMenu/index.tsx Normal file
View File

@@ -0,0 +1,83 @@
"use client"
import { useIntl } from "react-intl"
import { logout } from "@/constants/routes/handleAuth"
import { navigationQueryRouter } from "@/server/routers/contentstack/myPages/navigation/query"
import useDropdownStore from "@/stores/main-menu"
import { ArrowRightIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import useLang from "@/hooks/useLang"
import styles from "./myPagesMenu.module.css"
type Navigation = Awaited<ReturnType<(typeof navigationQueryRouter)["get"]>>
export default function MyPagesMenu({
navigation,
}: {
navigation: Navigation
}) {
const { formatMessage } = useIntl()
const lang = useLang()
const { toggleMyPagesMobileMenu, isMyPagesMobileMenuOpen } =
useDropdownStore()
if (!navigation) {
return null
}
console.log(navigation)
return (
<nav
className={`${styles.myPagesMenu} ${isMyPagesMobileMenuOpen ? styles.isExpanded : ""}`}
>
<div className={styles.friendTypeWrapper}>
<span className={styles.friendType}>Loyal friend</span>
<span className={styles.friendPoints}>12 350 points</span>
</div>
<ul className={styles.groups}>
{navigation.menuItems.map((menuItem, idx) => (
<li
key={`${menuItem.display_sign_out_link}-${idx}`}
id={`${menuItem.display_sign_out_link}-${idx}`}
className={styles.group}
>
<ul className={styles.menuItems}>
{menuItem.links.map((link) => (
<li key={link.uid}>
<Link
href={link.originalUrl || link.url}
partialMatch
size={menuItem.display_sign_out_link ? "small" : "regular"}
variant="myPageMobileDropdown"
color="burgundy"
onClick={toggleMyPagesMobileMenu}
className={styles.link}
>
{link.linkText}
<ArrowRightIcon className={styles.arrow} color="burgundy" />
</Link>
</li>
))}
{menuItem.display_sign_out_link && lang ? (
<li>
<Link
href={logout[lang]}
prefetch={false}
size="small"
color="burgundy"
variant="myPageMobileDropdown"
>
{formatMessage({ id: "Log out" })}
</Link>
</li>
) : null}
</ul>
</li>
))}
</ul>
</nav>
)
}

58
components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css Normal file
View File

@@ -0,0 +1,58 @@
.myPagesMenu {
position: absolute;
top: 46px;
right: 0;
background-color: #fff;
border-top: 1px solid #e3e0db;
display: none;
list-style: none;
overflow-y: visible;
margin: 0;
padding: var(--Spacing-x2) var(--Spacing-x4);
border-radius: var(--Corner-radius-Large);
box-shadow: 0px 0px 14px 6px #0000001a;
}
.myPagesMenu.isExpanded {
display: block;
}
.friendTypeWrapper {
padding: 0 var(--Spacing-x1) var(--Spacing-x2);
font-weight: 400;
color: var(--UI-Text-Medium-contrast);
}
.friendType {
font-family: var(--typography-Title-5-fontFamily);
letter-spacing: var(--typography-Title-5-letterSpacing);
font-size: var(--typography-Caption-Bold-fontSize);
text-transform: uppercase;
}
.friendType::after {
content: " · ";
display: inline;
padding: 0 var(--Spacing-x-half);
}
.groups,
.menuItems {
list-style: none;
}
.group {
padding: var(--Spacing-x2) 0;
border-top: 1px solid var(--Base-Border-Subtle);
}
.group:last-child {
padding-bottom: 0;
}
.arrow {
opacity: 0;
}
.link:hover .arrow {
opacity: 1;
}

16
components/Header/MainMenu/User/index.tsx
View File

@@ -1,16 +0,0 @@
import Link from "next/link"
import Avatar from "./Avatar"
import styles from "./user.module.css"
export default function User() {
return (
<div className={styles.user}>
<Link href="#" className={styles.link}>
<Avatar />
Log in/Join
</Link>
</div>
)
}

12
components/Header/MainMenu/User/user.module.css
View File

@@ -1,12 +0,0 @@
.user {
}
.link {
display: flex;
gap: var(--Spacing-x1);
align-items: center;
font-family: var(--typography-Body-Bold-fontFamily);
font-weight: 600;
color: var(--Base-Text-High-contrast);
text-decoration: none;
}

11
components/Header/MainMenu/index.tsx
View File

@@ -1,9 +1,11 @@
import Link from "next/link"
import { serverClient } from "@/lib/trpc/server"
import Image from "@/components/Image"
import Menu from "./Menu"
import User from "./User"
import MyPages from "./MyPages"
import styles from "./mainMenu.module.css"
@@ -29,6 +31,11 @@ export interface MenuItem {
}
export default async function MainMenu() {
const myPagesNavigation =
await serverClient().contentstack.myPages.navigation.get()
const user = await serverClient().user.name()
const menuItems: MenuItem[] = [
{
id: "hotels",
@@ -118,7 +125,7 @@ export default async function MainMenu() {
/>
</Link>
<Menu items={menuItems} />
<User />
<MyPages myPagesNavigation={myPagesNavigation} user={user} />
</nav>
</div>
)

2
components/Header/MainMenu/mainMenu.module.css
View File

@@ -1,11 +1,11 @@
.mainMenu {
background-color: var(--Base-Surface-Primary-light-Normal);
padding: var(--Spacing-x2);
border-top: 1px solid var(--Base-Border-Subtle);
border-bottom: 1px solid var(--Base-Border-Subtle);
}
.content {
position: relative;
max-width: 89.5rem;
margin: 0 auto;
display: flex;

1
components/Header/TopMenu/topMenu.module.css
View File

@@ -1,6 +1,7 @@
.topMenu {
background-color: var(--Base-Surface-Subtle-Normal);
padding: var(--Spacing-x2) var(--Spacing-x-one-and-half);
border-bottom: 1px solid var(--Base-Border-Subtle);
}
.content {

2
components/Header/header.module.css
View File

@@ -1,4 +1,6 @@
.header {
position: relative;
font-family: var(--typography-Body-Regular-fontFamily);
color: var(--Base-Text-High-contrast);
z-index: 1;
}

20
components/TempDesignSystem/Link/link.module.css
View File

@@ -41,26 +41,18 @@
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
line-height: var(--typography-Body-Regular-lineHeight);
letter-spacing: 0.096px;
padding: var(--Spacing-x1) var(--Spacing-x1) var(--Spacing-x1)
var(--Spacing-x-one-and-half);
width: 100%;
letter-spacing: var(--typography-Body-Regular-letterSpacing);
padding: var(--Spacing-x1);
border-radius: var(--Corner-radius-Medium);
gap: 4px;
display: flex;
gap: var(--Spacing-x1);
justify-content: space-between;
align-items: center;
gap: 4px;
align-self: stretch;
}
.myPageMobileDropdown.active {
background-color: var(--Scandic-Brand-Pale-Peach);
.myPageMobileDropdown:hover {
background-color: var(--Base-Surface-Primary-light-Hover-alt);
border-radius: var(--Corner-radius-Medium);
font-family: var(--typography-Body-Underline-fontFamily);
font-size: var(--typography-Body-Underline-fontSize);
font-weight: var(--typography-Body-Underline-fontWeight);
letter-spacing: var(--typography-Body-Underline-letterSpacing);
line-height: var(--typography-Body-Underline-lineHeight);
}
.shortcut {

2
i18n/dictionaries/en.json
View File

@@ -84,8 +84,10 @@
"Level 5": "Level 5",
"Level 6": "Level 6",
"Level 7": "Level 7",
"Hi": "Hi",
"Level up to unlock": "Level up to unlock",
"Log in": "Log in",
"Log in/Join": "Log in/Join",
"Log in here": "Log in here",
"Log out": "Log out",
"Manage preferences": "Manage preferences",

1
stores/main-menu.ts
View File

@@ -21,6 +21,7 @@ const useDropdownStore = create<DropdownState>((set) => ({
toggleMyPagesMobileMenu: () =>
set((state) => {
// Close the other dropdown if it's open
console.log({ state })
if (!state.isMyPagesMobileMenuOpen && state.isHamburgerMenuOpen) {
set({ isHamburgerMenuOpen: false })
}