1
0
Fork 0

fix(fs.shared): Links in navigation

This commit is contained in:
Joost De Cock 2021-12-28 16:29:06 +01:00
parent 453a26b868
commit 1c0b8458e5

View file

@ -10,9 +10,6 @@ import GuideIcon from 'shared/components/icons/guide.js'
import HelpIcon from 'shared/components/icons/help.js' import HelpIcon from 'shared/components/icons/help.js'
import DocsIcon from 'shared/components/icons/docs.js' import DocsIcon from 'shared/components/icons/docs.js'
// TODO: Clean this up after restructuring markdown content
const hide = ['contributors', 'developers', 'editors', 'translators']
// Don't show children for blog and showcase posts // Don't show children for blog and showcase posts
const keepClosed = ['blog', 'showcase', ] const keepClosed = ['blog', 'showcase', ]
@ -80,7 +77,7 @@ const SubLevel = ({ nodes={}, active }) => (
hover:cursor-row-resize hover:cursor-row-resize
items-center items-center
`}> `}>
<Link href={child.__slug}> <Link href={`/${child.__slug}`}>
<a title={child.__title} className={` <a title={child.__title} className={`
grow pl-2 border-l-2 grow pl-2 border-l-2
hover:border-secondary hover:border-secondary
@ -105,7 +102,7 @@ const SubLevel = ({ nodes={}, active }) => (
</li> </li>
) : ( ) : (
<li className='pl-2 flex flex-row items-center'> <li className='pl-2 flex flex-row items-center'>
<Link href={child.__slug} title={child.__title}> <Link href={`/${child.__slug}`} title={child.__title}>
<a className={` <a className={`
pl-2 border-l-2 pl-2 border-l-2
grow hover:border-secondary grow hover:border-secondary
@ -195,40 +192,29 @@ const TopTheme = ({ app }) => (
</> </>
) )
// TODO: Get rid of this when markdown has been restructured
const remove = ['contributors', 'developers', 'editors', 'translators']
const Navigation = ({ app, active }) => { const Navigation = ({ app, active }) => {
if (!app.navigation) return null if (!app.navigation) return null
const output = [] const output = []
for (const key of Object.keys(app.navigation).sort()) { for (const key of Object.keys(app.navigation).sort()) output.push(<TopLevel
if (hide.indexOf(key) === -1) output.push(<TopLevel icon={icons[key] || <span className="text-3xl mr-2 translate-y-3 inline-block p-0 leading-3">&deg;</span>}
icon={icons[key] || <span className="text-3xl mr-2 translate-y-3 inline-block p-0 leading-3">&deg;</span>} title={key}
title={key} slug={key}
slug={key} key={key}
key={key} hasChildren={keepClosed.indexOf(key) === -1}
hasChildren={keepClosed.indexOf(key) === -1} nav={app.navigation}
nav={app.navigation} current={order(app.navigation[key])}
current={order(app.navigation[key])} active={active}
active={active} />)
/>)
}
return output return output
} }
const PrimaryMenu = ({ app, active }) => { const PrimaryMenu = ({ app, active }) => (
<nav className="sm:max-w-sm grow mb-12">
return ( <TopLogo app={app}/>
<nav className={` <Navigation app={app} active={active} />
sm:max-w-sm <TopTheme app={app}/>
grow </nav>
mb-12 )
`}>
<TopLogo app={app}/>
<Navigation app={app} active={active} />
<TopTheme app={app}/>
</nav>
)
}
export default PrimaryMenu export default PrimaryMenu