fix update Section Block

apps/website/src/components/Navbar.tsx

@@ -10,13 +10,14 @@ import { useWishlistStore } from '../store/wishlistStore'
 import { useAuthStore } from '../store/authStore'
 import { useTranslation } from 'react-i18next'
 import { resolveLocalized } from '../lib/localization'
-import { API_BASE } from '../lib/api'
+import { useLang } from '../hooks/useLang'
 import { DesktopMegaMenu } from './navigation/DesktopMegaMenu'
 import { MobileDrawer } from './navigation/MobileDrawer'
 import type { MegaMenuPayload } from './navigation/menuTypes'
 
 interface NavbarProps {
   categories?: Category[]
+  initialMenu?: MegaMenuPayload[]
 }
 
 const LANGUAGES = [
@@ -58,14 +59,14 @@ function createFallbackMenu(categories: Category[]): MegaMenuPayload[] {
   ]
 }
 
-export default function Navbar({ categories = [] }: NavbarProps) {
+export default function Navbar({ categories = [], initialMenu = [] }: NavbarProps) {
   const [searchOpen, setSearchOpen] = useState(false)
   const [mobileOpen, setMobileOpen] = useState(false)
   const [langSheetOpen, setLangSheetOpen] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
   const [scrolled, setScrolled] = useState(false)
-  const [megaMenu, setMegaMenu] = useState<MegaMenuPayload[]>([])
-  const [menuLoaded, setMenuLoaded] = useState(false)
+  // Seed from server-fetched initialMenu — no client flash
+  const [megaMenu] = useState<MegaMenuPayload[]>(initialMenu)
   const navRef = useRef<HTMLElement>(null)
   const router = useRouter()
   const pathname = usePathname()
@@ -76,10 +77,11 @@ export default function Navbar({ categories = [] }: NavbarProps) {
   const logout = useAuthStore((state) => state.logout)
   const cartCount = getCartCount()
   const { t, i18n } = useTranslation()
-  const lang = i18n.language ? i18n.language.substring(0, 2) : 'th'
+  const lang = useLang()
 
   const fallbackMenu = useMemo(() => createFallbackMenu(categories), [categories])
-  const menuItems = menuLoaded && megaMenu.length > 0 ? megaMenu : fallbackMenu
+  // Use server menu if available, fall back to categories-based menu
+  const menuItems = megaMenu.length > 0 ? megaMenu : fallbackMenu
 
   const changeLanguage = (code: string) => {
     i18n.changeLanguage(code)
@@ -96,30 +98,7 @@ export default function Navbar({ categories = [] }: NavbarProps) {
     router.push('/profile')
   }
 
-  useEffect(() => {
-    let isMounted = true
 
-    async function fetchMegaMenu() {
-      try {
-        const response = await fetch(`${API_BASE}/menus/main`)
-        if (!response.ok) throw new Error(`menus/main returned ${response.status}`)
-        const data = await response.json() as { payload?: MegaMenuPayload[] }
-        if (isMounted) {
-          setMegaMenu(Array.isArray(data.payload) ? data.payload : [])
-          setMenuLoaded(true)
-        }
-      } catch (error) {
-        console.error('[website-menu] Failed to fetch main menu', error)
-        if (isMounted) setMenuLoaded(true)
-      }
-    }
-
-    fetchMegaMenu()
-
-    return () => {
-      isMounted = false
-    }
-  }, [])
 
   useEffect(() => {
     const onScroll = () => setScrolled(window.scrollY > 20)
@@ -342,7 +321,7 @@ export default function Navbar({ categories = [] }: NavbarProps) {
               <p className="mb-3 text-xs font-semibold uppercase tracking-widest text-pop-black/55">{t('nav.search.quickLinks')}</p>
               <div className="flex flex-wrap gap-2">
                 {[
-                  ...categories.map((category) => ({ label: resolveLocalized(category.name), to: `/category/${category.id}` })),
+                  ...categories.map((category) => ({ label: resolveLocalized(category.name, lang), to: `/category/${category.id}` })),
                   { label: t('nav.scentGuide'), to: '/scent-guide' },
                   { label: t('nav.search.allProducts'), to: '/shop' },
                 ].map((item) => (