Posted on Dec 21, 2021 • Originally published at blog.avneesh.tech

Create an animated sidebar with TailwindCSS in React💫

Hey everyone, in many apps you need a sidebar/drawer which slides in if you click on a hamburger icon. In this tutorial, we are going to see how to build that 🌟.

Demo

Video

Setup

Creating a new react app-

npx create-react-app animated-sidebar

Setting up tailwindCSS

Installing Tailwind-

npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

Configuring paths-

Inside tailwind.config.jd replace the content with this-

module.exports = { content: ["./src/**/*.{js,jsx,ts,tsx}"], theme: { extend: {}, }, plugins: [], };

Add tailwindCSS to CSS

In index.css add this code block-

@tailwind base; @tailwind components; @tailwind utilities;

Creating the sidebar

Making a new component

I am going to create a separate component for Sidebar, so create a file Sidebar.js in the src folder. Now create a functional component-

const Sidebar = () => { return ( <div> </div> ) } export default Sidebar

Rendering the Sidebar component

We also need to render the component so add this in App.js-

import Sidebar from "./Sidebar"; function App() { return ( <div className="flex flex-col items-center justify-center min-h-screen py-2"> <Sidebar /> </div> ); } export default App;

This should show us an empty canvas now.

Making a basic sidebar

I am going to make a simple div with a text in it-

<div className="top-0 right-0 w-[35vw] bg-blue-600 p-10 pl-20 text-white fixed h-full "> <h2 className="mt-20 text-4xl font-semibold text-white">I am a sidebar</h2> </div>

This will give us a simple, blue sidebar on the right side-

Handling open and closed states

Create a useState to store a boolean value that decides if we should or shouldn't show the sidebar-

const [showSidebar, setShowSidebar] = useState(false);

We also need to show buttons/icons to open and close the sidebar so I will wrap the whole thing in a fragment, add a button to close, and a hamburger icon to open -

<> {showSidebar ? ( <button className="flex text-4xl text-white items-center cursor-pointer fixed right-10 top-6 z-50" onClick={() => setShowSidebar(!showSidebar)} > x </button> ) : ( <svg onClick={() => setShowSidebar(!showSidebar)} className="fixed z-30 flex items-center cursor-pointer right-10 top-6" fill="#2563EB" viewBox="0 0 100 80" width="40" height="40" > <rect width="100" height="10"></rect> <rect y="30" width="100" height="10"></rect> <rect y="60" width="100" height="10"></rect> </svg> )} <div className="top-0 right-0 w-[35vw] bg-blue-600 p-10 pl-20 text-white fixed h-full z-40"> <h3 className="mt-20 text-4xl font-semibold text-white">I am a sidebar</h3> </div> </>

This will not make any difference right now but let's add some conditional classes to the main sidebar div.

<div className={`top-0 right-0 w-[35vw] bg-blue-600 p-10 pl-20 text-white fixed h-full z-40 ${ showSidebar ? "translate-x-0 " : "translate-x-full" }`}

If the showSidebar variable is true then it will add the translate-x-0 otherwise translate-x-full. Our sidebar now works 🎉

Video

But it isn't smooth so let us see how to make the animation smooth. Just add these two classes to the blue div-

ease-in-out duration-300

The div should look like this now-

<div className={`top-0 right-0 w-[35vw] bg-blue-600 p-10 pl-20 text-white fixed h-full z-40 ease-in-out duration-300 ${ showSidebar ? "translate-x-0 " : "translate-x-full" }`} > <h3 className="mt-20 text-4xl font-semibold text-white">I am a sidebar</h3> </div>

Our sidebar animation looks very smooth and great! 🥳

Video

Hope you liked this tutorial and add nice animation to the sidebar in your project. Peace ✌️