Complex Layout (Sidenav + Nested Page with transitions, different on Mobile)
Has anyone ever been able to achieve this?
So I want to have a Layout, that displays a sidenav in 1/3 of the page and the <NuxtPage> in 2/3 of it. Now here comes the trick part:
On Mobile, the Sidenav should be displayed in Full width and the content should not be displayed at all. If you click on one link inside of the sidenav, the content should be displayed in full screen height and width and a Back Button at the top should appear. This back button should not do
$router.back() but instead, route to the "Parent" page of that nested page.
If you click on a Page inside of the first page, it should display this page aswell and the Back Button should route to the previous page.
I have it kind of working but I did it in a very very ugly way, and I'm relying solely on $router.back().1 Reply
What would be your approach to do this?