38 lines
1.8 KiB
JavaScript
38 lines
1.8 KiB
JavaScript
|
const TopBar = () => {
|
||
|
|
return (
|
||
|
|
<div className="fixed top-0 left-0 h-16 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 className="ml-4 flex items-center" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
|
|
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z"></path>
|
||
|
|
</svg>
|
||
|
|
<span className="ml-2">123</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
export default TopBar;
|