feat: implement category fetching and integrate into header menus

app/layouts/news/header-menu-mobile.tsx

@@ -1,14 +1,18 @@
 import { useState } from 'react'
 import { Link } from 'react-router'
 
+import type { TCategorySchema } from '~/apis/common/get-categories'
 import { CloseIcon } from '~/components/icons/close'
 import { MenuIcon } from '~/components/icons/menu'
 import { useNewsContext } from '~/contexts/news'
 import { HeaderSearch } from '~/layouts/news/header-search'
 
-import { MENU } from './menu'
+type THeaderMenuMobile = {
+  menu?: TCategorySchema['data']
+}
 
-export default function HeaderMenuMobile() {
+export default function HeaderMenuMobile(properties: THeaderMenuMobile) {
+  const { menu } = properties
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const { setIsLoginOpen } = useNewsContext()
 
@@ -38,19 +42,19 @@ export default function HeaderMenuMobile() {
 
             {/* List Menu */}
             <ul className="mx-10 mt-10 max-lg:space-y-3 lg:ml-14 lg:flex lg:gap-x-5">
-              {MENU.map((item, index) => (
+              {menu?.map((item, index) => (
                 <li
                   key={index}
                   className="px-3 max-lg:border-b max-lg:py-3"
                 >
                   <Link
-                    key={item.title}
-                    to={item.url}
+                    key={item.id}
+                    to={`/category/${item.code}`}
                     className={
                       'flex h-full items-center justify-center border-white px-[35px] sm:border-r'
                     }
                   >
-                    {item.title}
+                    {item.name}
                   </Link>
                 </li>
               ))}

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} />
     </>
   )
 }

app/layouts/news/menu.ts

@@ -18,37 +18,6 @@ type TFooterMenu = {
   items: TMenu[]
 }
 
-export const MENU: TMenu[] = [
-  {
-    title: 'Spotlight',
-    url: '/category/spotlight',
-  },
-  {
-    title: 'Berita',
-    url: '/category/berita',
-  },
-  {
-    title: 'Kasus',
-    url: '/category/kasus',
-  },
-  {
-    title: 'Kajian',
-    url: '/category/kajian',
-  },
-  {
-    title: 'Lifestyle',
-    url: '/category/lifestyle',
-  },
-  {
-    title: 'Event',
-    url: '/category/event',
-  },
-  {
-    title: 'Travel',
-    url: '/category/travel',
-  },
-]
-
 export const FOOTER_MENU: TFooterMenu[] = [
   {
     group: 'About Us',