[How To?] App Router : Whats the most efficient way to structure this layout?
https://www.loom.com/share/9ad8ca7984344870982bbc17cf76b878?sid=9bcca7c0-a71c-49fa-9f0d-bb1b9133c8d7
I am trying to find the most efficient way to structure this type of layout:
My folder structure currently looks like:
What I am looking for is a Header and sidebar component on frontend and admin pages, however on frontend pages the sidebar should NOT show on desktop, and on admin pages the sidebar SHOULD SHOW on desktop.
Then on mobile view, the Sidebar should turn into an off-canvas menu on both the frontend pages and admin pages.
This would give a pretty typical experience where the frontend pages, on desktop, have just a header and page content. Then when you log in and go to admin pages, there is a sidebar with admin related link (users, orders, ect).
If you access the same flow on mobile, then on the frontend pages there is a reduced mobile header (with just logo and hamburger menu icon) and any header nav items (pricing, about, contact) are moved to the Sidebar. If you sign up and go to admin pages, on mobile, then your admin nav is shown in the Sidebar.
I am trying to find the most efficient way to structure this type of layout:
My folder structure currently looks like:
What I am looking for is a Header and sidebar component on frontend and admin pages, however on frontend pages the sidebar should NOT show on desktop, and on admin pages the sidebar SHOULD SHOW on desktop.
Then on mobile view, the Sidebar should turn into an off-canvas menu on both the frontend pages and admin pages.
This would give a pretty typical experience where the frontend pages, on desktop, have just a header and page content. Then when you log in and go to admin pages, there is a sidebar with admin related link (users, orders, ect).
If you access the same flow on mobile, then on the frontend pages there is a reduced mobile header (with just logo and hamburger menu icon) and any header nav items (pricing, about, contact) are moved to the Sidebar. If you sign up and go to admin pages, on mobile, then your admin nav is shown in the Sidebar.
Loom![[How To?] App Router : Whats the most efficient way to structure th...](https://images-ext-1.discordapp.net/external/z1tDA-G_Cb-5oMgu5vVQVe1UcXKaxxNEFsyBi38QvSE/https/cdn.loom.com/sessions/thumbnails/9ad8ca7984344870982bbc17cf76b878-00001.gif)
In this video, I discuss the layout options in the Create T3 app. I explore the difference between the admin and frontend layouts and consider the most efficient way to handle state and sidebar visibility. I demonstrate how the layout changes when viewing the app on different devices. I also share my thoughts on the current implementation and se...
Was this page helpful?
