| 1 | import { h } from 'preact'
|
| 2 |
|
| 3 | const SubNav = ({ basePath, pathname, links, className }) => (
|
| 4 | h('nav', {
|
| 5 | className: `dt w-100 pt0 pt2-m pt2-l ph1 ph2-m ph5-l bg-light-gray light-blue border-box ${className || ''}`
|
| 6 | }, [
|
| 7 | h('div', {className: 'dtc v-mid w-75 tl overflow-hidden'},
|
| 8 | links.map(([href, title]) => {
|
| 9 | let isActive = false
|
| 10 | const isBasePath = basePath === href
|
| 11 | if (isBasePath && href === pathname) {
|
| 12 | isActive = true
|
| 13 | } else if (!isBasePath && pathname.startsWith(href)) {
|
| 14 | isActive = true
|
| 15 | }
|
| 16 | return (
|
| 17 | h('div', {className: `dib mr1 mr2-m pv2 ph1 ph2-m ph2-l ${isActive ? 'bg-white' : ''}`}, [
|
| 18 | h('a', {
|
| 19 | className: 'link gray hover-blue f6 f5-m f5-l underline-hover',
|
| 20 | 'data-e2e': `subNav${title}`,
|
| 21 | href,
|
| 22 | title
|
| 23 | }, [title])
|
| 24 | ])
|
| 25 | )
|
| 26 | })
|
| 27 | )
|
| 28 | ])
|
| 29 | )
|
| 30 |
|
| 31 | export default SubNav
|