feat(SW-184): implementing mobile design

components/Header/MainMenu/MainMenuButton/menuButton.module.css

@@ -2,6 +2,7 @@
   display: flex;
   gap: var(--Spacing-x1);
   align-items: center;
+  width: 100%;
   background-color: transparent;
   color: var(--Base-Text-High-contrast);
   border-width: 0;

components/Header/MainMenu/MobileMenu/index.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import { Dialog, Modal } from "react-aria-components"
+import { useIntl } from "react-intl"
+
+import useDropdownStore from "@/stores/main-menu"
+
+import { GiftIcon, SearchIcon, ServiceIcon } from "@/components/Icons"
+import LanguageSwitcher from "@/components/LanguageSwitcher"
+
+import HeaderLink from "../../HeaderLink"
+import NavigationMenu from "../NavigationMenu"
+
+import styles from "./mobileMenu.module.css"
+
+import { MobileMenuProps } from "@/types/components/header/mobileMenu"
+
+export default function MobileMenu({
+  mainNavigation,
+  languageUrls,
+}: MobileMenuProps) {
+  const intl = useIntl()
+  const { isHamburgerMenuOpen, toggleHamburgerMenu } = useDropdownStore()
+
+  return (
+    <>
+      <button
+        type="button"
+        className={`${styles.hamburger} ${isHamburgerMenuOpen ? styles.isExpanded : ""}`}
+        aria-pressed="false"
+        aria-label={intl.formatMessage({ id: "Menu" })}
+        onClick={toggleHamburgerMenu}
+      >
+        <span className={styles.bar}></span>
+      </button>
+      <Modal
+        className={styles.modal}
+        isOpen={isHamburgerMenuOpen}
+        onOpenChange={toggleHamburgerMenu}
+      >
+        <Dialog
+          className={styles.dialog}
+          aria-label={intl.formatMessage({ id: "Menu" })}
+        >
+          <NavigationMenu variant="mobile" items={mainNavigation} />
+          <footer className={styles.footer}>
+            <HeaderLink href="#">
+              <SearchIcon width={20} height={20} color="burgundy" />
+              {intl.formatMessage({ id: "Find booking" })}
+            </HeaderLink>
+            <HeaderLink href="#">
+              <GiftIcon width={20} height={20} color="burgundy" />
+              {intl.formatMessage({ id: "Join Scandic Friends" })}
+            </HeaderLink>
+            <HeaderLink href="#">
+              <ServiceIcon width={20} height={20} color="burgundy" />
+              {intl.formatMessage({ id: "Customer service" })}
+            </HeaderLink>
+            <LanguageSwitcher urls={languageUrls} />
+          </footer>
+        </Dialog>
+      </Modal>
+    </>
+  )
+}

components/Header/MainMenu/MobileMenu/mobileMenu.module.css

