ProxmoxVE/frontend/src/components/navbar.tsx

"use client";
import { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";

import { navbarLinks } from "@/config/site-config";

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
import { GitHubStarsButton } from "./animate-ui/components/buttons/github-stars";
import { Button } from "./animate-ui/components/buttons/button";
import { ThemeToggle } from "./ui/theme-toggle";
import CommandMenu from "./command-menu";

export const dynamic = "force-dynamic";

function Navbar() {
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 0);
    };

    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);
  return (
    <>
      <div
        className={`fixed left-0 top-0 z-50 flex w-screen justify-center px-4 xl:px-0 ${
          isScrolled ? "glass border-b bg-background/50" : ""
        }`}
      >
        <div className="flex h-20 w-full max-w-[1440px] items-center justify-between sm:flex-row">
          <Link
            href="/"
            className="flex cursor-pointer w-full justify-center sm:justify-start flex-row-reverse items-center gap-2 font-semibold sm:flex-row"
          >
            <Image height={18} unoptimized width={18} alt="logo" src="/ProxmoxVE/logo.png" className="" />
            <span className="hidden md:block">Proxmox VE Helper-Scripts</span>
          </Link>
          <div className="flex gap-2">
            <CommandMenu />
            <GitHubStarsButton username="community-scripts" repo="ProxmoxVE" />
            {navbarLinks.map(({ href, event, icon, text, mobileHidden }) => (
              <TooltipProvider key={event}>
                <Tooltip delayDuration={100}>
                  <TooltipTrigger className={mobileHidden ? "hidden lg:block" : ""}>
                    <Button variant="ghost" size="icon" asChild>
                      <Link target="_blank" href={href} data-umami-event={event}>
                        {icon}
                        <span className="sr-only">{text}</span>
                      </Link>
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent side="bottom" className="text-xs">
                    {text}
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>
            ))}
            <ThemeToggle />
          </div>
        </div>
      </div>
    </>
  );
}

export default Navbar;