Merge pull request #4473 from freesewing/joost

fix(dev): Make slug available in header for modal menu

sites/dev/components/header/index.mjs

@@ -23,13 +23,17 @@ import { NavButton, NavSpacer, colors } from 'shared/components/header.mjs'
 
 export const ns = ['header', 'sections', ...themeNs]
 
-const NavIcons = ({ setModal }) => {
+const NavIcons = ({ setModal, slug }) => {
   const { t } = useTranslation(['header'])
   const iconSize = 'h-6 w-6 lg:h-12 lg:w-12'
 
   return (
     <>
-      <NavButton onClick={() => setModal(<ModalMenu />)} label={t('header:menu')} color={colors[0]}>
+      <NavButton
+        onClick={() => setModal(<ModalMenu slug={slug} />)}
+        label={t('header:menu')}
+        color={colors[0]}
+      >
         <MenuIcon className={iconSize} />
       </NavButton>
       <NavSpacer />
@@ -80,24 +84,29 @@ const NavIcons = ({ setModal }) => {
   )
 }
 
-export const Header = (props) => {
+export const Header = ({
+  show = true, // Whether or not to show the header
+  slug, // Slug of the current page
+}) => {
   const { setModal } = useContext(ModalContext) || {}
 
-  return (
-    <HeaderWrapper {...props}>
+  const headerIcons = <NavIcons {...{ setModal, slug }} />
+
+  return show ? (
+    <HeaderWrapper {...{ show, slug }}>
       <div className="m-auto md:px-8">
         <div className="p-0 flex flex-row gap-2 justify-between text-neutral-content items-center">
           {/* Non-mobile content */}
           <div className="hidden lg:flex lg:px-2 flex-row items-center justify-between xl:justify-center w-full">
-            <NavIcons setModal={setModal} />
+            {headerIcons}
           </div>
 
           {/* Mobile content */}
           <div className="flex lg:hidden flex-row items-center justify-between w-full">
-            <NavIcons setModal={setModal} />
+            {headerIcons}
           </div>
         </div>
       </div>
     </HeaderWrapper>
-  )
+  ) : null
 }

sites/dev/components/navigation/modal-menu.mjs

@@ -1,9 +1,5 @@
-// Dependencies
-import { useContext } from 'react'
 // Hooks
 import { useNavigation } from 'site/hooks/use-navigation.mjs'
-// Contenxt
-import { NavigationContext } from 'shared/context/navigation-context.mjs'
 // Components
 import { SectionsMenu, ns as sectionsNs } from 'site/components/navigation/sections-menu.mjs'
 import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
@@ -14,8 +10,7 @@ import { NavLinks, Breadcrumbs } from 'shared/components/navigation/sitenav.mjs'
 
 export const ns = nsMerge(sectionsNs)
 
-export const ModalMenu = () => {
-  const { slug } = useContext(NavigationContext)
+export const ModalMenu = ({ slug }) => {
   const { siteNav } = useNavigation()
 
   return (

sites/shared/components/navigation/sitenav.mjs

@@ -132,6 +132,10 @@ const MainLink = ({
  * @param siteNav {object}    - The site navigation object as returned by the useNavigation hook
  */
 export const Breadcrumbs = ({ slug, siteNav }) => {
+  if (!slug) {
+    console.log('No slug passed to Breadcrumbs')
+    return null
+  }
   // Start with the home crumb
   const crumbs = [
     <li className="inline" key={0}>
@@ -144,25 +148,27 @@ export const Breadcrumbs = ({ slug, siteNav }) => {
   const chunks = slug.split('/')
   for (let i = 1; i <= chunks.length; i++) {
     const page = get(siteNav, chunks.slice(0, i))
-    crumbs.push(
-      <li className="pl-1" key={`${i}s`}>
-        <RightIcon className="w-4 h-4 opacity-50" stroke={3} />
-      </li>,
-      i === chunks.length ? (
-        <li className="pl-1" key={i}>
-          <span className="font-medium">{page.t}</span>
-        </li>
-      ) : (
-        <li key={i}>
-          <PageLink
-            href={`/${page.s}`}
-            title={page.t}
-            className="text-secondary-focus font-medium pl-1"
-            txt={page.t}
-          />
-        </li>
+    if (page) {
+      crumbs.push(
+        <li className="pl-1" key={`${i}s`}>
+          <RightIcon className="w-4 h-4 opacity-50" stroke={3} />
+        </li>,
+        i === chunks.length ? (
+          <li className="pl-1" key={i}>
+            <span className="font-medium">{page.t}</span>
+          </li>
+        ) : (
+          <li key={i}>
+            <PageLink
+              href={`/${page.s}`}
+              title={page.t}
+              className="text-secondary-focus font-medium pl-1"
+              txt={page.t}
+            />
+          </li>
+        )
       )
-    )
+    }
   }
 
   return <ul className="flex flex-row flex-wrap items-center">{crumbs}</ul>

sites/shared/components/wrappers/layout.mjs

@@ -13,6 +13,7 @@ export const LayoutWrapper = ({
   noSearch = false,
   header = false,
   footer = true,
+  slug,
 }) => {
   const ChosenHeader = header ? header : Header
 
@@ -46,7 +47,7 @@ export const LayoutWrapper = ({
       <Head>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
-      <ChosenHeader show={showHeader} />
+      <ChosenHeader show={showHeader} slug={slug} />
 
       <main
         className={`grow transition-margin duration-300 ease-in-out lg:group-[.header-shown]/layout:mt-24 lg:mt-4