@@ -0,0 +1,109 @@
+@keyframes slide-in {
+  from {
+    right: -100vw;
+  }
+
+  to {
+    right: 0;
+  }
+}
+
+.hamburger {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  justify-self: flex-start;
+  padding: 11px 8px 16px;
+  user-select: none;
+}
+
+.bar,
+.bar::after,
+.bar::before {
+  background: var(--Base-Text-High-contrast);
+  border-radius: 2.3px;
+  display: inline-block;
+  height: 3px;
+  position: relative;
+  transition: all 0.2s;
+  width: 32px;
+}
+
+.bar::after,
+.bar::before {
+  content: "";
+  left: 0;
+  position: absolute;
+  transform-origin: 2.286px center;
+}
+
+.bar::after {
+  top: -8px;
+}
+
+.bar::before {
+  top: 8px;
+}
+
+.isExpanded .bar {
+  background: transparent;
+}
+
+.isExpanded .bar::after,
+.isExpanded .bar::before {
+  top: 0;
+  transform-origin: 50% 50%;
+  width: 32px;
+}
+
+.isExpanded .bar::after {
+  transform: rotate(-45deg);
+}
+
+.isExpanded .bar::before {
+  transform: rotate(45deg);
+}
+
+@media screen and (min-width: 768px) {
+  .hamburger {
+    display: none;
+  }
+}
+
+.overlay {
+  position: absolute;
+  top: var(--main-menu-mobile-height);
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.modal {
+  position: fixed;
+  right: auto;
+  top: var(--main-menu-mobile-height);
+  bottom: 0;
+  width: 100%;
+  background-color: var(--Base-Surface-Primary-light-Normal);
+}
+
+.modal[data-entering] {
+  animation: slide-in 0.3s;
+}
+.modal[data-exiting] {
+  animation: slide-in 0.3s reverse;
+}
+
+.dialog {
+  height: 100%;
+  overflow-y: auto;
+  display: grid;
+  align-content: space-between;
+}
+
+.footer {
+  background-color: var(--Base-Surface-Subtle-Normal);
+  padding: var(--Spacing-x4) var(--Spacing-x2);
+  display: grid;
+  gap: var(--Spacing-x2);
+}

components/Header/MainMenu/MyPagesMenu/index.tsx

@@ -35,7 +35,9 @@ export default function MyPagesMenu({ navigation, user }: MyPagesMenuProps) {
     <div className={styles.myPagesMenu}>
       <MainMenuButton className={styles.button} onClick={toggleMyPagesMenu}>
         <Avatar initials={getInitials(user.firstName, user.lastName)} />
-        {intl.formatMessage({ id: "Hi" })} {user.firstName}!
+        <span className={styles.userName}>
+          {intl.formatMessage({ id: "Hi" })} {user.firstName}!
+        </span>
         <ChevronDownIcon
           className={`${styles.chevron} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`}
           color="red"
@@ -98,9 +100,15 @@ export default function MyPagesMenu({ navigation, user }: MyPagesMenuProps) {
       </nav>
     </div>
   ) : (
-    <Link href={myPages[lang]} className={styles.link}>
+    <Link
+      href={myPages[lang]}
+      className={styles.loginLink}
+      aria-label={intl.formatMessage({ id: "Log in/Join" })}
+    >
       <Avatar />
-      {intl.formatMessage({ id: "Log in/Join" })}
+      <span className={styles.userName}>
+        {intl.formatMessage({ id: "Log in/Join" })}
+      </span>
     </Link>
   )
 }

components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css

@@ -2,11 +2,8 @@
   position: relative;
 }
 
-.button {
-  font-weight: 600;
-}
-
 .chevron {
+  display: none;
   transition: transform 0.2s;
 }
 
@@ -14,6 +11,12 @@
   transform: rotate(180deg);
 }
 
+.userName {
+  display: none;
+  font-weight: 600;
+  color: var(--Base-Text-High-contrast);
+}
+
 .dropdown {
   position: absolute;
   top: 46px;
@@ -80,6 +83,15 @@
   opacity: 0;
 }
 
-.link:hover .arrow {
-  opacity: 1;
+.loginLink {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x1);
+}
+
+@media screen and (min-width: 768px) {
+  .userName,
+  .chevron {
+    display: initial;
+  }
 }

components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx

@@ -2,33 +2,46 @@
 
 import { useState } from "react"
 
