x

apps/website/src/components/Navbar.tsx

@@ -30,13 +30,14 @@ const LANGUAGES = [
 ]
 
 function createFallbackMenu(categories: Category[]): MegaMenuPayload[] {
-  const categoryLinks = categories.map((category) => ({
-    label: {
-      th: resolveLocalized(category.name, 'th') || resolveLocalized(category.name),
-      en: resolveLocalized(category.name, 'en') || resolveLocalized(category.name),
-    },
-    url: `/category/${category.id}`,
-  }))
+  const categoryLinks = categories.map((category) => {
+    // category.name is a multilingual Record<lang,string> when fetched with lang=all
+    const label: Record<string, string> =
+      typeof category.name === 'string'
+        ? { th: category.name, en: category.name }
+        : (category.name as Record<string, string>)
+    return { label, url: `/category/${category.id}` }
+  })
 
   return [
     { id: 'home', label: { th: 'หน้าหลัก', en: 'Home' }, url: '/' },
@@ -141,7 +142,7 @@ export default function Navbar({ categories = [], initialMenu = [] }: NavbarProp
   }
 
   const iconButtonClass = 'rounded-full p-1.5 text-pop-black/65 transition-all hover:bg-pop-bg hover:text-pop-pink md:p-2'
-  const activeLanguage = LANGUAGES.find((language) => i18n.language.startsWith(language.code)) ?? LANGUAGES[0]
+  const activeLanguage = LANGUAGES.find((language) => lang.startsWith(language.code) || language.code.startsWith(lang)) ?? LANGUAGES[0]
 
   return (
     <>
@@ -220,7 +221,7 @@ export default function Navbar({ categories = [], initialMenu = [] }: NavbarProp
               <div className="pointer-events-none absolute right-0 top-full w-36 pt-2 opacity-0 transition-all duration-300 group-hover:pointer-events-auto group-hover:opacity-100">
                 <div className="space-y-0.5 overflow-hidden rounded-xl border border-pop-black/10 bg-white/95 p-1.5 shadow-2xl backdrop-blur-xl">
                   {LANGUAGES.map((language) => {
-                    const isActive = i18n.language.startsWith(language.code)
+                    const isActive = lang.startsWith(language.code) || language.code.startsWith(lang)
                     return (
                       <button
                         key={language.code}
@@ -365,7 +366,7 @@ export default function Navbar({ categories = [], initialMenu = [] }: NavbarProp
             </div>
             <div className="space-y-1">
               {LANGUAGES.map((language) => {
-                const isActive = i18n.language.startsWith(language.code)
+                const isActive = lang.startsWith(language.code) || language.code.startsWith(lang)
                 return (
                   <button
                     key={language.code}