I'm using Expo Router to build a web and mobile app, which will also support tablet/desktop screen sizes.

I want to achieve this two panel layout in a generic way that applies to many pages of the app:

|__ /patients
  |__ /patients/[patientId]
     |__ /patients/[patientId]/treatments
     |__ /patients/[patientId]/appointments

The two panels are /patients/ and /patients/patientId

/patients/[patientId] redirects to /patients/[patientId]/treatments by default

On desktop/tablet: the two panels are shown side by side

On mobile, the /patients panel is only shown if the route matches that exactly. However, if the route matches /patients/[patientId]/treatments, it should show the second panel for treatments.