Improve mobile ui: added a hamburger navigation to the mobile view. (#7987)

* Update GitHubStarsButton component to be hidden on smaller screens * feat: added a mobile navigation to the front-end. * refactor: replace useQueryState with useSuspenseQueryState in ScriptContent and MobileSidebar components; add use-suspense-query-state hook * Revert "refactor: replace useQueryState with useSuspenseQueryState in ScriptContent and MobileSidebar components; add use-suspense-query-state hook" This reverts commit bfad01fc91. * refactor: wrap MobileSidebar component in Suspense for improved loading handling * Update mobile-sidebar.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
2025-11-04 18:32:51 +00:00 · 2025-09-29 18:16:36 +02:00
parent 760299283a
commit 07f2849722
6 changed files with 165 additions and 28 deletions
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -103,18 +103,22 @@ export default function RootLayout({
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
          <div className="flex w-full flex-col justify-center">
-            <Navbar />
-            <div className="flex min-h-screen flex-col justify-center">
-              <div className="flex w-full justify-center">
-                <div className="w-full max-w-[1440px] ">
-                  <QueryProvider>
-                    <NuqsAdapter>{children}</NuqsAdapter>
-                  </QueryProvider>
-                  <Toaster richColors />
+            <NuqsAdapter>
+              <QueryProvider>
+
+                <Navbar />
+                <div className="flex min-h-screen flex-col justify-center">
+                  <div className="flex w-full justify-center">
+                    <div className="w-full max-w-[1440px] ">
+                      {children}
+                      <Toaster richColors />
+                    </div>
+                  </div>
+                  <Footer />
                </div>
-              </div>
-              <Footer />
-            </div>
+              </QueryProvider>
+
+            </NuqsAdapter>
          </div>
        </ThemeProvider>
      </body>
--- a/frontend/src/app/scripts/_components/script-accordion.tsx
+++ b/frontend/src/app/scripts/_components/script-accordion.tsx
@@ -27,12 +27,14 @@ export default function ScriptAccordion({
  setSelectedScript,
  selectedCategory,
  setSelectedCategory,
+  onItemSelect,
 }: {
  items: Category[];
  selectedScript: string | null;
  setSelectedScript: (script: string | null) => void;
  selectedCategory: string | null;
  setSelectedCategory: (category: string | null) => void;
+  onItemSelect?: () => void;
 }) {
  const [expandedItem, setExpandedItem] = useState<string | undefined>(undefined);
  const linkRefs = useRef<{ [key: string]: HTMLAnchorElement | null }>({});
@@ -77,7 +79,7 @@ export default function ScriptAccordion({
      value={expandedItem}
      onValueChange={handleAccordionChange}
      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 => (
        <AccordionItem
@@ -125,6 +127,7 @@ export default function ScriptAccordion({
                    onClick={() => {
                      handleSelected(script.slug);
                      setSelectedCategory(category.name);
+                      onItemSelect?.();
                    }}
                    ref={(el) => {
                      linkRefs.current[script.slug] = el;
--- a/frontend/src/app/scripts/_components/sidebar.tsx
+++ b/frontend/src/app/scripts/_components/sidebar.tsx
@@ -2,21 +2,29 @@

 import type { Category, Script } from "@/lib/types";

+import { cn } from "@/lib/utils";
+
 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({
  items,
  selectedScript,
  setSelectedScript,
  selectedCategory,
  setSelectedCategory,
-}: {
-  items: Category[];
-  selectedScript: string | null;
-  setSelectedScript: (script: string | null) => void;
-  selectedCategory: string | null;
-  setSelectedCategory: (category: string | null) => void;
-}) {
+  onItemSelect,
+  className,
+}: SidebarProps) {
  const uniqueScripts = items.reduce((acc, category) => {
    for (const script of category.scripts) {
      if (!acc.some(s => s.name === script.name)) {
@@ -27,7 +35,7 @@ function Sidebar({
  }, [] as Script[]);

  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">
        <h1 className="text-xl font-bold">Categories</h1>
        <p className="text-xs italic text-muted-foreground">
@@ -43,6 +51,7 @@ function Sidebar({
          setSelectedScript={setSelectedScript}
          selectedCategory={selectedCategory}
          setSelectedCategory={setSelectedCategory}
+          onItemSelect={onItemSelect}
        />
      </div>
    </div>
--- a/frontend/src/components/navbar.tsx
+++ b/frontend/src/components/navbar.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";

@@ -8,6 +8,7 @@ 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";

@@ -30,21 +31,25 @@ function Navbar() {
  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" : ""
+        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"
+            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="hidden md:block">Proxmox VE Helper-Scripts</span>
+            <span className="">Proxmox VE Helper-Scripts</span>
          </Link>
-          <div className="flex gap-2">
+          <div className="flex items-center gap-2">
+            <div className="flex sm:hidden">
+              <Suspense>
+                <MobileSidebar />
+              </Suspense>
+            </div>
            <CommandMenu />
-            <GitHubStarsButton username="community-scripts" repo="ProxmoxVE" />
+            <GitHubStarsButton username="community-scripts" repo="ProxmoxVE" className="hidden md:flex" />
            {navbarLinks.map(({ href, event, icon, text, mobileHidden }) => (
              <TooltipProvider key={event}>
                <Tooltip delayDuration={100}>
--- a/frontend/src/components/navigation/mobile-sidebar.tsx
+++ b/frontend/src/components/navigation/mobile-sidebar.tsx
@@ -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"><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;
--- a/frontend/src/components/ui/command.tsx
+++ b/frontend/src/components/ui/command.tsx
@@ -6,7 +6,7 @@ import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-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";

 const Command = React.forwardRef<