feat: add custom toolbar

[rkristelijn]

Adds ability to ship your own toolbar, this gives more flexibility, therefore: you can ship your own things, this may as well be the tools Toolpad already provides, such as the account, toolbar and any custom stuff, like a cart, or a search bar, in any given order.

Please let me know if this is in line with the roadmap, or how I can polish my merge request to approval.

• I've read and followed the contributing guide on how to create great pull requests.
• I've updated the relevant documentation for any new or updated feature.
• I've linked relevant GitHub issue with "Closes Feature request: more control on topbar slots #4662".
• I've added a visual demonstration in the form of a screenshot or video.

[apedroferreira]

Thanks a lot for your contribution!
Added some suggestions that will probably help simplify everything and align with what we think would be the best way to do this.

[apedroferreira]

Instead of creating any new slots, could we just move the <Account /> component to be included by default on the right of the toolbarActions slot, and get rid of the toolbarAccount slot?

Then anyone could customize these actions to have whatever they wanted in any order.
Some slight updates might also be needed to the documentation around this slot if we change this...

[rkristelijn]

I'm unsure to simply 'drop' the toolbarAccount slot, shouldn't we deprecate it first?

[apedroferreira]

Actually yeah, that might be better, we can just deprecate it!
And we can leave a TODO comment to remove it after the next three minor versions.

[rkristelijn]

@apedroferreira I just did that and added the documentation. Thanks for the help!

[rkristelijn]

@apedroferreira I lifted the ability to override to the full toolbar and introduced left, mid and right props too. I'm unsure if i should extend:

export interface DashboardLayoutSlotProps {
  appTitle?: AppTitleProps;
  toolbarActions?: {};
  toolbarAccount?: AccountProps;
  sidebarFooter?: SidebarFooterProps;
  toolbar?: {}; // needed?
}

And I will dive into updating the docs once you approved of this direction/change. Thanks for your feedback!

[rkristelijn]

I think it is good enough now;

considering these helper functions:

function Middle({ menuIcon }: ToolbarProps) {
  return (
    <Stack direction="row" spacing={2} alignItems="center" justifyContent="space-between">
      {menuIcon}
      <ToolbarActions />
    </Stack>
  );
}

function Right() {
  return (
    <Stack direction="row" spacing={2} alignItems="center">
      <Account />

      <Link href="/orders">
        <Button color="primary" aria-label="Cart">
          <ShoppingCart />
        </Button>
      </Link>
    </Stack>
  );
}

function Left() {
  return (
    <Stack direction="row" spacing={2} alignItems="center">
      <AppTitle />
    </Stack>
  );
}

export default function DashboardPagesLayout(props: { children: React.ReactNode }) {
  const pathname = usePathname();
  const params = useParams();
  const [orderId] = params.segments ?? [];

  const title = React.useMemo(() => {
    if (pathname === '/orders/new') {
      return 'New Order';
    }
    if (orderId && pathname.includes('/edit')) {
      return `Order ${orderId} - Edit`;
    }
    if (orderId) {
      return `Order ${orderId}`;
    }
    return undefined;
  }, [orderId, pathname]);

  return (
    <DashboardLayout
      slots={{
        sidebarFooter: SidebarFooterAccount,
        toolbarLeft: () => <div />,
        toolbarRight: () => <div />,
        toolbarMiddle: Middle,
      }}
    >
      <PageContainer title={title}>{props.children}</PageContainer>
    </DashboardLayout>
  );
}

renders as:

<DashboardLayout
      slots={{
        sidebarFooter: SidebarFooterAccount,
        toolbarMiddle: Middle,
        toolbarRight: Right,
        toolbarLeft: Left,
      }}
    >
      <PageContainer title={title}>{props.children}</PageContainer>
    </DashboardLayout>

renders as:

<DashboardLayout
      slots={{
        sidebarFooter: SidebarFooterAccount,
        toolbar: Right,
      }}
    >
      <PageContainer title={title}>{props.children}</PageContainer>
    </DashboardLayout>

renders as:

[apedroferreira]

@apedroferreira I lifted the ability to override to the full toolbar and introduced left, mid and right props too. I'm unsure if i should extend:

export interface DashboardLayoutSlotProps {
  appTitle?: AppTitleProps;
  toolbarActions?: {};
  toolbarAccount?: AccountProps;
  sidebarFooter?: SidebarFooterProps;
  toolbar?: {}; // needed?
}

And I will dive into updating the docs once you approved of this direction/change. Thanks for your feedback!

I would really just stick to a single toolbarActions slot as proposed, and keep the changes minimal.