fix(SW-184): using more variables and removed variants from navigation menu after PR

app/[lang]/(live)/@header/[...paths]/layout.tsx

@@ -1,10 +0,0 @@
-import Header from "@/components/Header"
-import { setLang } from "@/i18n/serverContext"
-
-import type { LangParams, LayoutArgs } from "@/types/params"
-
-export default function HeaderLayout({ params }: LayoutArgs<LangParams>) {
-  setLang(params.lang)
-
-  return <Header />
-}

app/globals.css

@@ -107,6 +107,7 @@
 
   --main-menu-mobile-height: 75px;
 
+  --header-z-index: 1;
   --menu-overlay-z-index: 10;
 }
 

components/Header/MainMenu/Avatar/avatar.module.css

@@ -3,7 +3,7 @@
   justify-content: center;
   align-items: center;
   overflow: hidden;
-  border-radius: 50%;
+  border-radius: var(--Corner-radius-Rounded);
   width: 2rem;
   height: 2rem;
   background-color: var(--Main-Grey-40);

components/Header/MainMenu/MobileMenu/index.tsx

@@ -65,7 +65,7 @@ export default function MobileMenu({
           className={styles.dialog}
           aria-label={intl.formatMessage({ id: "Menu" })}
         >
-          <NavigationMenu variant="mobile" items={mainNavigation} />
+          <NavigationMenu isMobile={true} items={mainNavigation} />
           <footer className={styles.footer}>
             <HeaderLink href="#">
               <SearchIcon width={20} height={20} color="burgundy" />

components/Header/MainMenu/MyPagesMenuContent/index.tsx

@@ -79,7 +79,7 @@ export default function MyPagesMenuContent({
                   </Link>
                 </li>
               ))}
-              {menuItem.display_sign_out_link && lang ? (
+              {menuItem.display_sign_out_link ? (
                 <li>
                   <Link
                     href={logout[lang]}

components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css

@@ -42,7 +42,7 @@
   color: var(--Base-Text-High-contrast);
   font-family: var(--typography-Body-Bold-fontFamily);
   font-size: var(--typography-Body-Bold-fontSize);
-  font-weight: 500;
+  font-weight: var(--typography-Body-Bold-fontWeight);
   line-height: var(--typography-Body-Bold-lineHeight);
   letter-spacing: var(--typography-Body-Bold-letterSpacing);
   border-radius: var(--Corner-radius-Medium);

components/Header/MainMenu/MyPagesMobileMenu/myPagesMobileMenu.module.css

@@ -30,7 +30,7 @@
   overflow-y: auto;
 }
 
-@media screen and (min-width: 767px) {
+@media screen and (min-width: 768px) {
   .myPagesMobileMenu,
   .modal {
     display: none;

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

@@ -6,16 +6,14 @@ 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 type { NavigationMenuItemProps } from "@/types/components/header/navigationMenuItem"
 
-export default function MenuItem({ item, variant }: NavigationMenuItemProps) {
+export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
   const { children, title, href, seeAllLinkText, infoCard } = item
   const [isExpanded, setIsExpanded] = useState(false)
-  const isMobile = variant === "mobile"
 
   function handleButtonClick() {
     setIsExpanded((prev) => !prev)
@@ -24,7 +22,7 @@ export default function MenuItem({ item, variant }: NavigationMenuItemProps) {
   return children?.length ? (
     <MainMenuButton
       onClick={handleButtonClick}
-      className={navigationMenuItemVariants({ variant })}
+      className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : styles.desktop}`}
     >
       {title}
       {isMobile ? (
@@ -40,7 +38,7 @@ export default function MenuItem({ item, variant }: NavigationMenuItemProps) {
     <Link
       href={href}
       color="burgundy"
-      className={navigationMenuItemVariants({ variant })}
+      className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : styles.desktop}`}
     >
       {title}
     </Link>

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

@@ -1,15 +0,0 @@
-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,5 +1,4 @@
 import NavigationMenuItem from "./NavigationMenuItem"
-import { navigationMenuVariants } from "./variants"
 
 import styles from "./navigationMenu.module.css"
 
@@ -7,13 +6,15 @@ import type { NavigationMenuProps } from "@/types/components/header/navigationMe
 
 export default function NavigationMenu({
   items,
-  variant,
+  isMobile,
 }: NavigationMenuProps) {
   return (
-    <ul className={navigationMenuVariants({ variant })}>
+    <ul
+      className={`${styles.navigationMenu} ${isMobile ? styles.mobile : styles.desktop}`}
+    >
       {items.map((item) => (
         <li key={item.id} className={styles.item}>
-          <NavigationMenuItem variant={variant} item={item} />
+          <NavigationMenuItem isMobile={isMobile} item={item} />
         </li>
       ))}
     </ul>

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

@@ -20,7 +20,7 @@
 }
 
 @media screen and (min-width: 768px) {
-  .navigationMenu.default {
+  .navigationMenu.desktop {
     display: flex;
   }
 }

components/Header/MainMenu/NavigationMenu/variants.ts

@@ -1,15 +0,0 @@
-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

@@ -44,7 +44,7 @@ export default async function MainMenu({ languageUrls }: MainMenuProps) {
           />
         </NextLink>
         <div className={styles.menus}>
-          <NavigationMenu items={navigationMenuItems} />
+          <NavigationMenu items={navigationMenuItems} isMobile={false} />
           {user ? (
             <>
               <MyPagesMenu

components/Header/MainMenu/mainMenu.module.css

@@ -35,6 +35,10 @@
   gap: var(--Spacing-x1);
 }
 
+.userName {
+  display: none;
+}
+
 @media screen and (min-width: 768px) {
   .nav {
     display: flex;
@@ -44,4 +48,7 @@
   .menus {
     display: contents;
   }
+  .userName {
+    display: inline;
+  }
 }

components/Header/header.module.css

@@ -1,4 +1,7 @@
 .header {
+  position: relative;
   font-family: var(--typography-Body-Regular-fontFamily);
   color: var(--Base-Text-High-contrast);
+  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08);
+  z-index: var(--header-z-index);
 }

components/LanguageSwitcher/LanguageSwitcherContent/languageSwitcherContent.module.css

@@ -53,7 +53,7 @@
 .link.active,
 .link:hover {
   background-color: var(--Base-Surface-Primary-light-Hover-alt);
-  font-weight: 500;
+  font-weight: var(--typography-Body-Bold-fontWeight);
 }
 
 @media screen and (min-width: 768px) {

types/components/header/myPagesMenu.ts

@@ -11,7 +11,7 @@ type MyPagesNavigation = Awaited<
 export interface MyPagesMenuProps {
   navigation: MyPagesNavigation
   user: Pick<User, "firstName" | "lastName">
-  membership: MembershipLevel | null | undefined
+  membership?: MembershipLevel | null
 }
 
 export interface MyPagesMenuContentProps extends MyPagesMenuProps {

types/components/header/navigationMenu.ts

@@ -1,10 +1,6 @@
-import { VariantProps } from "class-variance-authority"
-
-import { navigationMenuVariants } from "@/components/Header/MainMenu/NavigationMenu/variants"
-
 import type { MainNavigationItem } from "@/types/components/header/mainNavigationItem"
 
-export interface NavigationMenuProps
+export interface NavigationMenuProps {
-  extends VariantProps<typeof navigationMenuVariants> {
   items: MainNavigationItem[]
+  isMobile: boolean
 }

types/components/header/navigationMenuItem.ts

@@ -1,10 +1,6 @@
-import { VariantProps } from "class-variance-authority"
-
-import { navigationMenuItemVariants } from "@/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/variants"
-
 import type { MainNavigationItem } from "@/types/components/header/mainNavigationItem"
 
-export interface NavigationMenuItemProps
+export interface NavigationMenuItemProps {
-  extends VariantProps<typeof navigationMenuItemVariants> {
   item: MainNavigationItem
+  isMobile: boolean
 }