Next.js sidebar 만들기

Youtube 클론코딩을 하면서 사이드 바를 만들어야 했는데, 다들 사이드 바를 만들 상황이 많을 거 같아서 제가 사용한 방법이 참고가 되었으면 합니다.

열린 사이드 봐와 닫힌 사이드 바 컴포넌트 각각 만들기

그림과 같이 열렸을 때의 사이드 봐와 닫혔을 때의 사이드 바를 각각 만들어줍니다.

state로 사이드 바의 상태 관리

그런 뒤 헤더에 사이드 바를 열고 닫는 버튼을 만들어서 사이드 바의 상태를 state로 관리합니다.

import { useState } from "react";
import OpenedSideBar from "./OpenedSideBar";
import SideBar from "./SideBar";

export default function Header(){
    const [isOpened, setIsOpened] = useState(false);
    function open(){
        setIsOpened(prev => !prev) 
        console.log(isOpened);
    }
    return(
        <>
        <div className="header">
            <div className="img">
                <img onClick={open} src="/menu.png"></img>
            </div>
            <div className="other">
                <input type="" placeholder="검색" />
                <input type="button" />
            </div>
        </div>
        {isOpened ? <OpenedSideBar /> : <SideBar />}
        </>

위 코드처럼 사이드 바 state가 열린 상태면 열린 상태의 사이드 바 컴포넌트를, 닫힌 상태면 닫힌 상태의 사이드 바 컴포넌트를 불러오는 방식입니다.

사이드 바를 구현하는 방법은 매우 다양하고 라이브러리를 사용해는 편한 방법도 있겠지만, 저는 저만의 사이드 바를 이런 식으로 만들어 보았습니다. 도움이 될진 모르겠지만 사이드 바를 만들 때 참고가 되었으면 좋겠습니다.