I am trying to build an application which is basically a TODO app.

The goal is to show the list of TODOs on the left side of the screen, and a single particular TODO on the right side. The urls it happens at is localhost:3000/todos

My routes are like this:

layout.tsx
page.tsx
todos/layout.tsx
todos/page.tsx
todos/@leftnav/page.tsx <= shows all the todos
todos/notes/[note_id]/page.tsx <= shows details for a particular TODO

This works perfectly fine when I visit localhost:3000/todos. I see the contents of todos/@leftnav/page.tsx in the left portion of the lage.


HOWEVER, when I visit localhost:3000/todos/notes/1 the 'leftnav' slot doesn't render anything.

What is the correct way to do this?

Thanks!