Merge pull request #4478 from freesewing/joost

chore(shared): Tweaks to breadcrumbs and dev modal menu

sites/dev/components/header/index.mjs

@@ -21,7 +21,7 @@ import { ModalThemePicker, ns as themeNs } from 'shared/components/modal/theme-p
 import { ModalMenu } from 'site/components/navigation/modal-menu.mjs'
 import { NavButton, NavSpacer, colors } from 'shared/components/header.mjs'
 
-export const ns = ['header', 'sections', ...themeNs]
+export const ns = ['common', 'header', 'sections', ...themeNs]
 
 const NavIcons = ({ setModal, slug }) => {
   const { t } = useTranslation(['header'])

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

@@ -24,10 +24,7 @@ export const ModalMenu = ({ slug }) => {
       `}
         >
           <div className="w-full lg:w-1/2">
-            <h3>Content per role</h3>
             <SectionsMenu />
-            <h3 className="mt-8">Search & Sitemap</h3>
-            <p>Cannot find what you are looking for?</p>
             <ChoiceLink href="/search" title="Search">
               If you cannot find what you are looking for but you know the key words, try our
               search.
@@ -38,8 +35,7 @@ export const ModalMenu = ({ slug }) => {
             </ChoiceLink>
           </div>
           <div className="w-full lg:w-1/2">
-            <h3>You are here</h3>
-            <Breadcrumbs {...{ siteNav, slug }} />
+            <Breadcrumbs {...{ siteNav, slug }} lead />
             <NavLinks {...{ siteNav, slug }} />
           </div>
         </div>

sites/dev/hooks/use-navigation.mjs

@@ -8,15 +8,17 @@ import { orderedSlugLut } from 'shared/hooks/use-navigation-helpers.mjs'
  * - home page => no navvigation shown
  * - /contact => Added below
  *
- * Remember Mc Shifto:
+ * Remember Mc_Shifton:
  * Note: Set 'm' to truthy to show this as a main section in the side-navigation (optional)
  * Note: Set 'c' to set the control level to hide things from users (optional)
  * Note: Set 's' to the slug (optional insofar as it's not a real page (a spacer for the header))
+ * Note: Set '_' to never show the page in the site navigation (like the tags pages)
  * Note: Set 'h' to indicate this is a top-level page that should be hidden from the side-nav (like search)
  * Note: Set 'i' when something should be included as top-level in the collapse side-navigation (optional)
  * Note: Set 'f' to add the page to the footer
  * Note: Set 't' to the title
  * Note: Set 'o' to set the order (optional)
+ * Note: Set 'n' to mark this as a noisy entry that should always be closed unless active (like blog)
  */
 
 export const ns = ['account', 'sections', 'design', 'tags']

sites/shared/components/navigation/sitenav.mjs

@@ -5,6 +5,7 @@ import { HomeIcon, RightIcon, BulletIcon } from 'shared/components/icons.mjs'
 import { PageLink } from 'shared/components/page-link.mjs'
 import orderBy from 'lodash.orderby'
 import { icons } from 'shared/components/navigation/primary.mjs'
+import { useTranslation } from 'next-i18next'
 
 /*
  * This returns only those children that are expected to show up
@@ -19,7 +20,7 @@ import { icons } from 'shared/components/navigation/primary.mjs'
  */
 const onlyValidChildren = (tree) =>
   orderBy(tree, ['o', 't'], ['asc', 'asc']).filter(
-    (entry) => typeof entry === 'object' && entry.t !== 'spacer' && !entry.h
+    (entry) => typeof entry === 'object' && entry.t !== 'spacer' && !entry.m && !entry._ && !entry.h
   )
 
 /*
@@ -131,19 +132,33 @@ const MainLink = ({
  * @param slug {string}       - The slug of the current page
  * @param siteNav {object}    - The site navigation object as returned by the useNavigation hook
  */
-export const Breadcrumbs = ({ slug, siteNav }) => {
-  if (!slug) {
+export const Breadcrumbs = ({ slug = false, lead = false, siteNav }) => {
+  const { t } = useTranslation(['common'])
+
+  if (slug === false) {
     console.log('No slug passed to Breadcrumbs')
     return null
   }
   // Start with the home crumb
-  const crumbs = [
+  const crumbs = []
+  // Do we need a lead?
+  if (lead)
+    crumbs.push(
+      <li key="lead" className="font-medium text-sm pr-2">
+        {t('youAreHere')}:
+      </li>
+    )
+  crumbs.push(
     <li className="inline" key={0}>
       <Link href="/" title="FreeSewing">
-        <HomeIcon className="w-4 h-4" />
+        <HomeIcon className="w-4 h-4" stroke={2.5} />
       </Link>
-    </li>,
-  ]
+    </li>
+  )
+
+  // Home page?
+  if (slug === '') return <ul className="flex flex-row flex-wrap items-center">{crumbs}</ul>
+
   // Then split the slug and add a crumb for each
   const chunks = slug.split('/')
   for (let i = 1; i <= chunks.length; i++) {

sites/shared/i18n/common.en.yaml

@@ -1,2 +1,3 @@
 freesewing: FreeSewing
 sitemap: Sitemap
+youAreHere: You are here