Skip to content

[Bug]: NavigationMenuItem with type PAGE_LAYOUT returns 404 "Off track" for custom standalone pages #22251

Description

@Davud77

Description

When creating a custom standalone page using definePageLayout (not attached to a standard object like Company/Person) and linking it to the sidebar via defineNavigationMenuItem with type: 'PAGE_LAYOUT', the SPA router fails to load the component. Clicking the menu item results in a 404 "Off track" error screen.

The component itself is successfully built, synced, and perfectly reachable via its direct URL (/page/<layout-uuid>), but the internal router fails to handle the click event from the sidebar.

Steps to Reproduce

  1. Scaffold a new app using npx create-twenty-app.
  2. Create a basic front component using defineFrontComponent.
  3. Create a custom page layout using definePageLayout and add the front component as a widget.
  4. Create a sidebar menu item using defineNavigationMenuItem with type: 'PAGE_LAYOUT' pointing to the layout's universal identifier.
  5. Sync the app (yarn twenty dev).
  6. Click the newly created item in the left sidebar.

Minimal Reproducible Code:

// 1. Front Component
export default defineFrontComponent({
  universalIdentifier: 'f72a44bd-c63e-4b6e-b19e-9b88e1a110a1',
  name: 'test-page',
  component: () => <div>Hello World</div>,
});

// 2. Page Layout
export default definePageLayout({
  universalIdentifier: '6ea3c1d4-82f5-4c0a-9d66-3b18c7d1e0b2',
  name: 'Test Page Layout',
  tabs: [
    {
      universalIdentifier: 'a8b1c2d3-e4f5-4a0b-a12d-3e4f5a6b7c8d',
      title: 'Main Tab',
      position: 10,
      layoutMode: PageLayoutTabLayoutMode.CANVAS,
      widgets: [
        {
          universalIdentifier: 'b1c2d3e4-f5a6-4b7c-8d9e-0f1a2b3c4d5e',
          title: 'Widget',
          type: 'FRONT_COMPONENT',
          configuration: {
            configurationType: 'FRONT_COMPONENT',
            frontComponentUniversalIdentifier: 'f72a44bd-c63e-4b6e-b19e-9b88e1a110a1',
          },
        },
      ],
    }
  ]
});

// 3. Navigation Menu Item
export default defineNavigationMenuItem({
  universalIdentifier: 'e5d4c3b2-a1f0-4e9d-8c7b-6a5f4e3d2c1b',
  name: 'Custom Dashboard',
  label: 'Custom Dashboard',
  icon: 'IconLayoutDashboard',
  position: 15,
  type: 'PAGE_LAYOUT',
  pageLayoutUniversalIdentifier: '6ea3c1d4-82f5-4c0a-9d66-3b18c7d1e0b2',
});

Metadata

Metadata

Assignees

Type

No type

Priority

None yet

Dev status

None yet

Start date

None yet

Target date

None yet

Quarter

None yet

Projects

Status
In project

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions