one/frontend/src/components/Navbar.tsx

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";

export function NavigationMenu() {
  return (
    <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-50">
      <Button variant="ghost">
        <Link href="/">
          <div className="hidden md:inline">Home</div>
          <div className="md:hidden">
            <House />
          </div>
        </Link>
      </Button>
      <Button variant="ghost">
        <Link href="/blog">
          <div className="hidden md:inline">Blog</div>
          <div className="md:hidden">
            <NotebookPen />
          </div>
        </Link>
      </Button>
      <Button variant="ghost">
        <Link href="/portfolio">
          <div className="hidden md:inline">Portfolio</div>
          <div className="md:hidden">
            <BriefcaseBusiness />
          </div>
        </Link>
      </Button>
      <Button variant="ghost">
        <Link href="/talk">
          <div className="hidden md:inline">Talk</div>
          <div className="md:hidden">
            <MessageCircleMore />
          </div>
        </Link>
      </Button>
      <Button variant="ghost">
        <Link href="/references">
          <div className="hidden md:inline">References</div>
          <div className="md:hidden">
            <Handshake />
          </div>
        </Link>
      </Button>
      <ModeToggle />
    </div>
  );
}