CustomerLayout

CustomerLayout is the frame around the customer's account: profile, orders, wishlist, wallet, notifications and settings. It sits inside MasterLayout, so the header and footer stay.

What it drawsCopy Anchor Link

• A header band with the breadcrumb for the current page.
• A sidebar with the account menu. On the profile page it also shows the avatar with an upload button.
• The page title as an h1, then your page.
• The class customer on <body>, for every account page. Use it to style the account area without touching other pages.

On small screens the sidebar menu is hidden and the page uses the full width.

ImportCopy Anchor Link

import { CustomerLayout } from '@salla.sa/twilight-theme-engine/components/layout';

How it is usedCopy Anchor Link

The engine generates the /account route for you. It is a layout route: it finds the page data from whichever child route is open, then wraps that child with CustomerLayout:

function AccountLayoutComponent() {
  const matches = useMatches();
  const page = matches.reduceRight(
    (found, m) => found ?? (m.loaderData?.page ? m.loaderData.page : null),
    null,
  );

  return (
    <CustomerLayout page={page}>
      <Outlet />
    </CustomerLayout>
  );
}

While an account page loads, the route shows CustomerLayoutSkeleton.

Replace itCopy Anchor Link

CustomerLayout is not a setting. To change it, replace the /account route the same way you replace any built-in page. See Fork a built-in route.

import { route } from '@tanstack/virtual-file-routes';

export const routes = [route('/account', 'account-layout.tsx')];

import { createFileRoute, Outlet } from '@tanstack/react-router';

export const Route = createFileRoute('/{-$locale}/account')({
  component: () => (
    <div className="container">
      <aside>{/* your account menu */}</aside>
      <Outlet />
    </div>
  ),
});

See alsoCopy Anchor Link

• Account pages
• Layouts overview
• Add content to a slot if you only need to add something