Moving primary content when sidebar appears
Hi! I am not really sure what this would be called or considered, so my searching for something similar hasn't been too fruitful, but essentially the idea is that I am trying to create a page of cards that have items, these items are for a store, I am looking for the ability for a sidebar to appear on the right side, however the cards would account for this. Currently, the sidebar appears and blocks some of the cards, but I guess is there a "good way" of avoiding this from happening, where when the sidebar appears, the cards would conform to the "new" size with the sidebar?
6 Replies
I think this is what you're looking for https://tailwindcss.com/docs/responsive-design
Responsive Design - Tailwind CSS
Using responsive utility variants to build adaptive user interfaces.
As the sidebar shrinks the size of the content you can adapt to thta with what I've sent
Although I would just overlay the sidebar on the content of the page
Good example of what that would look like https://ui.shadcn.com/docs/components/sheet
Sheet
Extends the Dialog component to display content that complements the main content of the screen.
I was looking at that, but wasn't sure if I was re-inventing the wheel on that one, appreciate it, and by that, you do you mean just covering the card content when the sidebar appears?
Check the component I just sent you
There's an example button so just click open
At a content will pop up on the side bluring everything is the background and overlaying over the content
You can put whatever you need to inside there
Hope that helps!
Yep, definitely will look into it, appreciate it!