feat: implement category fetching and integrate into header menus

app/layouts/news/header-menu.tsx

@@ -1,28 +1,31 @@
-import { Link } from 'react-router'
+import { Link, useRouteLoaderData } from 'react-router'
 
 import HeaderMenuMobile from '~/layouts/news/header-menu-mobile'
+import type { loader } from '~/routes/_layout'
 
 import { HeaderSearch } from './header-search'
-import { MENU } from './menu'
 
 export const HeaderMenu = () => {
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
+  const menu = loaderData?.categoriesData
+
   return (
     <>
       <div className="hidden h-[60px] items-center justify-between bg-[#2E2F7C] text-xl font-medium text-white sm:flex">
-        {MENU.map((item) => (
+        {menu?.map((item) => (
           <Link
-            key={item.title}
-            to={item.url}
+            key={item.id}
+            to={`/category/${item.code}`}
             className={
               'flex h-full items-center justify-center border-r border-white px-[35px]'
             }
           >
-            {item.title}
+            {item.name}
           </Link>
         ))}
         <HeaderSearch />
       </div>
-      <HeaderMenuMobile />
+      <HeaderMenuMobile menu={menu} />
     </>
   )
 }