-import { ChevronDownIcon } from "@/components/Icons"
+import { ChevronDownIcon, ChevronRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 
 import MainMenuButton from "../../MainMenuButton"
+import { navigationMenuItemVariants } from "./variants"
 
 import styles from "./navigationMenuItem.module.css"
 
 import { NavigationMenuItemProps } from "@/types/components/header/navigationMenuItem"
 
-export default function MenuItem({ item }: NavigationMenuItemProps) {
+export default function MenuItem({ item, variant }: NavigationMenuItemProps) {
   const { children, title, href, seeAllLinkText, infoCard } = item
   const [isExpanded, setIsExpanded] = useState(false)
+  const isMobile = variant === "mobile"
 
   function handleButtonClick() {
     setIsExpanded((prev) => !prev)
   }
 
   return children?.length ? (
-    <MainMenuButton onClick={handleButtonClick}>
+    <MainMenuButton
+      onClick={handleButtonClick}
+      className={navigationMenuItemVariants({ variant })}
+    >
       {title}
-      <ChevronDownIcon
-        className={`${styles.chevron} ${isExpanded ? styles.isExpanded : ""}`}
-        color="red"
-      />
+      {isMobile ? (
+        <ChevronRightIcon className={`${styles.chevron}`} color="red" />
+      ) : (
+        <ChevronDownIcon
+          className={`${styles.chevron} ${isExpanded ? styles.isExpanded : ""}`}
+          color="red"
+        />
+      )}
     </MainMenuButton>
   ) : (
-    <Link href={href} color="burgundy">
+    <Link
+      href={href}
+      color="burgundy"
+      className={navigationMenuItemVariants({ variant })}
+    >
       {title}
     </Link>
   )

components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css

@@ -1,3 +1,10 @@
+.navigationMenuItem.mobile {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--Spacing-x2) 0;
+  font-size: var(--typography-Subtitle-1-Mobile-fontSize);
+}
+
 .chevron {
   transition: transform 0.2s;
 }

components/Header/MainMenu/NavigationMenu/NavigationMenuItem/variants.ts

@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./navigationMenuItem.module.css"
+
+export const navigationMenuItemVariants = cva(styles.navigationMenuItem, {
+  variants: {
+    variant: {
+      default: styles.default,
+      mobile: styles.mobile,
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})

components/Header/MainMenu/NavigationMenu/index.tsx

@@ -1,15 +1,19 @@
 import NavigationMenuItem from "./NavigationMenuItem"
+import { navigationMenuVariants } from "./variants"
 
 import styles from "./navigationMenu.module.css"
 
 import { NavigationMenuProps } from "@/types/components/header/navigationMenu"
 
-export default function NavigationMenu({ items }: NavigationMenuProps) {
+export default function NavigationMenu({
+  items,
+  variant,
+}: NavigationMenuProps) {
   return (
-    <ul className={styles.navigationMenu}>
+    <ul className={navigationMenuVariants({ variant })}>
       {items.map((item) => (
-        <li key={item.id}>
-          <NavigationMenuItem item={item} />
+        <li key={item.id} className={styles.item}>
+          <NavigationMenuItem variant={variant} item={item} />
         </li>
       ))}
     </ul>

components/Header/MainMenu/NavigationMenu/navigationMenu.module.css

@@ -1,8 +1,26 @@
 .navigationMenu {
   list-style: none;
   margin: 0;
-  display: flex;
   justify-content: space-between;
   align-items: center;
   gap: var(--Spacing-x4);
+  display: none;
+}
+
+.navigationMenu.mobile {
+  display: grid;
+  width: 100%;
+  gap: 0;
+  justify-content: stretch;
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2) var(--Spacing-x2);
+}
+
+.navigationMenu.mobile .item {
+  border-bottom: 1px solid var(--Base-Border-Subtle);
+}
+
+@media screen and (min-width: 768px) {
+  .navigationMenu.default {
+    display: flex;
+  }
 }

components/Header/MainMenu/NavigationMenu/variants.ts

@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./navigationMenu.module.css"
+
+export const navigationMenuVariants = cva(styles.navigationMenu, {
+  variants: {
+    variant: {
+      default: styles.default,
+      mobile: styles.mobile,
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+})

components/Header/MainMenu/index.tsx

@@ -6,12 +6,15 @@ import Image from "@/components/Image"
 import { getIntl } from "@/i18n"
 
 import { navigationMenuItems } from "../tempHeaderData"
+import MobileMenu from "./MobileMenu"
 import MyPagesMenu from "./MyPagesMenu"
 import NavigationMenu from "./NavigationMenu"
 
 import styles from "./mainMenu.module.css"
 
-export default async function MainMenu() {
+import { MainMenuProps } from "@/types/components/header/mainMenu"
+
+export default async function MainMenu({ languageUrls }: MainMenuProps) {
   const intl = await getIntl()
   const myPagesNavigation =
     await serverClient().contentstack.myPages.navigation.get()
@@ -28,13 +31,19 @@ export default async function MainMenu() {
             data-js="scandiclogoimg"
             data-nosvgsrc="/_static/img/scandic-logotype.png"
             itemProp="logo"
-            height={24}
+            height={22}
             src="/_static/img/scandic-logotype.svg"
-            width={113}
+            width={103}
           />
         </Link>
-        <NavigationMenu items={navigationMenuItems} />
-        <MyPagesMenu navigation={myPagesNavigation} user={user} />
+        <div className={styles.menus}>
+          <NavigationMenu items={navigationMenuItems} />
+          <MyPagesMenu navigation={myPagesNavigation} user={user} />
+          <MobileMenu
+            languageUrls={languageUrls}
+            mainNavigation={navigationMenuItems}
+          />
+        </div>
       </nav>
     </div>
   )

components/Header/MainMenu/mainMenu.module.css

@@ -7,8 +7,35 @@
 .nav {
   max-width: var(--max-width-navigation);
   margin: 0 auto;
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: max-content 1fr;
   align-items: center;
-  gap: var(--Spacing-x3);
+  gap: var(--Spacing-x2);
+}
+
+.menus {
+  display: flex;
+  justify-self: end;
+  align-items: center;
+  gap: var(--Spacing-x2);
+}
+
+.logoLink {
+  display: inline-flex;
+  width: auto;
+}
+
+.logo {
+  width: 6.4375rem;
+}
+
+@media screen and (min-width: 768px) {
+  .nav {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--Spacing-x3);
+  }
+  .menus {
+    display: contents;
+  }
 }