feat: navbar component implemented with conditional home link for tool pages

style needs to be adjusted!
This commit is contained in:
theoleuthardt 2025-02-07 13:51:47 +01:00
parent 10744e54e2
commit b371742a00
2 changed files with 43 additions and 5 deletions

View file

@ -1,7 +1,9 @@
export default function Home() {
return (
<div className="bg-white w-screen h-screen">
import Navbar from '../components/Navbar';
</div>
export default function Home() {
return (
<div className="bg-black text-white font-noto">
<Navbar renderHomeLink={false} />
</div>
);
}
}

36
src/components/Navbar.tsx Normal file
View file

@ -0,0 +1,36 @@
import React from "react";
import Image from "next/image";
import LOGO from "../assets/logo/icons8-toolbox-64.svg";
interface NavProps {
renderHomeLink: boolean,
}
const navbar = (props:NavProps) => {
return (
<div className="h-18 w-full p-3 border-2 border-white">
<nav className="bg-black text-white font-bold flex flex-row items-center justify-between">
<div className="justify-items-start flex flex-1 flex-row items-center">
<Image
src={LOGO}
alt={""}
width={64}
height={64}
className="invert"
/>
<div className="text-white ml-5">werkzeugkiste.</div>
</div>
<div className="flex flex-auto justify-center">
{props.renderHomeLink ?
<a href="#" className="justify-center">home</a>
: null}
</div>
<div className="flex flex-auto">
<a href="https://github.com/theoleuthardt/werkzeugkiste" className="items-end mr-3">github</a>
</div>
</nav>
</div>
);
};
export default navbar;