[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.
Loom
[How To?] App Router : Whats the most efficient way to structure th...
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...
1 Reply
WHAT I HAVE SO FAR:
I have something working, but a voice is telling me its not the best way to handle and expand upon this layout design.
Looking at the above file structure, in the root layout I insert the Header component and any providers:
In my app/(frontend)/layout.tsx file I insert the Sidebar with a prop showFixed={false} and a navBar prop where I pass in nav that I want the sidebar to render, which will be conditional based on frontend or admin:
In my app/(admin)/layout.tsx file I insert the Sidebar with a prop showFixed={true} and a navBar prop where I pass in nav that I want the sidebar to render, which will be conditional based on frontend or admin:
and then in the Header component I am using zustand to store and retreive state on if the mobile menu button is clicked or not:
and then finally the Sidebar Component