Next.js Discord

Discord Forum

ShadCN Sidebar Responsive Issue

Unanswered
Barbary Lion posted this in #help-forum
Open in Discord
Avatar
Barbary LionOP
I am trying to integrate the ShadCN sidebar into my dashboard page. When I do, the layout.tsx messes up with my layout. I have provided images that further explain my issue.

8 Replies

Avatar
Barbary LionOP
This is my page route file structure. Both pages are the exact same.
The only difference is the layout.tsx file.

Dashwip is where I am trying to integrate the shadCN sidebar.
Image
This is how layout.tsx looks, I believe exact same as ShadCN documentation.
Image
This is how my page looks without layout.tsx (no sidebar)
Image
This is how my page looks with layout.tsx (sidebar)
Image
Smaller screen page without layout.tsx (no sidebar)
Image
Smaller screen page with layout.tsx (sidebar).
Notice: horizontal scrolling and barely any responsiveness
Image
Can anyone explain what is causing this or how to fix it?
Avatar
Barbary LionOP
This is my page.tsx if it is any helpful
Image