DEV Community

Cover image for Create an animated sidebar with TailwindCSS in React💫
Avneesh Agarwal for ByteSlash

Posted on • Originally published at blog.avneesh.tech

7 2

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
Enter fullscreen mode Exit fullscreen mode

Setting up tailwindCSS

Installing Tailwind-

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

Configuring paths-

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

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

Add tailwindCSS to CSS

In index.css add this code block-

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

image.png

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);
Enter fullscreen mode Exit fullscreen mode

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>
</>
Enter fullscreen mode Exit fullscreen mode

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"
  }`}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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 ✌️

Useful links

GitHub repo

Animate and Change Header Background on Scroll

Connect with me

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (1)

Collapse
 
posandu profile image
Posandu

Oh so cool

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more