Build an Animated Sidebar with React and Tailwind CSS

Let's use React and Tailwind CSS to build an animated sidebar in just a few minutes!
Original Article - blog.avneesh.tech/create-an-a...
Avneesh's Blog - blog.avneesh.tech
STAY IN TOUCH 👋
Check out the Podcast - compress.fm
Newsletter 🗞 - www.jamesqquick.com/newsletter
Live streams on Twitch 🖥️ - / jamesqquick
Follow me on Twitter 🐦 - / jamesqquick
QUESTIONS...?
Join the Discord Server 💬 - / discord
Want to know what hardware and software I use? www.jamesqquick.com/uses
Learn Web Development 📖 - www.jamesqquick.com/courses

[@shashanksshetty9870]

I was literally thinking how to do it and you made a video on it. Thank you very much 😍

[@shubhampawar7921]

This is really cool but I would suggest using headless ui switch provides aria compatible components. We can combine switch and dialog to make a side navbar

[@Daddyjs]

Really cool! I learned a lot thank you for this vid

[@re-member]

Could you start the video by showing what the results of watching you content would be and then go ahead into the how-to? This will improve the UX so much and wouldn't cost you much effort.

[@JamesQQuick]

Great suggestion!

[@pmioduszewski]

Yeah! more with tailwind + react :)

[@prakharseth4660]

Thank you so much this helps me alot ✌️

[@bobdpa]

Awesome stuff. Thanks James. And yes, vite would be a great video as well! 🙋‍♂

[@Mike----]

I’ve been looking for a video on this topic. React + Tailwind + animated side bar Many thanks! I’d love to see a video on React + a data grid + tailwind

[@PeriklesPeriklesoglu]

thank you

[@philipdavis5031]

Your videos are really top notch.

[@bulldog2024]

Great video! How difficult would it be to add a backdrop to the content area when side navbar is open?

[@dazecm]

Great content. Might I suggest using a tab size of 2 in your editor? This is sufficient to clearly see editor indenting without taking up too much code line space. This would also benefit anyone watching your content on smaller devices. Also be mindful of the position of your picture-in-picture of your friendly face so that you're aware of possible situations of editor code falling behind the picture-in-picture box :)
Thanks for creating and sharing such epic content.

[@richardpinczes3046]

JQ always knows exactly what i need, thank u

[@richardpinczes3046]

@Toasted' Nugget_' didnt ask+ ratio bozo

[@MrSkateVans]

Great video, thanks!
Can someone tell me what kind of snippet he is using for react - referring to the useState auto complete. A neat way to not to remember some letter combination to type like "ust", but you get a chance to type the functions correct name and all else is added automatically.
Thanks in advance.

[@hardwired89]

yihii more tailwind + react ❤️

[@EeshaKPopDanceCovers]

Thanks for the video James..can we get this code from your repo please??

[@danielsalgado4031]

Awesome

[@muhammadshiraz8187]

Awesome 👌

[@marimuthur9456]

Your really good in teaching extraordinary thank you so much 👌🏼👌🏼👌🏼👌🏼👌🏼

[@JamesQQuick]

haha thank you!!

[@raj080288]

What is the VS extension you are using that says "gzip"?

[@yyxx9309]

James, what's the theme you are using for VScode? Man I really like it haha, want to use it for mine as well.. Thank you for the video by the way!!

[@obey_giant]

What VS Code theme are you using? I’ve been using Dracula for a minute and love it, but this one is so sick

[@shriram5494]

Apparently this is Midnight Synth by Eric Kelley. James showed it in a previous video.

[@prasanthrv4850]

Make video of some useful extension for React in vs code, a suggestion, saw your state variables auto transforming to camel casing, how to do all that?

[@postoronnii__]

But what if the button in another component, like header? What to use then useContext?

[@kameerhosein5748]

what's the VS Code theme in this video?

[@kikuyusongslyrics7165]

Thanks for this. Can you attach a GitHub repo next time? Makes following tutorials more effective. 🙃

[@Stoney_Eagle]

I can tell you don't do this very often hehe.
If you make the button itself static and interpolate the svg only, it results in less elements to rerender and improves performance 😉
I honestly can't wait to get back to using tailwind, it has added sooo many things since I last used it and is truly powerful now, but I have to finish my product first 🥺😜

[@waifufx]

Nice video sir, please what is the name of the VS theme

[@shriram5494]

this is Midnight Synth by Eric Kelley. James has also made a video about it

[@seemly]

What theme are you using?

[@shriram5494]

He's using Midnight Synth by Eric Kelley.

[@chunkycheese73]

es7 is the snippet extension he is using

[@YouhanaSheriff]

👍🏼

[@nathanielcameron8006]

YO LOOK AT THAT PLAY BUTTON THO

[@MaxProgramming]

It would have been definitely better with Vite 😉

[@angladephil]

Confirmation that Tailwind transforms every code in a total mess !!!

[@alexios2263]

Good video, but the question is why is the sidebar on the right ? LOL

[@iuryferreira330]

Very messy

[@HarshSingh-cp8mq]

vs code theme bro ?

[@shriram5494]

Midnight Synth by Eric Kelley

[@charlesmontojo3960]

“How to overengineer a sidebar”