const TopBar = () => {
    return (
        <div className="fixed top-0 left-0 h-14 w-screen flex flex-row bg-primary text-secondary 
        shadow-sm justify-center items-center space-x-2">
        <div className="topbar-clickables">
                <div className="center left-0 flex justify-center items-center">
                    <div className="fixed left-0 ml-6">
                        <img src={process.env.PUBLIC_URL + "/bunnie48px.png"} alt="Bunnie"/>
                    </div>
                    <div className="flex items-center">
                        <div className="TopButton">
                            <p className="text-lg mx-4">Projects</p>
                        </div>
                        <div className="w-px bg-black h-8"></div>
                        <div className="TopButton">
                            <p className="text-lg mx-4">Rants</p>
                        </div>
                        <div className="w-px bg-black h-8"></div>
                        <div className="TopButton">
                            <p className="text-lg mx-4">About</p>
                        </div>
                    </div>
                    <div className="fixed right-0 mr-6">                       
                        <div className="DarkModeButton">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="half-crescent-moon">
                                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default TopBar;