Currently, when using a NavigationView on smaller screens like a mobile phone you see the NavigationContent first and then through the hamburger menu you can navigate through the items and change page.

I was wondering if there is a way where we see the NavigationItems first? i.e. the NavigationItems take up the entire screen width and height and then clicking on the item navigates to that page.

Take Microsoft Teams for example. On laptops it shows something as a DockLayout with the chat on the left and then navigate to the detailed messages on the right. On a mobile phone tho, the list of chats take the entire screen width and height and clicking on them takes you to that detailed messages.

I was able to get this to work using DockLayout and some other additional code:

- Use onIdiom to get device type.

- Dynamically hide or show parts of dock layout. (for instance hide the right side of the DockLayout and then left takes up the entire space).

- Switch between a ContentView and a ContentPage depending on device and functionality.  On bigger screens with full fledged docklayout, use ContentView. On smaller screens with no docklayout functionality use ContentPage

This does the job but as you can see there are a lot of moving parts and when working on a bigger project this gets hard to manage. 

Can something of this sort be implemented out of the box using Telerik controls or is there already a way to achieve this?