nshop-front-m/src/components/layout/navbar/index.tsx

import Link from "next/link";
import {Suspense} from "react";
import LogoIcon from "@components/common/icons/LogoIcon";
import MobileMenuTrigger from "./MobileMenuTrigger";
import { NavbarActions } from "./NavbarActions";
import { NavbarErrorBoundary } from "@/components/error/ErrorBoundary";
import { 
  GET_TREEFRONT_MENUS } from "@/graphql";
import { serverGraphqlFetch } from "@utils/bagisto/index";
import NavbarSearchIcon from "./NavbarSearchIcon"
import type { GetTreefrontMenusResult } from "@/types/theme/menus";
import { auth } from "@/utils/auth/auth-helper";
import TopSwiperBanner from "./TopSwiperBanner"
import { restApiFetch } from "@utils/bagisto/index";
import type { AnnouncementItem } from "./TopSwiperBanner";
import type { RestfulGetThemeCustomizations } from '@/types/theme/theme-customization';
export default async function Navbar() {
  // 2. 服务端 fetch 请求我们自己的 Next.js API
  const topBarPromise:Promise<AnnouncementItem[]> = restApiFetch<{data:RestfulGetThemeCustomizations}>({
    api: `/shop/theme-customizations?name=Top_Bar`,
    method: "GET",
    isRoute: false,
    takeAuthorization: false,
  }).then((result) => {
    const themeItem = result.body[0];
    const optionsStr = themeItem?.translation?.options;
    if (optionsStr) {
      const parsed = JSON.parse(optionsStr);
      return parsed?.images ?? [];
    } else {
      return [];
    }
  }).catch((err) => {
      // 获取top_bar失败不应该阻止用户访问网站
      console.error('get top_bar error: ', err);
      return [];
  });

  
    const session = await auth();// 游客是null
    const isGuest = session === null;

    const { data: menudata } = await serverGraphqlFetch<
      GetTreefrontMenusResult
    >({
      query: GET_TREEFRONT_MENUS,
      takeAuthorization: false,
    });
    console.log('GetTreefrontMenusResult --- ',menudata)
    const menudatas =menudata? menudata.treefrontMenus:[];

  return (
    <NavbarErrorBoundary>
      <header className="sticky top-0 z-10">
        <Suspense fallback={<div className="flex items-center justify-center h-10 w-full overflow-hidden bg-ly-middlegreen text-ly-14 text-white">Loading top bar...</div>}>
          <TopSwiperBanner  topBarPromise={topBarPromise} /> 
        </Suspense>
        <nav className="relative flex flex-col items-center justify-between gap-4 bg-neutral-50 p-4 pt-3 pb-3 dark:bg-neutral-900 md:flex-row lg:px-6 lg:py-4">
          <div className="flex w-full items-center justify-between gap-0 sm:gap-4">
            {/* 1. THE STATIC SHELL (Visible Instantly) */}
            <div className="flex items-center max-w-fit gap-5 xl:gap-6">
              {/* 2. STATIC HOLE: Categories (Suspended) */}
        
                <MobileMenuTrigger isGuest={isGuest} menuData={menudatas} />
        
              <div className="flex-1 justify-center flex">
                {/* <Suspense fallback={<SearchSkeleton />}>
                  <Search search={false} />
                </Suspense> */}
              <NavbarSearchIcon/>
              </div>
            </div>
            <Link
              className="flex-initial h-9 w-36.5"
              href="/"
              aria-label="Go to homepage"
            >
              <LogoIcon />
            </Link>


            <NavbarActions isGuest={isGuest} />

          </div>
        </nav>
      </header>
    </NavbarErrorBoundary>
  );
}