[React]사이드바 구현 (기본)

//sidebar.js

import React, { useState } from 'react';
import styles from '../assets/styles/sidebar.module.css';

const Sidebar = () => {
    const [isOpen, setIsOpen] = useState(false);

    const handleToggle = () => {
        setIsOpen(!isOpen);
    };

    return (
        <div className={`${styles.sidebar} ${isOpen ? styles.open : ''}`}>
            <button
                className={styles.toggleButton}
                onClick={handleToggle}
            >
                {isOpen ? 'X' : 'Menu'}
            </button>
            {/* Sidebar content */}
        </div>
    );
};

export default Sidebar;

//css

/* sidebar.module.css */
.sidebar {
    width: 0;
    height: 100vh;
    background-color: #333;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidebar.open {
    width: 250px;
}

.toggleButton {
    font-size: 20px;
    cursor: pointer;
    position: absolute;
    top: 20px;
    left: 20px;
    background: none;
    border: none;
    color: white;
}