@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/components/layout/navbar/navbar-collections.tsx

@@ -0,0 +1,291 @@
+import {useTranslations} from 'next-intl';
+import {getTopCollections} from '@/lib/vendure/cached';
+import {getActiveChannelToken} from '@/lib/channel-server';
+import {getRouteLocale} from '@/i18n/server';
+import {
+    NavigationMenu,
+    NavigationMenuList,
+    NavigationMenuItem,
+    NavigationMenuTrigger,
+    NavigationMenuContent,
+    NavigationMenuLink,
+} from '@/components/ui/navigation-menu';
+import {NavbarLink} from '@/components/layout/navbar/navbar-link';
+import {Link} from '@/i18n/navigation';
+import {cn} from '@/lib/utils';
+import {ResultOf} from '@/graphql';
+import {GetTopCollectionsQuery} from '@/lib/vendure/queries';
+
+type Collection = ResultOf<typeof GetTopCollectionsQuery>['collections']['items'][number];
+
+const MAX_VISIBLE_GRANDCHILDREN = 5;
+
+function MegaMenuContent({collection}: { collection: Collection }) {
+    const t = useTranslations('Navigation');
+    const children = collection.children ?? [];
+
+    // Group children by whether they have grandchildren
+    const categoriesWithSubs = children.filter(c => c.children && c.children.length > 0);
+    const simpleCategories = children.filter(c => !c.children || c.children.length === 0);
+
+    return (
+        <NavigationMenuContent>
+            <div className="grid gap-3 p-4 w-[400px] md:w-[500px] lg:w-[600px] md:grid-cols-2">
+                {/* Parent collection link */}
+                <NavigationMenuLink asChild>
+                    <Link
+                        href={`/collection/${collection.slug}`}
+                        prefetch={false}
+                        className={cn(
+                            "block select-none rounded-md p-3 leading-none no-underline outline-none transition-colors",
+                            "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+                            "col-span-full border-b pb-3 mb-1"
+                        )}
+                    >
+                        <div className="text-sm font-medium leading-none">
+                            {t('viewAllCollection', {name: collection.name})}
+                        </div>
+                        <p className="text-muted-foreground line-clamp-2 text-sm leading-snug mt-1">
+                            {t('browseAllCollection', {name: collection.name})}
+                        </p>
+                    </Link>
+                </NavigationMenuLink>
+
+                {/* Categories with subcategories */}
+                {categoriesWithSubs.map((child) => (
+                    <div key={child.id} className="space-y-2">
+                        <NavigationMenuLink asChild>
+                            <Link
+                                href={`/collection/${child.slug}`}
+                                prefetch={false}
+                                className="block text-sm font-medium hover:underline"
+                            >
+                                {child.name}
+                            </Link>
+                        </NavigationMenuLink>
+                        <ul className="space-y-1">
+                            {child.children?.slice(0, MAX_VISIBLE_GRANDCHILDREN).map((grandchild) => (
+                                <li key={grandchild.id}>
+                                    <NavigationMenuLink asChild>
+                                        <Link
+                                            href={`/collection/${grandchild.slug}`}
+                                            prefetch={false}
+                                            className="text-muted-foreground block text-sm hover:text-foreground hover:underline"
+                                        >
+                                            {grandchild.name}
+                                        </Link>
+                                    </NavigationMenuLink>
+                                </li>
+                            ))}
+                            {child.children && child.children.length > MAX_VISIBLE_GRANDCHILDREN && (
+                                <li>
+                                    <NavigationMenuLink asChild>
+                                        <Link
+                                            href={`/collection/${child.slug}`}
+                                            prefetch={false}
+                                            className="text-muted-foreground text-sm hover:text-foreground hover:underline"
+                                        >
+                                            {t('moreGrandchildren', {count: child.children.length - MAX_VISIBLE_GRANDCHILDREN})}
+                                        </Link>
+                                    </NavigationMenuLink>
+                                </li>
+                            )}
+                        </ul>
+                    </div>
+                ))}
+
+                {/* Simple categories without subcategories */}
+                {simpleCategories.length > 0 && (
+                    <div className={cn(
+                        "space-y-1",
+                        categoriesWithSubs.length > 0 && "col-span-full border-t pt-3 mt-2"
+                    )}>
+                        <div className="flex flex-wrap gap-2">
+                            {simpleCategories.map((child) => (
+                                <NavigationMenuLink key={child.id} asChild>
+                                    <Link
+                                        href={`/collection/${child.slug}`}
+                                        prefetch={false}
+                                        className={cn(
+                                            "inline-block rounded-md px-3 py-1.5 text-sm",
+                                            "bg-muted hover:bg-accent hover:text-accent-foreground transition-colors"
+                                        )}
+                                    >
+                                        {child.name}
+                                    </Link>
+                                </NavigationMenuLink>
+                            ))}
+                        </div>
+                    </div>
+                )}
+            </div>
+        </NavigationMenuContent>
+    );
+}
+
+function CollectionMenuItem({collection, className}: { collection: Collection; className?: string }) {
+    const hasChildren = collection.children && collection.children.length > 0;
+
+    if (hasChildren) {
+        return (
+            <NavigationMenuItem className={className}>
+                <NavigationMenuTrigger className="h-auto py-1.5 px-3">
+                    {collection.name}
+                </NavigationMenuTrigger>
+                <MegaMenuContent collection={collection} />
+            </NavigationMenuItem>
+        );
+    }
+
+    return (
+        <NavigationMenuItem className={className}>
+            <NavbarLink href={`/collection/${collection.slug}`}>
+                {collection.name}
+            </NavbarLink>
+        </NavigationMenuItem>
+    );
+}
+
+// Responsive breakpoints for visible collections
+// lg (1024px+): Show first 3 items
+// xl (1280px+): Show first 5 items
+// 2xl (1536px+): Show first 6 items
+const VISIBLE_AT_LG = 3;
+const VISIBLE_AT_XL = 5;
+const VISIBLE_AT_2XL = 6;
+
+export async function NavbarCollections() {
+    const locale = await getRouteLocale();
+    const channelToken = await getActiveChannelToken();
+    const collections = await getTopCollections(locale, channelToken);
+
+    return <NavbarCollectionsView collections={collections} />;
+}
+
+function NavbarCollectionsView({collections}: { collections: Collection[] }) {
+    const t = useTranslations('Navigation');
+
+    // Split collections into responsive groups
+    const alwaysVisible = collections.slice(0, VISIBLE_AT_LG);
+    const visibleAtXl = collections.slice(VISIBLE_AT_LG, VISIBLE_AT_XL);
+    const visibleAt2Xl = collections.slice(VISIBLE_AT_XL, VISIBLE_AT_2XL);
+
+    // Collections that go into "More" dropdown at each breakpoint
+    const moreAtLg = collections.slice(VISIBLE_AT_LG);
+    const moreAtXl = collections.slice(VISIBLE_AT_XL);
+    const moreAt2Xl = collections.slice(VISIBLE_AT_2XL);
+
+    return (
+        <NavigationMenu>
+            <NavigationMenuList>
+                {/* Always visible at lg+ */}
+                {alwaysVisible.map((collection) => (
+                    <CollectionMenuItem
+                        key={collection.id}
+                        collection={collection}
+                    />
+                ))}
+
+                {/* Visible at xl+, hidden at lg */}
+                {visibleAtXl.map((collection) => (
+                    <CollectionMenuItem
+                        key={collection.id}
+                        collection={collection}
+                        className="hidden xl:block"
+                    />
+                ))}
+
+                {/* Visible at 2xl+, hidden below */}
+                {visibleAt2Xl.map((collection) => (
+                    <CollectionMenuItem
+                        key={collection.id}
+                        collection={collection}
+                        className="hidden 2xl:block"
+                    />
+                ))}
+
+                {/* "More" dropdown - responsive content based on breakpoint */}
+                {moreAtLg.length > 0 && (
+                    <>
+                        {/* At lg: show More with all remaining items */}
+                        <NavigationMenuItem className="xl:hidden">
+                            <NavigationMenuTrigger className="h-auto py-1.5 px-3">
+                                {t('more')}
+                            </NavigationMenuTrigger>
+                            <NavigationMenuContent>
+                                <div className="grid gap-1 p-4 w-[250px]">
+                                    {moreAtLg.map((collection) => (
+                                        <NavigationMenuLink key={collection.id} asChild>
+                                            <Link
+                                                href={`/collection/${collection.slug}`}
+                                                prefetch={false}
+                                                className={cn(
+                                                    "block select-none rounded-md p-2 text-sm leading-none no-underline outline-none transition-colors",
+                                                    "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                                                )}
+                                            >
+                                                {collection.name}
+                                            </Link>
+                                        </NavigationMenuLink>
+                                    ))}
+                                </div>
+                            </NavigationMenuContent>
+                        </NavigationMenuItem>
+
+                        {/* At xl: show More with fewer items */}
+                        {moreAtXl.length > 0 && (
+                            <NavigationMenuItem className="hidden xl:block 2xl:hidden">
+                                <NavigationMenuTrigger className="h-auto py-1.5 px-3">
+                                    {t('more')}
+                                </NavigationMenuTrigger>
+                                <NavigationMenuContent>
+                                    <div className="grid gap-1 p-4 w-[250px]">
+                                        {moreAtXl.map((collection) => (
+                                            <NavigationMenuLink key={collection.id} asChild>
+                                                <Link
+                                                    href={`/collection/${collection.slug}`}
+                                                    className={cn(
+                                                        "block select-none rounded-md p-2 text-sm leading-none no-underline outline-none transition-colors",
+                                                        "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                                                    )}
+                                                >
+                                                    {collection.name}
+                                                </Link>
+                                            </NavigationMenuLink>
+                                        ))}
+                                    </div>
+                                </NavigationMenuContent>
+                            </NavigationMenuItem>
+                        )}
+
+                        {/* At 2xl: show More only if there are items beyond 6 */}
+                        {moreAt2Xl.length > 0 && (
+                            <NavigationMenuItem className="hidden 2xl:block">
+                                <NavigationMenuTrigger className="h-auto py-1.5 px-3">
+                                    {t('more')}
+                                </NavigationMenuTrigger>
+                                <NavigationMenuContent>
+                                    <div className="grid gap-1 p-4 w-[250px]">
+                                        {moreAt2Xl.map((collection) => (
+                                            <NavigationMenuLink key={collection.id} asChild>
+                                                <Link
+                                                    href={`/collection/${collection.slug}`}
+                                                    className={cn(
+                                                        "block select-none rounded-md p-2 text-sm leading-none no-underline outline-none transition-colors",
+                                                        "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                                                    )}
+                                                >
+                                                    {collection.name}
+                                                </Link>
+                                            </NavigationMenuLink>
+                                        ))}
+                                    </div>
+                                </NavigationMenuContent>
+                            </NavigationMenuItem>
+                        )}
+                    </>
+                )}
+            </NavigationMenuList>
+        </NavigationMenu>
+    );
+}

package/dist/assets/storefront/src/components/layout/navbar/navbar-link.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import {useSelectedLayoutSegment} from 'next/navigation';
+import {ComponentProps} from 'react';
+import {Link} from '@/i18n/navigation';
+import {
+    NavigationMenuLink,
+    navigationMenuTriggerStyle,
+} from '@/components/ui/navigation-menu';
+import {cn} from '@/lib/utils';
+
+export function NavbarLink({href, ...rest}: ComponentProps<typeof Link>) {
+    const selectedLayoutSegment = useSelectedLayoutSegment();
+    const pathname = selectedLayoutSegment ? `/${selectedLayoutSegment}` : '/';
+    const isActive = pathname === href;
+
+    return (
+        <NavigationMenuLink asChild active={isActive}>
+            <Link
+                aria-current={isActive ? 'page' : undefined}
+                className={cn(navigationMenuTriggerStyle())}
+                href={href}
+                prefetch={false}
+                {...rest}
+            />
+        </NavigationMenuLink>
+    );
+}

package/dist/assets/storefront/src/components/layout/navbar/navbar-user.tsx

@@ -0,0 +1,147 @@
+import { BusinessUnitSwitcher } from '@/components/commerce/business-unit-switcher';
+import { CompanySwitcher } from '@/components/commerce/company-switcher';
+import { LoginButton } from '@/components/layout/navbar/login-button';
+import { PersonalNavMenuItems, CompanyNavMenuItems } from '@/components/layout/navbar/nav-menu-items';
+import { Button, buttonVariants } from '@/components/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { readFragment } from '@/graphql';
+import {
+    ActiveCustomerFragment,
+    CompanyBusinessUnitFragment,
+    CompanyFragment,
+    CompanyPermissionFragment,
+    CompanyRoleFragment,
+    CompanyUserFragment,
+} from '@/lib/vendure/fragments';
+import { client, getVendureContext } from '@/lib/vendure/api';
+import type { VendureContext } from '@/lib/vendure/api';
+import { getMyCompanies } from '@/lib/vendure/actions';
+import { GetActiveCustomerQuery, GetCompanyAccountQuery } from '@/lib/vendure/queries';
+import { cacheLife, cacheTag } from 'next/cache';
+import {getTranslations} from 'next-intl/server';
+import { User } from 'lucide-react';
+import {cn} from '@/lib/utils';
+
+async function getNavbarUserData(ctx: VendureContext) {
+    'use cache: private';
+    cacheLife('minutes');
+    cacheTag('active-customer');
+
+    const [customerResult, companyResult] = await Promise.all([
+        client.query(GetActiveCustomerQuery, undefined, ctx),
+        client.query(GetCompanyAccountQuery, undefined, ctx),
+    ]);
+
+    const [custRes, custErr] = customerResult;
+    const customer = custErr
+        ? null
+        : readFragment(ActiveCustomerFragment, custRes.data.activeCustomer);
+
+    if (!customer) return { customer: null, companyAccount: null };
+
+    const [compRes, compErr] = companyResult;
+    let companyAccount = null;
+    if (!compErr && compRes.data.companyAccount) {
+        const account = compRes.data.companyAccount;
+        const company = readFragment(CompanyFragment, account.company);
+        const rawUser = readFragment(CompanyUserFragment, account.companyUser);
+        const activeBusinessUnit = account.activeBusinessUnit
+            ? readFragment(CompanyBusinessUnitFragment, account.activeBusinessUnit)
+            : null;
+
+        companyAccount = {
+            company,
+            companyUser: {
+                ...rawUser,
+                companyRoles: rawUser.companyRoles.map(r => {
+                    const role = readFragment(CompanyRoleFragment, r);
+                    return {
+                        ...role,
+                        permissions: role.permissions.map(p => readFragment(CompanyPermissionFragment, p)),
+                    };
+                }),
+                businessUnits: rawUser.businessUnits.map(bu => readFragment(CompanyBusinessUnitFragment, bu)),
+            },
+            activeBusinessUnit,
+            permissions: [...account.permissions],
+        };
+    }
+
+    return { customer, companyAccount };
+}
+
+export async function NavbarUser() {
+    const [ctx, t] = await Promise.all([
+        getVendureContext(),
+        getTranslations('Navigation'),
+    ]);
+    const [{ customer, companyAccount }, companies] = await Promise.all([
+        getNavbarUserData(ctx),
+        getMyCompanies(),
+    ]);
+
+    if (!customer) {
+        return (
+            <Button variant="ghost" asChild>
+                <LoginButton isLoggedIn={false} />
+            </Button>
+        );
+    }
+
+    const businessUnits = companyAccount?.companyUser?.businessUnits ?? [];
+    const activeBusinessUnitId = companyAccount?.activeBusinessUnit?.id ?? null;
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger className={cn(buttonVariants({ variant: "ghost" }))}>
+                    <User className="h-5 w-5" />
+                    {t('greeting', {name: customer.firstName})}
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-56">
+                {companies.length > 1 && companyAccount && (
+                    <>
+                        <DropdownMenuLabel className="text-xs text-muted-foreground">
+                            {t('company')}
+                        </DropdownMenuLabel>
+                        <div className="px-1 py-1">
+                            <CompanySwitcher
+                                companies={companies}
+                                activeCompanyId={companyAccount.company.id}
+                            />
+                        </div>
+                        <DropdownMenuSeparator />
+                    </>
+                )}
+                {companyAccount && businessUnits.length > 1 && (
+                    <>
+                        <DropdownMenuLabel className="text-xs text-muted-foreground">
+                            {t('businessUnit')}
+                        </DropdownMenuLabel>
+                        <div className="px-1 py-1">
+                            <BusinessUnitSwitcher
+                                businessUnits={businessUnits}
+                                activeBusinessUnitId={activeBusinessUnitId}
+                            />
+                        </div>
+                        <DropdownMenuSeparator />
+                    </>
+                )}
+                <PersonalNavMenuItems />
+                {companyAccount && (
+                    <CompanyNavMenuItems permissions={companyAccount.permissions} />
+                )}
+                <DropdownMenuSeparator />
+                <DropdownMenuItem asChild>
+                    <LoginButton isLoggedIn={true} />
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}

package/dist/assets/storefront/src/components/layout/navbar/theme-switcher.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import {useTheme} from "next-themes";
+import {useEffect, useState} from "react";
+import {Moon, Sun} from "lucide-react";
+import {Button} from "@/components/ui/button";
+
+export function ThemeSwitcher() {
+    const [mounted, setMounted] = useState(false);
+    const {theme, setTheme} = useTheme();
+
+    useEffect(() => {
+        // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional SSR hydration pattern
+        setMounted(true);
+    }, []);
+
+    if (!mounted) {
+        return (
+            <Button variant="ghost" size="icon" className="h-9 w-9" disabled>
+                <Sun className="size-4" />
+                <span className="sr-only">Toggle theme</span>
+            </Button>
+        );
+    }
+
+    const isDark = theme === "dark";
+
+    return (
+        <Button
+            variant="ghost"
+            size="icon"
+            className="h-9 w-9"
+            onClick={() => setTheme(isDark ? "light" : "dark")}
+            aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
+        >
+            {isDark ? <Sun className="size-4" /> : <Moon className="size-4" />}
+        </Button>
+    );
+}

package/dist/assets/storefront/src/components/layout/navbar.tsx

@@ -0,0 +1,117 @@
+import Image from "next/image";
+import {Link} from "@/i18n/navigation";
+import {NavbarCart} from '@/components/layout/navbar/navbar-cart';
+import {NavbarUser} from '@/components/layout/navbar/navbar-user';
+import {ThemeSwitcher} from '@/components/layout/navbar/theme-switcher';
+import {LanguagePicker} from '@/components/layout/navbar/language-picker';
+import {ChannelPickerWrapper} from '@/components/layout/navbar/channel-picker-wrapper';
+import {CurrencyPickerWrapper} from '@/components/layout/navbar/currency-picker-wrapper';
+import {SearchInput} from '@/components/layout/search-input';
+import {MobileNav} from '@/components/layout/navbar/mobile-nav';
+import {DraftModeBorderStyle, DraftModeIndicator} from '@/components/layout/draft-mode-indicator';
+import {AwaitingApprovalBanner} from '@/components/providers/awaiting-approval-banner';
+import {getHasCompany} from '@/lib/vendure/actions';
+import {getTranslations} from 'next-intl/server';
+import {Suspense} from "react";
+import {getBranding} from '@/config/branding';
+
+// Groups all async navbar children so they stream as a single chunk.
+// Without this, each async component gets its own implicit Suspense
+// boundary, causing staggered rendering and CLS within the fixed header.
+async function AsyncNavbarContent() {
+    const [hasCompany, t] = await Promise.all([
+        getHasCompany(),
+        getTranslations('Navigation'),
+    ]);
+    const defaultNavLinks = [
+        {href: '/catalog', label: t('catalog')},
+        {href: '/account/quick-order', label: t('quickOrder')},
+        {href: '/account/orders', label: t('orders')},
+        {href: '/account/quotes', label: t('quotes')},
+    ];
+    const companyNavLink = {href: '/account/company', label: t('company')};
+    const branding = getBranding();
+    const navLinks = branding.navLinks ?? defaultNavLinks;
+    const appendCompany = hasCompany && !branding.hideCompanyNavLink;
+    const allLinks = appendCompany ? [...navLinks, companyNavLink] : navLinks;
+    return (
+        <>
+            <div className="flex items-center gap-4 flex-shrink-0 lg:hidden">
+                <MobileNav navLinks={allLinks} />
+            </div>
+            <div className="flex items-center justify-between flex-1 ml-4">
+                <nav className="hidden lg:flex items-center gap-1">
+                    {allLinks.map(({href, label}) => (
+                        <Link
+                            key={href}
+                            href={href}
+                            prefetch={false}
+                            className="px-3 py-1.5 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors rounded-md hover:bg-accent"
+                        >
+                            {label}
+                        </Link>
+                    ))}
+                </nav>
+                <div className="flex items-center gap-2">
+                    <div className="hidden lg:flex">
+                        <SearchInput/>
+                    </div>
+                    <ChannelPickerWrapper />
+                    <CurrencyPickerWrapper />
+                    {!branding.hideLanguagePicker && <LanguagePicker />}
+                    <ThemeSwitcher />
+                    <NavbarCart/>
+                    <NavbarUser/>
+                    <DraftModeIndicator />
+                </div>
+            </div>
+        </>
+    );
+}
+
+function AsyncNavbarSkeleton() {
+    return (
+        <div className="flex items-center justify-between flex-1 ml-4">
+            <nav className="hidden lg:flex items-center gap-1">
+                {[1, 2, 3].map((i) => (
+                    <div key={i} className="h-8 w-16 rounded-md" />
+                ))}
+            </nav>
+            <div className="flex items-center gap-2">
+                <div className="hidden lg:flex">
+                    <div className="h-9 w-64 rounded-md bg-accent/50" />
+                </div>
+                <div className="size-9" />
+                <div className="size-9" />
+                <div className="h-9 w-20" />
+            </div>
+        </div>
+    );
+}
+
+export function Navbar() {
+    const { logo, siteName } = getBranding();
+    return (
+        <header className="fixed top-0 left-0 right-0 z-50 bg-muted border-b border-border">
+            <Suspense>
+                <DraftModeBorderStyle />
+            </Suspense>
+            <Suspense fallback={null}>
+                <AwaitingApprovalBanner />
+            </Suspense>
+            <div className="container mx-auto px-4">
+                <div className="flex items-center h-14">
+                    <div className="flex items-center gap-4 flex-shrink-0">
+                        <Link href="/" prefetch={false} className="flex-shrink-0 flex items-center gap-3">
+                            <Image src={logo.src} alt={logo.alt} width={logo.width} height={logo.height} className="h-5 w-auto" />
+                            <span className="hidden sm:inline text-sm font-bold text-foreground tracking-tight">{siteName}</span>
+                        </Link>
+                    </div>
+                    <Suspense fallback={<AsyncNavbarSkeleton />}>
+                        <AsyncNavbarContent />
+                    </Suspense>
+                </div>
+            </div>
+        </header>
+    );
+}