How to make a responsive sidebar with tailwind css | tailwind css tutorial

How to make a responsive sidebar with tailwind css | tailwind css tutorial
Code A Program...
GitHub link :
github.com/Sridhar-C-25/tailw...
tailwind css only Responsive navbar :
• How to make a responsi...
Toggle Switch with tailwind css :
• How to make a toggle s...
Ecommerce card design - tailwind css :
• design with tailwind c...
Pagination with React js and tailwind :
• React js and tailwind ...
Responsive website using React js and tailwind css :
• Responsive website usi...
Responsive navbar with vue js and tailwind css :
• How to make a responsi...
Responsive sidebar with tailwind css :
• How to make a responsi...
Cool Table design with tailwind css :
• How to make a table de...
Bootstrap Icons :
icons.getbootstrap.com/

[@mayowasunusi9161]

Thank you for this, it came in time!

[@yrq7203]

if anyone have problems with the function open() in the sidebar just change it to another name like 'openSidebar()', sometimes it get confused with a built in function called open() which result in having a blank page.

[@chunkycheese73]

This is amazing, best tutorial~!!! A+

[@glenihrig6817]

Loved the video! Very helpful stuff, You got a new subscriber - Thanks for sharing!

[@CodeAProgram]

Thank you 😀😀

[@sumansaha295]

But how is it responsive if it doesn't hide itself automatically on small screens? Moreover you haven't used any tailwind directives for responsive design like sm: md: lg: etc. I was hoping if it was possible to make a responsive sidebar purely with tailwind and no javascript.

[@ayat_ullah]

Thank you . I learned something new from you.

[@CodeAProgram]

Welcome 😀

[@ketsaraaw_]

Thanks for this tutorial, bro.. This is very good, it can be useful for the project that I will make.. Thanks again bro.

[@CodeAProgram]

Welcome

[@ketsaraaw_]

@@CodeAProgramBro, so that the sidebar when it appears there is an entry transition how yes, if we use tailwind. If there is no transition of entry is not good, sob

[@CodeAProgram]

We can do transition using tailwind but in this video i didn't used. If you are in need try yourself, you can.

[@anuj7286]

Great tutorial man!

[@CodeAProgram]

Thanks!

[@335-arifdwinugroho5]

I have problem
document.querySelector('.sidebar').classList.toggle('left-[-300]');
when I click it can't show/hide but it looks blank white instead

[@learning-shaharyar550]

thankYou

[@fikrifauzan215]

thanks for this tutorial ... very helpfull

[@CodeAProgram]

Your welcome

[@GokburoKO]

such a good video bro Allah bless you💓💓💓

[@CodeAProgram]

😊😊😊

[@harshvardhan5792]

thanks for the tutorial

[@CodeAProgram]

Share and subscribe ❤️

[@GokburoKO]

is next page b mobile responsive bna dyty bro .... good video

[@omareliotorrescastillo4808]

Hello, thank you very much for this video, i have a header in a website and when i implemented this responsive sidebar, this sidebar eats part of my header, it is like this sidebar is h-full, is there any solution for this?

[@CodeAProgram]

Sorry, I can't fully understand what you say , but you can try this👇
Change your header position fixed

[@omareliotorrescastillo4808]

@@CodeAProgram what i wanted to say it is that your sidebar is fully vertical and when i implemented a navbar, this sidebar removes part of my navbar, thank you very much anyways, excellent example

[@raymondmichael4987]

@@omareliotorrescastillo4808 , yes sidebar is positioned fixed which takes takes it out of the normal document flow that's why other content (like navbar) behave as if there's no sidebar, you can change top-0 to top-[h] where h is the navbar height, to get the behaviour you desire, happy coding :)

[@Draxiu]

Where SEO?

[@rambosweat]

could really do without that awful music

[@CodeAProgram]

Thank you for your suggestion, I will work on it.

[@glenihrig6817]

Actually, I loved the music! Each to his own I guess. But seriously, you can just turn the music off if it bothers you.

[@codehub5872]

That's your own perspective, the music is not awful at all...

[@jaxgarry7881]

Realize this is an old comment but wanted to voice in support of the music. For me, it's easier to concentrate when there is music without lyrics, rather than nothing (which would make me question if my audio was working properly) or someone speaking while they are coding. Appreciate this approach as it focuses on what's being written. The toggle build with tailwind vid was really helpful and in part, it was to the music being engaging, yet not distracting. This format is not found common, as it's usually someone narrating what they are coding.
It's so weird to feel the need to dump on someone putting FREE helpful content online. Spread good vibes, the world is awful enough. Not all opinions need sharing, especially when they are just personal preference being used to put someone down. Particularly preferences which are easily adjustable on this platform for the user. Not everyone learns in the same environment. I'm glad the music option is there, just as easily as the mute option is available to use.

[@Cethris]

Unregistered sublime. Based