Skip to content

Commit df1b221

Browse files
yvonnetangsuyvonnetangsu
committed
More styles and responsive
1 parent 3bb15b7 commit df1b221

19 files changed

+124
-84
lines changed

‎components/Cta/Cta.styles.ts

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,9 @@ export const ctaButtonStyles = {
3232

3333
// Maps to linkTextColor prop in SbCtaLink. Only used for the text link style.
3434
export const ctaTextColors = {
35-
'su-text-digital-red su-after-bg-digital-red su-text-hocus-sky-dark su-after-bg-hocus-sky-dark': 'text-digital-red hocus:text-sky-dark',
36-
'su-text-white su-text-hocus-white su-hocus-underline su-after-bg-white su-after-bg-hocus-white': 'text-white hocus:text-white',
35+
// The hocus color for this is actually sky-dark, so ignore the mismatch in the key
36+
'su-text-digital-red su-after-bg-digital-red su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-digital-red hocus:text-sky-dark hocus:underline',
37+
'su-text-white su-text-hocus-white su-hocus-underline su-after-bg-white su-after-bg-hocus-white': 'text-white hocus:text-white hocus:underline',
3738
// Gradient text links for Campaign pages
3839
'ood-cta__link-gradient su-bg-sky-dark-to-bay-dark su-after-bg-sky-dark-to-bay-dark': `${gradientTextLinkBase} from-sky-dark to-bay-dark *:[&_svg]:text-bay-dark *:[&_svg]:hocus:text-bay-dark`,
3940
'ood-cta__link-gradient su-bg-cardinal-dark-to-spirited-dark su-after-bg-cardinal-dark-to-spirited-dark': `${gradientTextLinkBase} from-cardinal-red-dark to-spirited-dark *:[&_svg]:text-spirited-dark *:[&_svg]:hocus:text-spirited-dark`,
@@ -47,22 +48,25 @@ export const ctaTextColors = {
4748
* Campaign page only solid text colors - seems on live site the intent was to use plum-dark as the hocus color, but it was overridden by the base link hocus color
4849
* Here we honor the original intent by using plum-dark as the hocus color
4950
*/
50-
'su-text-lagunita-dark su-after-bg-lagunita-dark su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-lagunita-dark hocus:text-plum-dark',
51-
'su-text-palo-verde su-after-bg-palo-verde su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-palo-verde hocus:text-plum-dark',
52-
'su-text-plum su-after-bg-plum su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-plum hocus:text-plum-dark',
53-
'su-text-brick su-after-bg-brick su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-brick hocus:text-plum-dark',
54-
'su-text-cardinal-red su-after-bg-cardinal-red su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-cardinal-red hocus:text-plum-dark',
55-
'su-text-palo-alto su-after-bg-palo-alto su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-palo-alto hocus:text-plum-dark',
56-
'su-text-bay-dark su-after-bg-bay-dark su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-bay-dark hocus:text-plum-dark',
57-
'su-text-sky-dark su-after-bg-sky-dark su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-sky-dark hocus:text-plum-dark',
58-
'su-text-lagunita su-after-bg-lagunita su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-lagunita hocus:text-plum-dark',
51+
'su-text-lagunita-dark su-after-bg-lagunita-dark su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-lagunita-dark hocus:text-plum-dark hocus:underline',
52+
'su-text-palo-verde su-after-bg-palo-verde su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-palo-verde hocus:text-plum-dark hocus:underline',
53+
'su-text-plum su-after-bg-plum su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-plum hocus:text-plum-dark hocus:underline',
54+
'su-text-brick su-after-bg-brick su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-brick hocus:text-plum-dark hocus:underline',
55+
'su-text-cardinal-red su-after-bg-cardinal-red su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-cardinal-red hocus:text-plum-dark hocus:underline',
56+
'su-text-palo-alto su-after-bg-palo-alto su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-palo-alto hocus:text-plum-dark hocus:underline',
57+
'su-text-bay-dark su-after-bg-bay-dark su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-bay-dark hocus:text-plum-dark hocus:underline',
58+
'su-text-sky-dark su-after-bg-sky-dark su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-sky-dark hocus:text-plum-dark hocus:underline',
59+
'su-text-lagunita su-after-bg-lagunita su-text-hocus-plum-dark su-after-bg-hocus-plum-dark': 'text-lagunita hocus:text-plum-dark hocus:underline',
5960
};
6061

6162
// Additional CTA variants we use for this site, e.g., as subcomponents for other components. These include styles for sizes, colors, icon styles, and other properties.
6263
export const ctaVariants = {
6364
'local-footer': 'text-digital-red hocus:text-black underline leading-snug font-normal text-16 md:text-18 *:[&_svg]:hocus:text-digital-red',
65+
// Text links in the sub menu
6466
'sub-menu': 'text-14 sm:text-16 py-6 md:py-10 text-white leading-[4rem] md:leading-cozy hocus:text-white md:text-cool-grey md:hocus:text-digital-red font-normal no-underline hocus:underline',
65-
'mega-menu': 'relative flex w-full lg:w-fit text-20 lg:text-21 px-20 sm:px-30 md:px-50 py-16 lg:px-0 font-semibold leading-cozy no-underline hocus:underline lg:hocus:no-underline text-black hocus:text-digital-red before:absolute before:inline-block before:w-6 before:h-full before:left-0 before:bottom-0 before:bg-digital-red before:scale-y-0 before:transition-transform hocus:before:scale-y-100 lg:before:h-10 lg:before:w-full before:left-0 before:bottom-0 lg:before:scale-y-100 lg:before:scale-x-0 lg:hocus:before:scale-x-100 outline-none',
67+
// For top level mega menu links
68+
'mega-menu': 'relative flex w-full lg:w-fit text-20 lg:text-21 px-20 sm:px-30 md:px-50 py-16 lg:px-0 font-semibold leading-cozy no-underline hocus:underline lg:hocus:no-underline text-black hocus:text-digital-red before:absolute before:inline-block before:w-6 md:before:w-10 before:h-full before:left-0 before:bottom-0 before:hocus:bg-digital-red before:scale-y-0 before:transition-all hocus:before:scale-y-100 lg:before:h-10 lg:before:w-full before:left-0 before:bottom-0 lg:before:scale-y-100 lg:before:scale-x-0 lg:hocus:before:scale-x-100 outline-none',
69+
// For mega men links inside dropdown panels/sections
6670
'mega-menu-link-lvl2': 'text-black hocus:text-digital-red no-underline hocus:underline leading-display font-normal text-19 *:[&_svg]:text-digital-red',
6771
};
6872

@@ -92,6 +96,7 @@ export const icon = 'inline-block will-change-transform transition-transform str
9296
export const iconLeftMarginDefault = 'ml-04em';
9397
export const iconLeftMargin: CtaIconLeftMarginType = {
9498
'su-link--action': 'ml-03em',
99+
'su-link--external': 'ml-03em',
95100
};
96101

97102
// Maps to linkIcon prop in SbCtaLink. Animation preselected based on the icon type

‎components/Cta/CtaButton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const CtaButton = React.forwardRef<HTMLButtonElement, CtaButtonProps>((pr
1414
isButton,
1515
buttonStyle = 'ood-cta__button--primary su-after-bg-white',
1616
buttonSize = 'default',
17-
textColor = 'su-text-digital-red su-after-bg-digital-red su-text-hocus-sky-dark su-after-bg-hocus-sky-dark',
17+
textColor = 'su-text-digital-red su-after-bg-digital-red su-text-hocus-plum-dark su-after-bg-hocus-plum-dark',
1818
variant,
1919
align,
2020
icon,

‎components/Cta/CtaExternalLink.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const CtaExternalLink = React.forwardRef<HTMLAnchorElement, CtaExternalLi
1919
isButton,
2020
buttonStyle = 'ood-cta__button--primary su-after-bg-white',
2121
buttonSize = 'default',
22-
textColor = 'su-text-digital-red su-after-bg-digital-red su-text-hocus-sky-dark su-after-bg-hocus-sky-dark',
22+
textColor = 'su-text-digital-red su-after-bg-digital-red su-text-hocus-plum-dark su-after-bg-hocus-plum-dark',
2323
variant,
2424
icon,
2525
iconProps,

‎components/Cta/CtaLink.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export type CtaLinkProps = Omit<LinkProps, 'href'> & React.ComponentPropsWithout
1515
sbLink?: SbLinkType;
1616
href?: string;
1717
rel?: string;
18+
slug?: string;
1819
};
1920

2021
export const CtaLink = React.forwardRef<HTMLAnchorElement, CtaLinkProps>(

‎components/Cta/CtaNextLink.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const CtaNextLink = React.forwardRef<HTMLAnchorElement, CtaNextLinkProps>
2020
isButton,
2121
buttonStyle = 'ood-cta__button--primary su-after-bg-white',
2222
buttonSize = 'default',
23-
textColor = 'su-text-digital-red su-after-bg-digital-red su-text-hocus-sky-dark su-after-bg-hocus-sky-dark',
23+
textColor = 'su-text-digital-red su-after-bg-digital-red su-text-hocus-plum-dark su-after-bg-hocus-plum-dark',
2424
variant,
2525
icon,
2626
iconProps,

‎components/HeroIcon/HeroIcon.styles.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export const iconBaseStyleDefault = 'w-1em';
8080
export const iconBaseStyle: IconBaseStyleType = {
8181
'arrow-left': 'w-09em -mt-01em',
8282
'arrow-right': 'w-09em -mt-01em',
83-
'chevron-right': 'w-09em -mt-01em',
83+
'chevron-right': 'w-09em stroke-[2.5] -mt-01em',
8484
download: 'w-09em -mt-01em',
8585
expand: 'w-1em -mt-02em',
8686
external: 'w-08em stroke-[2.5] -mt-01em',

‎components/Logo/LogoLockup.styles.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export const root = 'flex no-underline font-normal';
1+
export const root = 'flex no-underline font-normal w-fit';
22
export const contentWrapper = 'flex-row items-center';
33
export const logo = 'text-[1.43em] leading-half mt-[0.27em]';
44
export const bar = 'block w-1 h-1em mx-03em md:mx-02em';

‎components/Search/Modal/OpenSearchModalButton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const OpenSearchModalButton = React.forwardRef<HTMLButtonElement, { id: s
1010
<button
1111
data-test="search--nav-bar"
1212
type="button"
13-
className="relative shrink-0 xl:-top-6 h-40 w-40 xl:w-fit text-digital-red hocus:text-cardinal-red rounded-full xl:text-20 xl:px-20 border border-black-30 hocus:bg-black-10"
13+
className="relative ml-auto shrink-0 xl:-top-6 h-40 w-40 xl:w-fit text-digital-red hocus:text-cardinal-red rounded-full xl:text-20 xl:px-20 border border-black-30 hocus:bg-black-10 transition-colors"
1414
aria-label="Search Giving"
1515
onClick={open}
1616
id={id}

‎components/Storyblok/SbCampaignPage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export type SbCampaignPageProps = CampaignHeaderProps & IconCardSectionProps & F
99
blok: SbBlokData & {
1010
alertPicker: SbBlokData[];
1111
content: SbBlokData[];
12-
}
12+
};
1313
};
1414

1515
export const SbCampaignPage = (props: SbCampaignPageProps) => (

‎components/Storyblok/SbInteriorPage.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,15 @@ export type SbInteriorPageProps = HeaderMinimalProps
2929
aboveContent: SbBlokData[];
3030
content: SbBlokData[];
3131
bodyTitle: string;
32-
}
32+
};
33+
slug?: string;
3334
};
3435

3536
export const SbInteriorPage = (props: SbInteriorPageProps) => {
3637
return (
3738
<div {...storyblokEditable(props.blok)}>
3839
<CreateBloks blokSection={props.blok.alertPicker} />
39-
<CreateBloks blokSection={props.blok.localHeader} />
40+
<CreateBloks blokSection={props.blok.localHeader} slug={props.slug} />
4041
<main id="main-content" className={`ood-interior-page ood-interior-page--${props.blok.headerStyle}`}>
4142
<article className="bg-fog-light">
4243
{props.blok.headerStyle === 'has-image' && (

‎components/Storyblok/SbLandingPage.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,14 @@ type SbLandingPageProps = IconCardSectionProps & FooterProps & {
1010
alertPicker: SbBlokData[];
1111
heroSection: SbBlokData[];
1212
sections: SbBlokData[];
13-
}
13+
};
14+
slug?: string;
1415
};
1516

1617
export const SbLandingPage = (props: SbLandingPageProps) => (
1718
<div {...storyblokEditable(props.blok)} className="ood-landing-page bg-fog-light">
1819
<CreateBloks blokSection={props.blok.alertPicker} />
19-
<CreateBloks blokSection={props.blok.localHeader} />
20+
<CreateBloks blokSection={props.blok.localHeader} slug={props.slug} />
2021
<main id="main-content" className="ood-landing-page__main">
2122
<article className="bg-fog-light">
2223
<header className="ood-landing-page__main-header">

‎components/Storyblok/SbLocalHeader.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export type SbLocalHeaderProps = {
1010
lockup: SbBlokData[];
1111
megaMenu: SbBlokData[];
1212
};
13+
slug?: string;
1314
};
1415

1516
export const SbLocalHeader = (props: SbLocalHeaderProps) => (
@@ -23,8 +24,8 @@ export const SbLocalHeader = (props: SbLocalHeaderProps) => (
2324
<div className="lg:pb-10 text-21 sm:text-25 md:text-[3.2rem]">
2425
<CreateBloks blokSection={props.blok.lockup} />
2526
</div>
26-
<FlexBox className="ood-header__megamenu-wrapper gap-16 flex-row-reverse lg:flex-row lg:items-center lg:justify-center">
27-
<CreateBloks blokSection={props.blok.megaMenu} />
27+
<FlexBox className="gap-16 flex-row-reverse lg:flex-row lg:items-center lg:justify-center">
28+
<CreateBloks blokSection={props.blok.megaMenu} slug={props.slug} />
2829
<OpenSearchModalButton id="mastead-search-openmodal-mobile" />
2930
</FlexBox>
3031
</FlexBox>

‎components/Storyblok/SbLocalHeaderPicker.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@ import { type ISbStoryData } from '@storyblok/react/rsc';
44
export type SbLocalHeaderPickerProps = {
55
blok: {
66
localHeader?: ISbStoryData[];
7-
}
7+
};
8+
slug?: string;
89
};
910

1011
export const SbLocalHeaderPicker = (props: SbLocalHeaderPickerProps) => (
11-
<CreateStories stories={props.blok.localHeader} />
12+
<CreateStories stories={props.blok.localHeader} slug={props.slug} />
1213
);

‎components/Storyblok/SbMegaMenu/SbMegaMenu.styles.ts

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,39 @@
11
import { cnb } from 'cnbuilder';
22
import { type DarkBgColorsType, darkBgColors } from '@/utilities/datasource';
33

4+
export const innerShadow = 'absolute top-0 w-full h-15 bg-gradient-to-b from-black/10';
45
/**
56
* Mobile mega menu
67
*/
7-
export const mobileButton = 'group/toggle w-40 flex flex-col items-center pb-15 md:pb-25 font-semibold leading-[.7] md:leading-none text-digital-red hocus:text-black outline-none';
8+
export const mobileButton = 'relative w-40 flex flex-col items-center pb-15 md:pb-25 font-semibold leading-[.7] md:leading-none text-digital-red hocus:text-black outline-none before:absolute before:h-6 md:before:h-10 before:w-full before:hocus:bg-digital-red before:left-0 before:bottom-0 before:scale-x-0 hocus:before:scale-x-100 before:transition-transform aria-expanded:before:scale-x-100 aria-expanded:before:hocus:bg-black';
89
export const mobileButtonIcon = 'w-24 stroke-[2.4] mb-3';
9-
export const mobileTopMenu = 'absolute left-0 top-[10.8rem] md:top-[14.1rem] pt-12 pb-40 list-unstyled origin-top w-full bg-white shadow-xl *:border-b *:border-black-20';
10+
export const mobileTopMenu = 'absolute left-0 top-[10.8rem] md:top-[14.1rem] pt-12 pb-40 list-unstyled origin-top w-full bg-white shadow-xl [&_>li]:border-b [&_>li]:border-black-20';
11+
12+
/**
13+
* Mega menu nav item
14+
*/
15+
export const navItem = 'mb-0';
16+
export const navItemChevron = 'lg:hidden text-digital-red';
1017

1118
/**
1219
* Mega menu section/panel
1320
*/
14-
const hocusBarMobile = 'before:absolute before:inline-block before:w-6 before:h-full before:left-0 before:bottom-0 before:bg-digital-red before:scale-y-0 before:transition-transform hocus:before:scale-y-100';
21+
const hocusBarMobile = 'before:absolute before:inline-block before:w-6 md:before:w-10 before:h-full before:left-0 before:bottom-0 before:bg-digital-red before:scale-y-0 before:transition-all hocus:before:scale-y-100';
1522

16-
const hocusBar = 'lg:before:h-10 lg:before:w-full before:left-0 before:bottom-0 lg:before:scale-y-100 lg:before:scale-x-0 lg:hocus:before:scale-x-100';
23+
const hocusBar = 'lg:before:h-10 lg:before:w-full lg:before:scale-y-100 lg:before:scale-x-0 lg:hocus:before:scale-x-100';
1724

1825
export const panelButton = cnb('relative group flex items-center justify-between w-full text-left text-20 lg:text-21 px-20 sm:px-30 md:px-50 py-14 lg:px-0 lg:py-16 font-semibold leading-cozy no-underline hocus:underline lg:hocus:no-underline text-black hocus:text-digital-red outline-none', hocusBarMobile, hocusBar);
1926

20-
export const panelButtonIcon = 'size-33 lg:size-18 bg-digital-red group-hocus:bg-black lg:bg-transparent lg:group-hocus:bg-transparent rounded-full lg:-mt-01em inline-block p-6 lg:p-0 lg:ml-2 transition-transform group-aria-expanded:rotate-180 text-white group-hocus-visible:text-white lg:text-black lg:group-hocus-visible:text-black';
27+
export const panelButtonIcon = 'size-33 lg:size-18 bg-digital-red group-hocus:bg-black lg:bg-transparent lg:group-hocus:bg-transparent rounded-full lg:-mt-01em inline-block p-6 lg:p-0 lg:ml-2 transition-all group-aria-expanded:rotate-180 text-white group-hocus-visible:text-white lg:text-black lg:group-hocus-visible:text-black';
2128

2229
export const section = 'relative lg:absolute transition-all origin-top w-full bg-fog-light lg:bg-white lg:left-0 lg:w-full lg:shadow-xl break-words';
2330
export const sectionContent = 'px-20 sm:px-30 md:px-50 lg:px-80 xl:px-100 2xl:pl-100 3xl:pl-[calc((100%-1500px)/2)] 3xl:pr-[calc((100%-1500px)/2)]';
24-
export const navItem = 'mb-0';
2531

2632
/**
2733
* Mega menu link group
2834
*/
29-
export const linkGroup = 'empty:hidden';
30-
export const linkGroupHeading = 'mb-[1.4em] pt-10 md:pt-0 border-t border-black-40 first:border-t-0 md:border-t-0 text-17';
35+
export const linkGroup = 'empty:hidden border-t border-black-40 first:border-t-0 md:border-t-0 [&_h2]:first:pt-0';
36+
export const linkGroupHeading = 'mb-[1.4em] pt-1em md:pt-0 text-17';
3137
export const linkGroupList = 'list-unstyled';
3238
export const linkGroupItem = 'mb-20 last:mb-0';
3339

@@ -41,4 +47,3 @@ export const cardRoot = (backgroundColor: DarkBgColorsType = 'digital-red') => c
4147
export const cardContent = 'rs-px-2 rs-pt-2 rs-pb-3 group-hover:bg-black-true/40 group-focus-within:bg-black-true/40 transition-colors';
4248
export const cardHeading = 'rs-mb-1';
4349
export const headingLink = 'stretched-link no-underline text-white hocus:text-white hocus:underline';
44-
export const cardCta = '';

‎components/Storyblok/SbMegaMenu/SbMegaMenu.tsx

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,28 +8,36 @@ import { CreateBloks } from '@/components/CreateBloks';
88
import { FlexBox } from '@/components/FlexBox';
99
import { HeroIcon } from '@/components/HeroIcon';
1010
import { config } from '@/utilities/config';
11+
import { getNumBloks } from '@/utilities/getNumBloks';
1112
import * as styles from './SbMegaMenu.styles';
1213

1314
export type SbMegaMenuProps = {
1415
blok: SbBlokData & {
1516
topLevelLinks?: SbBlokData[]; // Top level links and parent items for the panels
1617
};
18+
slug?: string;
1719
};
1820

19-
export const SbMegaMenu = (props: SbMegaMenuProps) => {
21+
export const SbMegaMenu = ({ blok, slug }: SbMegaMenuProps) => {
22+
const { topLevelLinks } = blok;
2023
const windowSize = useWindowSize();
2124

25+
if (!getNumBloks(topLevelLinks)) {
26+
return null;
27+
}
28+
29+
// Desktop mega menu
2230
if (windowSize.width >= config.breakpoints.lg) {
2331
return (
24-
<nav {...storyblokEditable(props.blok)} className="ood-mega-nav grow" aria-label="Main Menu">
25-
<FlexBox as="ul" wrap="wrap" className="ood-mega-nav__menu-lv1 list-unstyled gap-30 xl:gap-38">
26-
<CreateBloks blokSection={props.blok.topLevelLinks} />
32+
<nav {...storyblokEditable(blok)} className="grow" aria-label="Main Menu">
33+
<FlexBox as="ul" wrap="wrap" className="list-unstyled gap-30 xl:gap-38">
34+
<CreateBloks blokSection={topLevelLinks} slug={slug} />
2735
</FlexBox>
2836
</nav>
2937
);
3038
}
3139
return (
32-
<Popover as="nav" className="ood-mega-nav flex z-[200] lg:items-center" aria-label="Main Menu">
40+
<Popover as="nav" className="flex z-[200] lg:items-center" aria-label="Main Menu">
3341
{({ open }) => (
3442
<>
3543
<PopoverButton
@@ -53,10 +61,11 @@ export const SbMegaMenu = (props: SbMegaMenuProps) => {
5361
>
5462
<PopoverPanel
5563
as="ul"
56-
{...storyblokEditable(props.blok)}
64+
{...storyblokEditable(blok)}
5765
className={styles.mobileTopMenu}
5866
>
59-
<CreateBloks blokSection={props.blok.topLevelLinks} />
67+
<div className={styles.innerShadow} aria-hidden="true" />
68+
<CreateBloks blokSection={topLevelLinks} slug={slug} />
6069
</PopoverPanel>
6170
</Transition>
6271
</>

0 commit comments

Comments
 (0)