b52c252553
* Refactor MobileSidebar to manage script and category selection based on current pathname. Introduced temporary state for non-scripts pages and updated logic for last viewed script handling. Improved accessibility by ensuring proper aria attributes and class management. * Update API endpoint paths in data.ts to include ProxmoxVE prefix for category and version fetching functions. * Refactor Navbar component layout for improved structure and responsiveness. Adjusted flex properties to ensure proper alignment of elements, enhancing the mobile and desktop user experience. Updated accessibility features and ensured consistent use of TailwindCSS classes.
81 lines
2.9 KiB
TypeScript
81 lines
2.9 KiB
TypeScript
"use client";
|
|
import { Suspense, 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 MobileSidebar from "./navigation/mobile-sidebar";
|
|
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="cursor-pointer w-full justify-center sm:justify-start flex-row-reverse hidden sm:flex items-center gap-2 font-semibold sm:flex-row"
|
|
>
|
|
<Image height={18} unoptimized width={18} alt="logo" src="/ProxmoxVE/logo.png" className="" />
|
|
<span className="">Proxmox VE Helper-Scripts</span>
|
|
</Link>
|
|
<div className="flex items-center justify-between gap-2 w-full">
|
|
<div className="flex sm:hidden">
|
|
<Suspense>
|
|
<MobileSidebar />
|
|
</Suspense>
|
|
</div>
|
|
<div className="flex sm:gap-2">
|
|
<CommandMenu />
|
|
<GitHubStarsButton username="community-scripts" repo="ProxmoxVE" className="hidden md:flex" />
|
|
{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>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Navbar;
|