What is best practice for this layout

[calm cargo]

I'm making a site where the left column is navigation and the right side is the content. I want the site navigation in the top of the left column and the navigation of the page in the left column under the site navigation.

How do I set this up with outlets?

Do I make the lower left nav the outlet of the top parent path then how do I make the main content?

Do I load the page navigation in the parent and make the main content the outlet? It would work, but it breaks the separation of functionality I'm hoping to achieve.

Thank you for your help!

[sacred burrow]

are the navigations dynamic or static?

if i am to understand you well, you need a sidebar, a main nav and menu kind of layout?

[calm cargo]

The navigation is dependent on if your a student or an instructor.

I have course information that I'm loading in the /course/:courseId path that are needed by Dashboard, Content, Gradebook, Data and People.

Right now I have /course/:courseId making a grid layout and the outlet is the main content.

Should I just break them up into five paths and not use outlet?

[round finch]

What are the URLs for the other items in the sidebar? I'm guessing something like /course/:courseId/content and /course/:courseId/gradebook, etc. right?

You'll definitely want to use an outlet for this. We actually have a pretty similar setup in Trigger.dev and you can checkout how we do it: https://github.com/triggerdotdev/trigger.dev/blob/main/apps/webapp/app/routes/_app.orgs.%24organizationSlug/route.tsx

[calm cargo]

Your layout is exactly what I was thinking. Your code is very clean and even uses Typescript! I wasn't able to immediately determine if each products' information loads at the parent path level. Is that the case?

If not, what at a high level is your strategy for loading breadcrumbs and the information specific to each product on your side nav?