반응형 사이드바 구현하기

구현하게 된 계기

관리자 리뉴얼 프로젝트를 진행하기에 앞서 반응형 CSS를 공부해보고 싶었고 미리 틀 잡아두면 좋을 것 같아서 구현하게 되었다.

---

출처 및 선택한 이유

React - Sidebar/Model

부트스트랩 사이트, 다른 블로그들도 많이 둘러보았는 데 JS 없이 CSS에 translate 속성만을 가지고 반응형을 구현하신 부분이 좋아서 위 블로그를 참고해서 구현하였다.

---

수정 or 추가한 파일

참고한 프로젝트에서 Home과 SideBar를 합쳐서 사용하였고, index.css 대신 SideBar.module.css에 적용함

• /components/layout/sideBar/context.js
• /components/layout/sideBar/data.js
• /components/layout/sideBar/SideBar.js
• /pages/apple/[... apple]. js
• /pages/strawberry/[... strawberry]. js (apple이랑 같음)
• /public/styles/SideBar.module.css

---

설치한 라이브러리 (react-icons)

npm i react-icons

react-icons

---

JSX에 SideBar.module.css 적용하는 방법

// /components/layout/sideBar/SideBar.js 중 일부

<nav className={styles.navbar}>
    <button className={styles["sidebar-toggle"]} onClick={openSidebar}>
      <FaBars />
    </button>
</nav>

기존 형태는 className={styles.navbar}이지만, className에 특수문자가 들어가는 경우에는 className={styles["slidebar-toggle"]}과 같은 형태로 넣어줘야 한다.

 

className={styles.sidebar-toggle}로 입력하면 오류가 발생한다.

---

구현 화면

---

코드 파일

코드.zip

0.00MB