1
0
Fork 0
freesewing/sites/shared/components/navigation/sections-menu.mjs
2023-09-29 16:01:27 +02:00

56 lines
2 KiB
JavaScript

// __SDEFILE__ - This file is a dependency for the stand-alone environment
import { useContext } from 'react'
import { useTheme } from 'shared/hooks/use-theme.mjs'
import { NavigationContext } from 'shared/context/navigation-context.mjs'
import Link from 'next/link'
import { icons, ns as sectionsNs } from 'shared/components/navigation/primary.mjs'
import { useTranslation } from 'next-i18next'
import orderBy from 'lodash.orderby'
export const ns = sectionsNs
const onlySections = (tree) => orderBy(tree, ['t'], ['asc']).filter((entry) => entry.m)
export const SectionsMenu = ({ bOnly = false }) => {
const { t } = useTranslation(ns)
const { siteNav } = useContext(NavigationContext)
const { spectrum } = useTheme()
const output = []
let i = 1
const sharedClasses = 'p-0 rounded shadow hover:shadow-lg w-full text-neutral-900'
for (const page of onlySections(siteNav)) {
if ((!bOnly && !page.h && !page.b) || (!page.h && bOnly && page.b)) {
if (page.t !== 'spacer') {
const item = (
<Link
key={page.s}
className={
bOnly
? `bg-secondary border border solid border-secondary bg-opacity-0 hover:bg-opacity-20 ${sharedClasses}`
: `bg-${spectrum[i]} bg-opacity-70 hover:bg-opacity-100 ${sharedClasses}`
}
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`}>
<h6 className="text-neutral-900">{page.t}</h6>
{icons[page.s] ? icons[page.s]('w-10 h-10') : null}
</div>
<div
className={`font-medium text-base leading-5 text-left rounded-b pt-0 pb-4 px-4 `}
>
{t(page.s + 'About')}
</div>
</div>
</Link>
)
output.push(item)
i++
}
}
}
return <div className="flex flex-col gap-2">{output}</div>
}