landing/src/components/header/Sidebar.jsx

import React from 'react';
import logo from "../../assets/logo.png";

const Sidebar = ({isOpen, onClose}) => {
    return (
        <article
            id="sidebar"
            className={`fixed top-0 right-0 w-[360px] h-full px-0 pb-6 bg-white overflow-y-scroll shadow-[rgba(0,0,0,0.3)_-1px_0_10px_4px] z-[9999] transition-transform duration-500 ease-in-out transform ${isOpen ? 'translate-x-0' : 'translate-x-[120%]'}`}
        >
            <div>
                <div className="relative py-10 px-4 border-b border-gray-300 bg-gray-100 text-center">
                    <a className="inline-block">
                        <img className="max-w-[160px] align-middle" src={logo} alt=""/>
                    </a>
                    <div className="absolute top-1.5 right-2.5 text-2xl" onClick={onClose}>
                        <button className="relative w-[22px] h-[33px]">
                            <span className="absolute top-1/2 left-0 right-0 h-[4px] bg-black rotate-45 origin-center"></span>
                            <span className="absolute top-1/2 left-0 right-0 h-[4px] bg-black -rotate-45 origin-center"></span>
                        </button>
                    </div>
                </div>
                <nav>

                </nav>
            </div>
        </article>
    );
};

export default Sidebar;