36 lines
1.0 KiB
TypeScript
36 lines
1.0 KiB
TypeScript
import { Link, useRouteLoaderData } from 'react-router'
|
|
|
|
import HeaderMenuMobile from '~/layouts/news/header-menu-mobile'
|
|
import type { loader } from '~/routes/_news'
|
|
|
|
import { HeaderSearch } from './header-search'
|
|
|
|
export const HeaderMenu = () => {
|
|
const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
|
|
const menu = loaderData?.categoriesData?.sort((a, b) => {
|
|
if (a.sequence === null) return 1
|
|
if (b.sequence === null) return -1
|
|
return a.sequence - b.sequence
|
|
})
|
|
|
|
return (
|
|
<>
|
|
<div className="hidden h-[60px] items-center justify-between bg-[#2E2F7C] text-xl font-medium text-white sm:flex">
|
|
{menu?.map((item) => (
|
|
<Link
|
|
key={item.id}
|
|
to={`/category/${item.code}`}
|
|
className={
|
|
'flex h-full items-center justify-center border-r border-white px-[35px]'
|
|
}
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
<HeaderSearch />
|
|
</div>
|
|
<HeaderMenuMobile menu={menu} />
|
|
</>
|
|
)
|
|
}
|