import backward from '../../backward.png'
import ChannelSingle from './ChannelSingle'

const LeftHamberger = () => {
    return (
        <div>
            <div>
                <button
                    className="navbar-toggler"
                    type="button"
                    data-bs-toggle="offcanvas"
                    data-bs-target="#left-hamburger"
                    aria-controls="left-hamburger"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                    style={{ border: '#f4c1f2' }}
                >
                    <img src={backward} width="25" height="25" />
                </button>
            </div>

            <div
                className="offcanvas offcanvas-start"
                style={{ width: '330px' }}
                tabIndex="-1"
                id="left-hamburger"
                aria-labelledby="hamburgerLabel"
            >
                <div className="d-flex justify-content-between offcanvas-header">
                    <p
                        className="col-6 offcanvas-title"
                        id="offcanvasExampleLabel"
                        style={{
                            fontWeight: 'bold',
                            fontSize: '20px',
                            width: '200px'
                        }}
                    >
                        온/오프라인 사용자
                    </p>
                    <button
                        type="button"
                        className="btn-close text-reset"
                        data-bs-dismiss="offcanvas"
                        aria-label="Close"
                    ></button>
                </div>
                <div className="overflow-auto" style={{ height: '610px' }}>
                    <div className="mb-3">
                        <div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
                            <h5 className="col mt-2">온라인 사용자</h5>
                        </div>
                        <ul className="mx-5" style={{marker: "#2e873a"}}>
                            <li className="marker: #2e873a" style={{markerColor: "2px #2e873a"}}>
                                CHERRY
                            </li>
                            <li>
                                JAEYEON
                            </li>
                            <li>
                                SEOYEON
                            </li>
                            <li>
                                JIWEON
                            </li>
                            <li>
                                BYOUNGYUN
                            </li>
                        </ul>
                    </div>

                    <div className="mb-3">
                        <div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
                            <h5 className="col mt-2">오프라인 사용자</h5>
                        </div>
                        <ul className="mx-5">
                            <li>
                                CHERRY
                            </li>
                            <li>
                                JAEYEON
                            </li>
                            <li>
                                SEOYEON
                            </li>
                            <li>
                                JIWEON
                            </li>
                            <li>
                                BYOUNGYUN
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div >
    )
}

export default LeftHamberger