style: slicing home page, adjust for mobile view

slicing home page, adjust for mobile view

app/layouts/header-menu.tsx

@@ -1,23 +1,28 @@
 import { Link } from 'react-router'
 
+import HeaderMenuMobile from '~/layouts/header-menu-mobile'
+
 import { HeaderSearch } from './header-search'
 import { MENU } from './menu'
 
 export const HeaderMenu = () => {
   return (
-    <div className="flex h-[60px] items-center justify-between bg-[#2E2F7C] text-xl font-medium text-white">
-      {MENU.map((item) => (
-        <Link
-          key={item.title}
-          to={item.url}
-          className={
-            'flex h-full items-center justify-center border-r border-white px-[35px]'
-          }
-        >
-          {item.title}
-        </Link>
-      ))}
-      <HeaderSearch />
-    </div>
+    <>
+      <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.title}
+            to={item.url}
+            className={
+              'flex h-full items-center justify-center border-r border-white px-[35px]'
+            }
+          >
+            {item.title}
+          </Link>
+        ))}
+        <HeaderSearch />
+      </div>
+      <HeaderMenuMobile />
+    </>
   )
 }