LeftHamberger.js

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" }}
        >
          <span className="navbar-toggler-icon"></span>
        </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={{ color: "#76D079" }}>
                <li>
                  <p style={{ color: "black" }}>CHERRY</p>
                </li>
                <li>
                  <p style={{ color: "black" }}>JAEYEON</p>
                </li>
                <li>
                  <p style={{ color: "black" }}>SEOYEON</p>
                </li>
                <li>
                  <p style={{ color: "black" }}>JIWEON</p>
                </li>
                <li>
                  <p style={{ color: "black" }}>BYOUNGYUN</p>
                </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;