application layout (beta)

render(() => {
  const navigate = (route) => console.info(`Navigation mock: ${route}`);

  const tree = {
    brandNode: {
      name: 'foo',
      url: '/bar',
    },
    sideNavigationTree: {
      nodes: [
        {
          name: 'componentes',
          order: 0,
          validationRules: [],
          Icon: <BookOutline />,
          children: [
            {
              name: 'badge',
              order: 1,
              url: '/components/badge',
              label: undefined,
              validationRules: [],
              children: [],
              Icon: <ColumnOutline />,
              type: 'item',
            },
            {
              name: 'toast',
              order: 2,
              url: '/components/toast',
              label: {
                variation: 'primary',
                text: 'novo',
              },
              validationRules: [],
              children: [],
              Icon: <AlertCircleFill />,
              type: 'item',
            },
          ],
        },
        {
          name: 'side navigation',
          order: 3,
          onClick: (e) => {
            e.preventDefault();
            navigate('/components/sidenavigation');
          },
          url: '/components/sidenavigation',
          label: {
            variation: 'info',
            text: 'beta',
          },
          validationRules: [],
          children: [],
          Icon: <PriceTagOutline />,
          type: 'item',
        },
      ],
    },
  };

  const AppLogo = () => <div>Logo</div>;

  return (
    <ApplicationLayout
      navigationTree={tree}
      Logo={AppLogo}
      logoutLabel="logout"
      logoutAction={() => console.log('saiu')}
    >
      aqui renderiza a página
    </ApplicationLayout>
  );
});