2024-01-14 11:24:34 +01:00
|
|
|
const TopBar = () => {
|
|
|
|
return (
|
2024-01-14 12:05:03 +01:00
|
|
|
<div className="fixed top-0 left-0 h-14 w-screen flex flex-row bg-primary text-secondary
|
2024-01-15 13:47:31 +01:00
|
|
|
shadow-md justify-center items-center space-x-2">
|
2024-01-14 11:24:34 +01:00
|
|
|
<div className="topbar-clickables">
|
2024-01-15 13:47:31 +01:00
|
|
|
<div className="center left-0 flex justify-center items-center overflow-visible">
|
2024-01-15 19:14:38 +01:00
|
|
|
|
|
|
|
<div className="Teardrop">
|
|
|
|
<div className="fixed mt-14 top-0 left-0 w-60">
|
|
|
|
<img draggable="false" src={process.env.PUBLIC_URL + "/teardropdark.svg"} alt="Teardrop"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
2024-01-15 13:47:31 +01:00
|
|
|
<div className="BunnyLogo">
|
|
|
|
<div className="fixed top-1 left-0 ml-6">
|
|
|
|
<img draggable="false" src={process.env.PUBLIC_URL + "/bunnie96px.svg"} alt="Bunnie"/>
|
|
|
|
</div>
|
2024-01-14 11:24:34 +01:00
|
|
|
</div>
|
2024-01-15 19:14:38 +01:00
|
|
|
|
2024-01-14 11:24:34 +01:00
|
|
|
<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>
|
2024-01-14 12:05:03 +01:00
|
|
|
<div className="fixed right-0 mr-6">
|
2024-01-14 11:24:34 +01:00
|
|
|
<div className="DarkModeButton">
|
2024-01-14 12:05:03 +01:00
|
|
|
<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>
|
2024-01-14 13:00:51 +01:00
|
|
|
<title>Popup Title</title>
|
|
|
|
<desc>
|
|
|
|
<p>Paragraph 1</p>
|
|
|
|
<p>Paragraph 2</p>
|
|
|
|
<p>Paragraph 3</p>
|
|
|
|
</desc>
|
2024-01-14 11:24:34 +01:00
|
|
|
</svg>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default TopBar;
|