Fixed side menu on an specific route

[matiastucci]

👋 I'm starting a new project and I would like to always have a top nav and only in a specific route have a sidebar where I can click and the content will change.

• The top nav should always be visible if I am in site.com or site.com/*/**
• If I go to site.com/posts I want to see a sidebar with all the posts title
• If I click a post on the left it will redirect to site.com/posts/1 and only the right side should change

I'm having trouble with the second and third bullet. My pages path is pages/posts/index.js and pages/posts/[id].js but how can I declare only one file and avoid duplicating code? 🤔

I tried pages/posts/[[...slug]].js but I'm seeing this error: Error: Optional catch-all routes are currently experimental and cannot be used by default ("/posts/[[...slug]]")

I'm looking for examples but so far I couldn't do it.

Any ideas?

[srikanth912]

Will this help? #12325 (comment)

Essentially, you get which page you are on currently and then compare the routes to hide/show top nav/sidebar.

If you want only site.com/posts/* to show the sidebar and everything else to show top nav, use regex to compare if asPath starts with /posts and hide top nav and show sidebar.