1
0
Fork 0

Merge pull request #4478 from freesewing/joost

chore(shared): Tweaks to breadcrumbs and dev modal menu
This commit is contained in:
Joost De Cock 2023-07-16 09:55:46 +02:00 committed by GitHub
commit 3aa24df06a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 28 additions and 14 deletions

View file

@ -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 { ModalMenu } from 'site/components/navigation/modal-menu.mjs'
import { NavButton, NavSpacer, colors } from 'shared/components/header.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 NavIcons = ({ setModal, slug }) => {
const { t } = useTranslation(['header']) const { t } = useTranslation(['header'])

View file

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

View file

@ -8,15 +8,17 @@ import { orderedSlugLut } from 'shared/hooks/use-navigation-helpers.mjs'
* - home page => no navvigation shown * - home page => no navvigation shown
* - /contact => Added below * - /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 '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 '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 '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 '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 '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 'f' to add the page to the footer
* Note: Set 't' to the title * Note: Set 't' to the title
* Note: Set 'o' to set the order (optional) * 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'] export const ns = ['account', 'sections', 'design', 'tags']

View file

@ -5,6 +5,7 @@ import { HomeIcon, RightIcon, BulletIcon } from 'shared/components/icons.mjs'
import { PageLink } from 'shared/components/page-link.mjs' import { PageLink } from 'shared/components/page-link.mjs'
import orderBy from 'lodash.orderby' import orderBy from 'lodash.orderby'
import { icons } from 'shared/components/navigation/primary.mjs' import { icons } from 'shared/components/navigation/primary.mjs'
import { useTranslation } from 'next-i18next'
/* /*
* This returns only those children that are expected to show up * 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) => const onlyValidChildren = (tree) =>
orderBy(tree, ['o', 't'], ['asc', 'asc']).filter( 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 slug {string} - The slug of the current page
* @param siteNav {object} - The site navigation object as returned by the useNavigation hook * @param siteNav {object} - The site navigation object as returned by the useNavigation hook
*/ */
export const Breadcrumbs = ({ slug, siteNav }) => { export const Breadcrumbs = ({ slug = false, lead = false, siteNav }) => {
if (!slug) { const { t } = useTranslation(['common'])
if (slug === false) {
console.log('No slug passed to Breadcrumbs') console.log('No slug passed to Breadcrumbs')
return null return null
} }
// Start with the home crumb // 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}> <li className="inline" key={0}>
<Link href="/" title="FreeSewing"> <Link href="/" title="FreeSewing">
<HomeIcon className="w-4 h-4" /> <HomeIcon className="w-4 h-4" stroke={2.5} />
</Link> </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 // Then split the slug and add a crumb for each
const chunks = slug.split('/') const chunks = slug.split('/')
for (let i = 1; i <= chunks.length; i++) { for (let i = 1; i <= chunks.length; i++) {

View file

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