const TopBar = () => { return ( <div className="fixed top-0 left-0 h-12 w-screen flex flex-row bg-primary text-secondary shadow-md justify-center items-center space-x-2"> <div className="topbar-clickables"> <div className="flex items-center justify-center overflow-hidden"> <div className="Teardrop"> <div className="fixed mt-12 top-0 left-0 w-60"> <img draggable="false" src={process.env.PUBLIC_URL + "/teardropdark.svg"} alt="Teardrop"/> </div> </div> <div className="BunnyLogo"> <div className="fixed top-0 left-0 ml-3"> <img draggable="false" src={process.env.PUBLIC_URL + "/bunnie96px.svg"} alt="Bunnie"/> </div> </div> <div className="flex ml-40"> <p className="mr-20 top-1 left-28 fixed HeaderName">Zoey's Bits</p> <div className=""> <button className="mx-3 HeaderButt">News</button> </div> <div className=""> <button className="mx-3 HeaderButt">Projects</button> </div> <div className=""> <button className="mx-3 HeaderButt">About</button> </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;