78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import Link from "next/link";
|
|
import { ModeToggle } from "@/components/ModeToggle";
|
|
import {
|
|
House,
|
|
NotebookPen,
|
|
BriefcaseBusiness,
|
|
MessageCircleMore,
|
|
Handshake,
|
|
} from "lucide-react";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
export function NavigationMenu() {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<div className="flex justify-center">
|
|
<div className="flex justify-center fixed left-1/2 -translate-x-1/2 -translate-y-1/2 bottom-5 md:top-10 md:bottom-auto z-20 backdrop-blur-sm bg-white/20 outline-none rounded-lg border-1">
|
|
<Link href="/">
|
|
<Button
|
|
variant="ghost"
|
|
className={`${pathname === "/" ? "text-red-500" : ""} text-xl`}
|
|
>
|
|
<div className="hidden md:inline">Home</div>
|
|
<div className="md:hidden">
|
|
<House style={{ width: "27px", height: "27px" }} />
|
|
</div>
|
|
</Button>
|
|
</Link>
|
|
<Link href="/blog">
|
|
<Button
|
|
variant="ghost"
|
|
className={`${pathname === "/blog" ? "text-red-500" : ""} text-xl`}
|
|
>
|
|
<div className="hidden md:inline">Blog</div>
|
|
<div className="md:hidden">
|
|
<NotebookPen style={{ width: "27px", height: "27px" }} />
|
|
</div>
|
|
</Button>
|
|
</Link>
|
|
<Link href="/portfolio">
|
|
<Button
|
|
variant="ghost"
|
|
className={`${pathname === "/portfolio" ? "text-red-500" : ""} text-xl`}
|
|
>
|
|
<div className="hidden md:inline">Portfolio</div>
|
|
<div className="md:hidden">
|
|
<BriefcaseBusiness style={{ width: "27px", height: "27px" }} />
|
|
</div>
|
|
</Button>
|
|
</Link>
|
|
{/*
|
|
<Link href="/talk">
|
|
<Button variant="ghost">
|
|
<div className="hidden md:inline">Talk</div>
|
|
<div className="md:hidden">
|
|
<MessageCircleMore />
|
|
</div>
|
|
</Button>
|
|
</Link>
|
|
<Link href="/references">
|
|
<Button variant="ghost">
|
|
<div className="hidden md:inline">References</div>
|
|
<div className="md:hidden">
|
|
<Handshake />
|
|
</div>
|
|
</Button>
|
|
</Link>
|
|
*/}
|
|
</div>
|
|
<div className="fixed md:right-2 right-2 -translate-x-1/2 -translate-y-1/2 bottom-5 md:top-10 md:bottom-auto z-20 backdrop-blur-sm bg-white/20 outline-none rounded-lg border-1">
|
|
<ModeToggle />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|