44 lines
1.5 KiB
JavaScript
44 lines
1.5 KiB
JavaScript
import Link from 'next/link'
|
|
import { icons, isActive, ns as sectionsNs } from 'shared/components/navigation/primary.mjs'
|
|
import { useTranslation } from 'next-i18next'
|
|
import orderBy from 'lodash.orderby'
|
|
import { colors } from 'site/components/header/index.mjs'
|
|
|
|
export const ns = sectionsNs
|
|
|
|
export const SectionsMenu = ({ app }) => {
|
|
const { t } = useTranslation(ns)
|
|
if (!app.state.sections) return null
|
|
|
|
// Ensure each page as an `o` key so we can put them in order
|
|
const sortableSections = app.state.sections.map((s) => ({ ...s, o: s.o ? s.o : s.t }))
|
|
const output = []
|
|
for (const page of orderBy(sortableSections, ['o', 't'])) {
|
|
const act = isActive(page.s, app.state.slug)
|
|
|
|
const item = (
|
|
<Link
|
|
key={page.s}
|
|
className={`bg-${
|
|
colors[page.s]
|
|
}-400 p-0 rounded shadow hover:shadow-lg w-full bg-opacity-70 hover:bg-opacity-100 text-neutral-900
|
|
`}
|
|
href={`/${page.s}`}
|
|
title={page.t}
|
|
>
|
|
<div className="flex flex-col rounded">
|
|
<div className={`flex flex-row items-center justify-between pt-2 px-4`}>
|
|
<h4 className="text-neutral-900">{page.t}</h4>
|
|
{icons[page.s] ? icons[page.s]('w-10 h-10') : <HelpIcon />}
|
|
</div>
|
|
<div className={`font-medium text-base leading-5 text-left rounded-b py-4 px-4 `}>
|
|
{t(page.s + 'About')}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
)
|
|
output.push(item)
|
|
}
|
|
|
|
return <div className="flex flex-col gap-2">{output}</div>
|
|
}
|