React에서 TailwindCSS로 애니메이션 사이드바 만들기💫

여러분, 많은 앱에서 햄버거 아이콘을 클릭하면 슬라이드되는 사이드바/서랍이 필요합니다. 이 튜토리얼에서 우리는 그것을 구축하는 방법을 볼 것입니다 🌟.

데모

Video

설정

새로운 반응 앱 만들기-

npx create-react-app animated-sidebar

tailwindCSS 설정

Tailwind 설치-

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

경로 구성-

내부tailwind.config.jd 내용을 다음으로 바꿉니다.

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

CSS에 tailwindCSS 추가
index.css에서 이 코드 블록을 추가합니다.

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

사이드바 만들기

새 구성 요소 만들기

사이드바에 대한 별도의 컴포넌트를 생성할 예정이므로 Sidebar.js 폴더에 파일src을 생성합니다. 이제 기능적 구성 요소를 만듭니다.

const Sidebar = () => {
  return (
    <div>

    </div>
  )
}

export default Sidebar

사이드바 구성 요소 렌더링

또한 구성 요소를 렌더링해야 하므로 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;

이제 빈 캔버스가 표시됩니다.

기본 사이드바 만들기

텍스트가 포함된 간단한 div를 만들겠습니다.

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

이렇게 하면 오른쪽에 간단한 파란색 사이드바가 표시됩니다.

열린 상태와 닫힌 상태 처리

사이드바를 표시해야 하는지 또는 표시하지 않아야 하는지를 결정하는 부울 값을 저장하는 useState를 만듭니다.

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

또한 사이드바를 열고 닫는 버튼/아이콘을 표시해야 하므로 전체를 조각으로 감싸고 닫을 버튼을 추가하고 열려면 햄버거 아이콘을 추가합니다.

<>
  {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>
</>

지금 당장은 아무런 차이가 없지만 기본 사이드바 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"
  }`}

showSidebar 변수가 참이면 translate-x-0를 추가하고 그렇지 않으면 translate-x-full를 추가합니다. 이제 사이드바가 작동합니다 🎉

Video

그러나 매끄럽지 않으므로 애니메이션을 매끄럽게 만드는 방법을 살펴보겠습니다. 파란색 div-에 이 두 클래스를 추가하기만 하면 됩니다.

ease-in-out duration-300

div는 이제 다음과 같아야 합니다.

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

사이드바 애니메이션은 매우 부드럽고 멋지게 보입니다! 🥳

Video

이 튜토리얼이 마음에 드셨기를 바라며 프로젝트의 사이드바에 멋진 애니메이션을 추가하십시오. 평화 ✌️

유용한 링크

GitHub repo

Animate and Change Header Background on Scroll

Connect with me