asset_backups/ProxmoxVE
1
0
Fork 0
mirror of https://github.com/community-scripts/ProxmoxVE.git synced 2025-11-08 04:12:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: added a mobile navigation to the front-end.

Browse Source
This commit is contained in:
Bram Suurd
2025-09-29 16:38:14 +02:00
parent 99971d6cb3
commit 75d26f2de6
6 changed files with 162 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/app/layout.tsx
View File

@@ -103,18 +103,22 @@ export default function RootLayout({
<body className={inter.className}> <body className={inter.className}>
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange> <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
<div className="flex w-full flex-col justify-center"> <div className="flex w-full flex-col justify-center">
<Navbar /> <NuqsAdapter>
<div className="flex min-h-screen flex-col justify-center"> <QueryProvider>
<div className="flex w-full justify-center">
<div className="w-full max-w-[1440px] "> <Navbar />
<QueryProvider> <div className="flex min-h-screen flex-col justify-center">
<NuqsAdapter>{children}</NuqsAdapter> <div className="flex w-full justify-center">
</QueryProvider> <div className="w-full max-w-[1440px] ">
<Toaster richColors /> {children}
<Toaster richColors />
</div>
</div>
<Footer />
</div> </div>
</div> </QueryProvider>
<Footer />
</div> </NuqsAdapter>
</div> </div>
</ThemeProvider> </ThemeProvider>
</body> </body>

5
frontend/src/app/scripts/_components/script-accordion.tsx
View File

@@ -27,12 +27,14 @@ export default function ScriptAccordion({
setSelectedScript, setSelectedScript,
selectedCategory, selectedCategory,
setSelectedCategory, setSelectedCategory,
onItemSelect,
}: { }: {
items: Category[]; items: Category[];
selectedScript: string | null; selectedScript: string | null;
setSelectedScript: (script: string | null) => void; setSelectedScript: (script: string | null) => void;
selectedCategory: string | null; selectedCategory: string | null;
setSelectedCategory: (category: string | null) => void; setSelectedCategory: (category: string | null) => void;
onItemSelect?: () => void;
}) { }) {
const [expandedItem, setExpandedItem] = useState<string | undefined>(undefined); const [expandedItem, setExpandedItem] = useState<string | undefined>(undefined);
const linkRefs = useRef<{ [key: string]: HTMLAnchorElement | null }>({}); const linkRefs = useRef<{ [key: string]: HTMLAnchorElement | null }>({});
@@ -77,7 +79,7 @@ export default function ScriptAccordion({
value={expandedItem} value={expandedItem}
onValueChange={handleAccordionChange} onValueChange={handleAccordionChange}
collapsible collapsible
className="overflow-y-scroll max-h-[calc(100vh-225px)] overflow-x-hidden p-2" className="overflow-y-scroll sm:max-h-[calc(100vh-209px)] overflow-x-hidden p-1"
> >
{items.map(category => ( {items.map(category => (
<AccordionItem <AccordionItem
@@ -125,6 +127,7 @@ export default function ScriptAccordion({
onClick={() => { onClick={() => {
handleSelected(script.slug); handleSelected(script.slug);
setSelectedCategory(category.name); setSelectedCategory(category.name);
onItemSelect?.();
}} }}
ref={(el) => { ref={(el) => {
linkRefs.current[script.slug] = el; linkRefs.current[script.slug] = el;

25
frontend/src/app/scripts/_components/sidebar.tsx
View File

@@ -2,21 +2,29 @@
import type { Category, Script } from "@/lib/types"; import type { Category, Script } from "@/lib/types";
import { cn } from "@/lib/utils";
import ScriptAccordion from "./script-accordion"; import ScriptAccordion from "./script-accordion";
type SidebarProps = {
items: Category[];
selectedScript: string | null;
setSelectedScript: (script: string | null) => void;
selectedCategory: string | null;
setSelectedCategory: (category: string | null) => void;
onItemSelect?: () => void;
className?: string;
};
function Sidebar({ function Sidebar({
items, items,
selectedScript, selectedScript,
setSelectedScript, setSelectedScript,
selectedCategory, selectedCategory,
setSelectedCategory, setSelectedCategory,
}: { onItemSelect,
items: Category[]; className,
selectedScript: string | null; }: SidebarProps) {
setSelectedScript: (script: string | null) => void;
selectedCategory: string | null;
setSelectedCategory: (category: string | null) => void;
}) {
const uniqueScripts = items.reduce((acc, category) => { const uniqueScripts = items.reduce((acc, category) => {
for (const script of category.scripts) { for (const script of category.scripts) {
if (!acc.some(s => s.name === script.name)) { if (!acc.some(s => s.name === script.name)) {
@@ -27,7 +35,7 @@ function Sidebar({
}, [] as Script[]); }, [] as Script[]);
return ( return (
<div className="flex min-w-[350px] flex-col sm:max-w-[350px]"> <div className={cn("flex w-full flex-col sm:min-w-[350px] sm:max-w-[350px]", className)}>
<div className="flex items-end justify-between pb-4"> <div className="flex items-end justify-between pb-4">
<h1 className="text-xl font-bold">Categories</h1> <h1 className="text-xl font-bold">Categories</h1>
<p className="text-xs italic text-muted-foreground"> <p className="text-xs italic text-muted-foreground">
@@ -43,6 +51,7 @@ function Sidebar({
setSelectedScript={setSelectedScript} setSelectedScript={setSelectedScript}
selectedCategory={selectedCategory} selectedCategory={selectedCategory}
setSelectedCategory={setSelectedCategory} setSelectedCategory={setSelectedCategory}
onItemSelect={onItemSelect}
/> />
</div> </div>
</div> </div>

15
frontend/src/components/navbar.tsx
View File

@@ -8,6 +8,7 @@ import { navbarLinks } from "@/config/site-config";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
import { GitHubStarsButton } from "./animate-ui/components/buttons/github-stars"; import { GitHubStarsButton } from "./animate-ui/components/buttons/github-stars";
import { Button } from "./animate-ui/components/buttons/button"; import { Button } from "./animate-ui/components/buttons/button";
import MobileSidebar from "./navigation/mobile-sidebar";
import { ThemeToggle } from "./ui/theme-toggle"; import { ThemeToggle } from "./ui/theme-toggle";
import CommandMenu from "./command-menu"; import CommandMenu from "./command-menu";
@@ -30,21 +31,23 @@ function Navbar() {
return ( return (
<> <>
<div <div
className={`fixed left-0 top-0 z-50 flex w-screen justify-center px-4 xl:px-0 ${ 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" : ""
isScrolled ? "glass border-b bg-background/50" : ""
}`} }`}
> >
<div className="flex h-20 w-full max-w-[1440px] items-center justify-between sm:flex-row"> <div className="flex h-20 w-full max-w-[1440px] items-center justify-between sm:flex-row">
<Link <Link
href="/" href="/"
className="flex cursor-pointer w-full justify-center sm:justify-start flex-row-reverse items-center gap-2 font-semibold sm:flex-row" 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="" /> <Image height={18} unoptimized width={18} alt="logo" src="/ProxmoxVE/logo.png" className="" />
<span className="hidden md:block">Proxmox VE Helper-Scripts</span> <span className="">Proxmox VE Helper-Scripts</span>
</Link> </Link>
<div className="flex gap-2"> <div className="flex items-center gap-2">
<div className="flex sm:hidden">
<MobileSidebar />
</div>
<CommandMenu /> <CommandMenu />
<GitHubStarsButton username="community-scripts" repo="ProxmoxVE" className="hidden md:block" /> <GitHubStarsButton username="community-scripts" repo="ProxmoxVE" className="hidden md:flex" />
{navbarLinks.map(({ href, event, icon, text, mobileHidden }) => ( {navbarLinks.map(({ href, event, icon, text, mobileHidden }) => (
<TooltipProvider key={event}> <TooltipProvider key={event}>
<Tooltip delayDuration={100}> <Tooltip delayDuration={100}>

116
frontend/src/components/navigation/mobile-sidebar.tsx Normal file
View File

@@ -0,0 +1,116 @@
"use client";
import { useCallback, useEffect, useState } from "react";
import { useQueryState } from "nuqs";
import { Menu } from "lucide-react";
import type { Category, Script } from "@/lib/types";
import { ScriptItem } from "@/app/scripts/_components/script-item";
import Sidebar from "@/app/scripts/_components/sidebar";
import { fetchCategories } from "@/lib/data";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "../ui/sheet";
import { Button } from "../ui/button";
function MobileSidebar() {
const [isOpen, setIsOpen] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [categories, setCategories] = useState<Category[]>([]);
const [lastViewedScript, setLastViewedScript] = useState<Script | undefined>(undefined);
const [selectedScript, setSelectedScript] = useQueryState("id");
const [selectedCategory, setSelectedCategory] = useQueryState("category");
const loadCategories = useCallback(async () => {
setIsLoading(true);
try {
const response = await fetchCategories();
setCategories(response);
}
catch (error) {
console.error(error);
}
finally {
setIsLoading(false);
}
}, []);
useEffect(() => {
void loadCategories();
}, [loadCategories]);
useEffect(() => {
if (!selectedScript || categories.length === 0) {
return;
}
const scriptMatch = categories
.flatMap(category => category.scripts)
.find(script => script.slug === selectedScript);
setLastViewedScript(scriptMatch);
}, [selectedScript, categories]);
const handleOpenChange = (openState: boolean) => {
setIsOpen(openState);
};
const handleItemSelect = () => {
setIsOpen(false);
};
const hasLinks = categories.length > 0;
return (
<Sheet open={isOpen} onOpenChange={handleOpenChange}>
<SheetTrigger asChild>
<Button
variant="ghost"
size="icon"
aria-label="Open navigation menu"
tabIndex={0}
onKeyDown={(event) => {
if (event.key === "Enter" || event.key === " ") {
setIsOpen(true);
}
}}
>
<Menu className="size-5" aria-hidden="true" />
</Button>
</SheetTrigger>
<SheetHeader className="border-b border-border px-6 pb-4 pt-2 sr-only"><SheetTitle className="sr-only">Categories</SheetTitle></SheetHeader>
<SheetContent side="left" className="flex w-full max-w-xs flex-col gap-4 overflow-hidden px-0 pb-6">
<div className="flex h-full flex-col gap-4 overflow-y-auto">
{isLoading && !hasLinks
? (
<div className="flex w-full flex-col items-center justify-center gap-2 px-6 py-4 text-sm text-muted-foreground">
Loading categories...
</div>
)
: (
<div className="flex flex-col gap-4 px-4">
<Sidebar
items={categories}
selectedScript={selectedScript}
setSelectedScript={setSelectedScript}
selectedCategory={selectedCategory}
setSelectedCategory={setSelectedCategory}
onItemSelect={handleItemSelect}
/>
</div>
)}
{selectedScript && lastViewedScript
? (
<div className="flex flex-col gap-3 px-4">
<p className="text-sm font-medium">Last Viewed</p>
<ScriptItem item={lastViewedScript} setSelectedScript={setSelectedScript} />
</div>
)
: null}
</div>
</SheetContent>
</Sheet>
);
}
export default MobileSidebar;

2
frontend/src/components/ui/command.tsx
View File

@@ -6,7 +6,7 @@ import { Command as CommandPrimitive } from "cmdk";
import { Search } from "lucide-react"; import { Search } from "lucide-react";
import * as React from "react"; import * as React from "react";
import { Dialog, DialogContent } from "@/components/ui/dialog"; import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
const Command = React.forwardRef< const Command = React.forwardRef<