Content menu WIP and more clean up

yvonnetangsu · yvonnetangsu · commit 5edae3f59b9d · 2025-06-20T16:09:05.000-07:00
diff --git a/components/FlexCell.tsx b/components/FlexCell.tsx
diff --git a/components/Storyblok/PageHeader/HeaderNoImage.tsx b/components/Storyblok/PageHeader/HeaderNoImage.tsx
@@ -5,6 +5,9 @@ import { hasRichText } from '@/utilities/hasRichText';
 import { type HeaderProps } from './Header.types';
 import { darkBgColors } from '@/utilities/datasource';
 
+/**
+ * This header variant is used for Interior Pages, Support Page and Story Overview Page.
+ */
 type HeaderNoImageProps = Partial<HeaderProps>;
 
 export const HeaderNoImage = ({ blok }: HeaderNoImageProps) => {
diff --git a/components/Storyblok/SbCampaignPage/CampaignHeader.tsx b/components/Storyblok/SbCampaignPage/CampaignHeader.tsx
@@ -1,7 +1,7 @@
 import React, { useId } from 'react';
 import { type SbBlokData } from '@storyblok/react/rsc';
 import { CreateBloks } from '@/components/CreateBloks';
-import { CampaignHero } from '@/components/Storyblok/partials/CampaignHero';
+import { CampaignHero } from '@/components/Storyblok/SbCampaignPage/CampaignHero';
 
 export type CampaignHeaderProps = {
   blok: SbBlokData & {
diff --git a/components/Storyblok/SbCampaignPage/CampaignHero.tsx b/components/Storyblok/SbCampaignPage/CampaignHero.tsx
diff --git a/components/Storyblok/SbCampaignPage/SbCampaignPage.tsx b/components/Storyblok/SbCampaignPage/SbCampaignPage.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { storyblokEditable, type SbBlokData } from '@storyblok/react/rsc';
 import { CreateBloks } from '@/components/CreateBloks';
-import { CampaignHeader, type CampaignHeaderProps } from '@/components/Storyblok/partials/CampaignHeader';
+import { CampaignHeader, type CampaignHeaderProps } from '@/components/Storyblok/SbCampaignPage/CampaignHeader';
 import { IconCardSection, type IconCardSectionProps } from '@/components/Storyblok/partials/IconCardSection';
 import { Footer, type FooterProps } from '@/components/Storyblok/partials/Footer';
 
diff --git a/components/Storyblok/SbContentMenu/SbContentMenu.styles.ts b/components/Storyblok/SbContentMenu/SbContentMenu.styles.ts
@@ -0,0 +1,2 @@
+export const mobileButton = 'relative w-full flex items-center justify-between max-w-400 mx-auto py-10 px-30 text-15 md:text-16 text-white uppercase tracking-widest leading-none font-semibold bg-transparent shadow-white shadow-[inset_0_0_0_1px] transition-shadow hocus:text-white hocus:shadow-[inset_0_0_0_3px]';
+export const mobileButtonIcon = 'w-22 stroke-2';
diff --git a/components/Storyblok/SbContentMenu/SbContentMenu.tsx b/components/Storyblok/SbContentMenu/SbContentMenu.tsx
@@ -9,11 +9,13 @@ import { Heading } from '@/components/Typography';
 import { HeroIcon } from '@/components/HeroIcon';
 import { config } from '@/utilities/config';
 import { getNumBloks } from '@/utilities/getNumBloks';
+import * as styles from './SbContentMenu.styles';
 
 export type SbContentMenuProps = {
   blok: SbBlokData & {
     menuTitle?: string;
     relatedMenuTitle?: string;
+    // Either a content menu parent item or a content nav item can be added to the below two links fields
     menuLinks?: SbBlokData[];
     relatedMenuLinks?: SbBlokData[];
   };
@@ -34,7 +36,7 @@ const MenuContent = ({
   relatedLinks,
 }: MenuContentProps) => (
   <>
-    <div className={`ood-content-nav__menu-group`}>
+    <div className={`ood-content-nav__menu-group text-white`}>
       {title && (
         <Heading font="sans" uppercase tracking="widest" className="mt-26 lg:mt-0 text-18 ml-16 lg:ml-0">
           {title}
@@ -99,13 +101,13 @@ export const SbContentMenu = ({ blok, slug }: SbContentMenuProps) => {
       {({ open }) => (
         <>
           <PopoverButton
-            className={`ood-content-nav__toggle`}
+            className={styles.mobileButton}
           >
             {open ? 'Close' : 'Section Menu'}{' '}
             <HeroIcon
               icon={open ? 'close' : 'menu'}
               noBaseStyle
-              // className={styles.mobileButtonIcon}
+              className={styles.mobileButtonIcon}
             />
           </PopoverButton>
           <Transition
diff --git a/components/Storyblok/SbContentMenu/SbContentNestedMenu.tsx b/components/Storyblok/SbContentMenu/SbContentNestedMenu.tsx
@@ -2,7 +2,7 @@ import { type SbBlokData, storyblokEditable } from '@storyblok/react/rsc';
 // import { CreateBloks } from '@/components/CreateBloks';
 
 /**
- * This component renders a nested menu that has a parent link item in the content menu.
+ * This component renders a nested menu that can be added to the content menu parent item.
  * This nested menu can be 2nd or 3rd level.
  */
 export type SbContentNestedMenuProps = {
diff --git a/components/Storyblok/SbInteriorPage.tsx b/components/Storyblok/SbInteriorPage.tsx
@@ -2,8 +2,9 @@
 import { type SbBlokData, storyblokEditable } from '@storyblok/react/rsc';
 import { useWindowSize } from 'usehooks-ts';
 import {
-  HeaderFullWidthImage, HeaderMinimal, HeaderNoImage, HeaderSmallImage,
+  HeaderFullWidthImage, HeaderMinimal, HeaderNoImage, HeaderSmallImage, type HeaderProps,
 } from '@/components/Storyblok/PageHeader';
+import { Container } from '@/components/Container';
 import { Grid } from '@/components/Grid';
 import { IconCardSection, type IconCardSectionProps } from '@/components/Storyblok/partials/IconCardSection';
 import { Footer, type FooterProps } from '@/components/Storyblok/partials/Footer';
@@ -12,13 +13,15 @@ import { Heading } from '@/components/Typography';
 import { CreateBloks } from '@/components/CreateBloks';
 import { getNumBloks } from '@/utilities/getNumBloks';
 import { config } from '@/utilities/config';
+import { darkBgColors } from '@/utilities/datasource';
 
 
-export type SbInteriorPageProps =
+export type SbInteriorPageProps = HeaderProps
   & IconCardSectionProps
   & FooterProps
   & {
     blok: SbBlokData & {
+      layout?: 'left-sidebar' | 'no-sidebar';
       localHeader: SbBlokData[];
       alertPicker: SbBlokData[];
       contentMenu: SbBlokData[];
@@ -33,18 +36,27 @@ export type SbInteriorPageProps =
 
 export const SbInteriorPage = (props: SbInteriorPageProps) => {
   const windowSize = useWindowSize();
+  const hasHeroImage = props.blok.headerStyle === 'has-image' || props.blok.headerStyle === 'full-width-image';
+  const hasContentMenu = !!getNumBloks(props.blok.contentMenu);
+  const showMobileContentMenu = windowSize.width < config.breakpoints.lg && hasContentMenu && props.blok.layout === 'left-sidebar';
 
   return (
     <div {...storyblokEditable(props.blok)}>
       <CreateBloks blokSection={props.blok.alertPicker} />
       <CreateBloks blokSection={props.blok.localHeader} slug={props.slug} />
       <main id="main-content" className={`ood-interior-page ood-interior-page--${props.blok.headerStyle}`}>
         <article className="bg-fog-light">
-          {/* Mobile content (section) menu */}
-          {windowSize.width < config.breakpoints.lg &&
-            <CreateBloks blokSection={props.blok.contentMenu} slug={props.slug} />
-          }
           <header className="break-words">
+            {/* Mobile content (section) menu */}
+            {showMobileContentMenu &&
+              <Container
+                pt={2}
+                pb={hasHeroImage ? 2 : undefined}
+                className={hasHeroImage ? 'bg-palo-alto-dark' : darkBgColors[props.blok.headerBackgroundColor || 'palo-alto-dark']}
+              >
+                <CreateBloks blokSection={props.blok.contentMenu} slug={props.slug} />
+              </Container>
+            }
             {props.blok.headerStyle === 'has-image' && (
               <HeaderSmallImage {...props} />
             )}
diff --git a/components/Storyblok/SbMegaMenu/SbMegaMenuLinkGroup.tsx b/components/Storyblok/SbMegaMenu/SbMegaMenuLinkGroup.tsx
@@ -1,6 +1,6 @@
 import { type SbBlokData, storyblokEditable } from '@storyblok/react/rsc';
 import { CtaLink } from '@/components/Cta';
-import { FlexCell } from '@/components/Storyblok/partials/FlexCell';
+import { FlexCell } from '@/components/FlexCell';
 import { Heading } from '@/components/Typography';
 import { getNumBloks } from '@/utilities/getNumBloks';
 import { type SbOodMegaMenuNavItemProps } from '@/components/Storyblok/Storyblok.types';
diff --git a/components/Storyblok/SbNavItem.tsx b/components/Storyblok/SbNavItem.tsx
diff --git a/components/Storyblok/SbStoryOverviewPage.tsx b/components/Storyblok/SbStoryOverviewPage.tsx
@@ -1,6 +1,5 @@
-import { type SbBlokData } from '@storyblok/react/rsc';
+import { storyblokEditable, type SbBlokData } from '@storyblok/react/rsc';
 import { type StoryblokRichtext } from 'storyblok-rich-text-react-renderer';
-import { storyblokEditable } from '@storyblok/react/rsc';
 import { CreateBloks } from '@/components/CreateBloks';
 import { Footer, type FooterProps } from '@/components/Storyblok/partials/Footer';
 import { HeaderNoImage } from '@/components/Storyblok/PageHeader/HeaderNoImage';
diff --git a/components/Storyblok/SbStoryPage/SbStoryFullView.tsx b/components/Storyblok/SbStoryPage/SbStoryFullView.tsx
@@ -1,10 +1,10 @@
 import { storyblokEditable, type SbBlokData } from '@storyblok/react/rsc';
 import { CreateBloks } from '@/components/CreateBloks';
-import { CenteredContainer } from '@/components/Storyblok/partials/CenteredContainer';
+import { Container } from '@/components/Container';
 import { IconCardSection, type IconCardSectionProps } from '@/components/Storyblok/partials/IconCardSection';
 import { Footer, type FooterProps } from '@/components/Storyblok/partials/Footer';
 import { Heading, Paragraph } from '@/components/Typography';
-import { FlexCell } from '@/components/Storyblok/partials/FlexCell';
+import { FlexCell } from '@/components/FlexCell';
 import { FullWidthImage, type VisibleVerticalType } from '@/components/Image';
 import { type SbImageType } from '../Storyblok.types';
 
@@ -74,10 +74,7 @@ export const SbStoryFullView = (props: SbStoryFullViewProps) => {
                   className="h-300 md:h-400 xl:h-500 2xl:h-[64rem]"
                 />
               )}
-            <CenteredContainer
-              flex
-              classes="ood-story__header-content"
-            >
+            <Container className="flex ood-story__header-content">
               <FlexCell
                 md={12}
                 lg={10}
@@ -106,15 +103,15 @@ export const SbStoryFullView = (props: SbStoryFullViewProps) => {
                   </Paragraph>
                 )}
               </FlexCell>
-            </CenteredContainer>
+            </Container>
           </header>
           <div className="ood-story__content">
             <CreateBloks blokSection={props.blok.storyContent} />
           </div>
           <footer className="ood-story__main-footer">
             {(props.blok.author || publishedDate) && (
               <div className="ood-story__metadata">
-                <CenteredContainer flex={true}>
+                <Container className="flex">
                   <FlexCell lg={8} className="mx-auto">
                     <CreateBloks blokSection={props.blok.cta} />
                     <div className="ood-story__metadata rs-pb-5">
@@ -140,7 +137,7 @@ export const SbStoryFullView = (props: SbStoryFullViewProps) => {
                       )}
                     </div>
                   </FlexCell>
-                </CenteredContainer>
+                </Container>
               </div>
             )}
             <CreateBloks blokSection={props.blok.belowContent} />
diff --git a/components/Storyblok/SbSupportPage.tsx b/components/Storyblok/SbSupportPage.tsx
@@ -1,14 +1,14 @@
 'use client';
 import { type MouseEventHandler, useCallback, useEffect } from 'react';
+import { storyblokEditable, type SbBlokData } from '@storyblok/react/rsc';
 import { type StoryblokRichtext } from 'storyblok-rich-text-react-renderer';
 import { useRouter } from 'next/navigation';
-import { storyblokEditable, type SbBlokData } from '@storyblok/react/rsc';
+import { Container } from '@/components/Container';
 import { CreateBloks } from '@/components/CreateBloks';
 import { HeaderNoImage } from '@/components/Storyblok/PageHeader/HeaderNoImage';
 import { Footer, type FooterProps } from '@/components/Storyblok/partials/Footer';
 import { Grid } from '@/components/Grid';
 import { IconCardSection, type IconCardSectionProps } from '@/components/Storyblok/partials/IconCardSection';
-import { CenteredContainer } from '@/components/Storyblok/partials/CenteredContainer';
 import { Heading, SrOnlyText } from '@/components/Typography';
 import { type DarkBgColorsType } from '@/utilities/datasource';
 
@@ -88,7 +88,7 @@ export const SbSupportPage = (props: SbSupportPageProps) => {
               </header>
             )}
             <SrOnlyText as="p">{props.blok.srText}</SrOnlyText>
-            <CenteredContainer classes="ood-support-page__filter-container">
+            <Container className="ood-support-page__filter-container">
               <input
                 type="radio"
                 id="undergraduate"
@@ -195,7 +195,7 @@ export const SbSupportPage = (props: SbSupportPageProps) => {
                 <CreateBloks blokSection={props.blok.sustainability} />
                 <CreateBloks blokSection={props.blok.teaching} />
               </Grid>
-            </CenteredContainer>
+            </Container>
           </section>
           <CreateBloks blokSection={props.blok.belowContent} />
           <footer className="ood-support-page__main-footer">
diff --git a/components/Storyblok/partials/BodyLeftSidebar.tsx b/components/Storyblok/partials/BodyLeftSidebar.tsx
diff --git a/components/Storyblok/partials/CenteredContainer.tsx b/components/Storyblok/partials/CenteredContainer.tsx
diff --git a/components/Storyblok/partials/IconCardSection.tsx b/components/Storyblok/partials/IconCardSection.tsx
@@ -1,8 +1,8 @@
 import { type SbBlokData } from '@storyblok/react/rsc';
 import { storyblokEditable } from '@storyblok/react/rsc';
 import { CreateBloks } from '@/components/CreateBloks';
+import { Container } from '@/components/Container';
 import { Heading } from '@/components/Typography';
-import { CenteredContainer } from '@/components/Storyblok/partials/CenteredContainer';
 
 export type IconCardSectionProps = {
   blok: SbBlokData & {
@@ -28,12 +28,11 @@ export const IconCardSection = (props: IconCardSectionProps) => {
           ? props.blok.iconCardHeading
           : 'Links to more information'}
       </Heading>
-      <CenteredContainer
-        flex={true}
-        classes={`ood-icon-card-section__container su-align-items-stretch su-flex-${numIconCards}-col`}
+      <Container
+        className={`flex ood-icon-card-section__container su-align-items-stretch su-flex-${numIconCards}-col`}
       >
         <CreateBloks blokSection={props.blok.iconCards} />
-      </CenteredContainer>
+      </Container>
     </div>
   );
 };
diff --git a/utilities/storyblok.tsx b/utilities/storyblok.tsx

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export const mobileButton = 'relative w-full flex items-center justify-between max-w-400 mx-auto py-10 px-30 text-15 md:text-16 text-white uppercase tracking-widest leading-none font-semibold bg-transparent shadow-white shadow-[inset_0_0_0_1px] transition-shadow hocus:text-white hocus:shadow-[inset_0_0_0_3px]';`
	`2`	`+export const mobileButtonIcon = 'w-22 stroke-2';`