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

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

Browse Source
This commit is contained in:
Erik Tiekstra
2024-09-02 10:21:21 +02:00
parent 79b4c3fe12
commit 84985737b6
19 changed files with 32 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 />
}

1
app/globals.css
View File

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

2
components/Header/MainMenu/Avatar/avatar.module.css
View File

@@ -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);

2
components/Header/MainMenu/MobileMenu/index.tsx
View File

@@ -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" />

2
components/Header/MainMenu/MyPagesMenuContent/index.tsx
View File

@@ -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]}

2
components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css
View File

@@ -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);

2
components/Header/MainMenu/MyPagesMobileMenu/myPagesMobileMenu.module.css
View File

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

8
components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx
View File

@@ -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>

15
components/Header/MainMenu/NavigationMenu/NavigationMenuItem/variants.ts
View File

@@ -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",
},
})

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

@@ -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>

2
components/Header/MainMenu/NavigationMenu/navigationMenu.module.css
View File

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

15
components/Header/MainMenu/NavigationMenu/variants.ts
View File

@@ -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",
},
})

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

@@ -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

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

@@ -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;
}
}

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

@@ -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);
}

2
components/LanguageSwitcher/LanguageSwitcherContent/languageSwitcherContent.module.css
View File

@@ -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) {

2
types/components/header/myPagesMenu.ts
View File

@@ -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 {

8
types/components/header/navigationMenu.ts
View File

@@ -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
extends VariantProps<typeof navigationMenuVariants> {
export interface NavigationMenuProps {
items: MainNavigationItem[]
isMobile: boolean
}

8
types/components/header/navigationMenuItem.ts
View File

@@ -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
extends VariantProps<typeof navigationMenuItemVariants> {
export interface NavigationMenuItemProps {
item: MainNavigationItem
isMobile: boolean
}