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