From b52c25255362752443d56148cea0da135eb5080f Mon Sep 17 00:00:00 2001
From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com>
Date: Mon, 29 Sep 2025 21:56:07 +0200
Subject: [PATCH] fix sidebar loading issues and navbar on mobile (#7991)

* 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.
---
 frontend/src/components/navbar.tsx            | 44 ++++++++++---------
 .../components/navigation/mobile-sidebar.tsx  | 37 +++++++++++-----
 frontend/src/lib/data.ts                      |  4 +-
 3 files changed, 52 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/navbar.tsx b/frontend/src/components/navbar.tsx
index b709b6564..a80880006 100644
--- a/frontend/src/components/navbar.tsx
+++ b/frontend/src/components/navbar.tsx
@@ -42,32 +42,34 @@ function Navbar() {
             <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 gap-2">
+          <div className="flex items-center justify-between gap-2 w-full">
             <div className="flex sm:hidden">
               <Suspense>
                 <MobileSidebar />
               </Suspense>
             </div>
-            <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 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>
diff --git a/frontend/src/components/navigation/mobile-sidebar.tsx b/frontend/src/components/navigation/mobile-sidebar.tsx
index 653b82ee8..086ecaf69 100644
--- a/frontend/src/components/navigation/mobile-sidebar.tsx
+++ b/frontend/src/components/navigation/mobile-sidebar.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
 import { useQueryState } from "nuqs";
 import { Menu } from "lucide-react";
 
@@ -18,9 +19,20 @@ function MobileSidebar() {
   const [isLoading, setIsLoading] = useState(false);
   const [categories, setCategories] = useState<Category[]>([]);
   const [lastViewedScript, setLastViewedScript] = useState<Script | undefined>(undefined);
+  const pathname = usePathname();
+
+  // Always call the hooks (React hooks can't be conditional)
   const [selectedScript, setSelectedScript] = useQueryState("id");
   const [selectedCategory, setSelectedCategory] = useQueryState("category");
 
+  // For non-scripts pages, we'll manage state locally
+  const [tempSelectedScript, setTempSelectedScript] = useState<string | null>(null);
+  const [tempSelectedCategory, setTempSelectedCategory] = useState<string | null>(null);
+
+  const isOnScriptsPage = pathname === "/scripts";
+  const currentSelectedScript = isOnScriptsPage ? selectedScript : tempSelectedScript;
+  const currentSelectedCategory = isOnScriptsPage ? selectedCategory : tempSelectedCategory;
+
   const loadCategories = useCallback(async () => {
     setIsLoading(true);
     try {
@@ -40,16 +52,16 @@ function MobileSidebar() {
   }, [loadCategories]);
 
   useEffect(() => {
-    if (!selectedScript || categories.length === 0) {
+    if (!currentSelectedScript || categories.length === 0) {
       return;
     }
 
     const scriptMatch = categories
       .flatMap(category => category.scripts)
-      .find(script => script.slug === selectedScript);
+      .find(script => script.slug === currentSelectedScript);
 
     setLastViewedScript(scriptMatch);
-  }, [selectedScript, categories]);
+  }, [currentSelectedScript, categories]);
 
   const handleOpenChange = (openState: boolean) => {
     setIsOpen(openState);
@@ -78,7 +90,9 @@ function MobileSidebar() {
           <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>
+      <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
@@ -91,19 +105,22 @@ function MobileSidebar() {
                 <div className="flex flex-col gap-4 px-4">
                   <Sidebar
                     items={categories}
-                    selectedScript={selectedScript}
-                    setSelectedScript={setSelectedScript}
-                    selectedCategory={selectedCategory}
-                    setSelectedCategory={setSelectedCategory}
+                    selectedScript={currentSelectedScript}
+                    setSelectedScript={isOnScriptsPage ? setSelectedScript : setTempSelectedScript}
+                    selectedCategory={currentSelectedCategory}
+                    setSelectedCategory={isOnScriptsPage ? setSelectedCategory : setTempSelectedCategory}
                     onItemSelect={handleItemSelect}
                   />
                 </div>
               )}
-          {selectedScript && lastViewedScript
+          {currentSelectedScript && lastViewedScript
             ? (
                 <div className="flex flex-col gap-3 px-4">
                   <p className="text-sm font-medium">Last Viewed</p>
-                  <ScriptItem item={lastViewedScript} setSelectedScript={setSelectedScript} />
+                  <ScriptItem
+                    item={lastViewedScript}
+                    setSelectedScript={isOnScriptsPage ? setSelectedScript : setTempSelectedScript}
+                  />
                 </div>
               )
             : null}
diff --git a/frontend/src/lib/data.ts b/frontend/src/lib/data.ts
index cb0f6acef..9119f5dfc 100644
--- a/frontend/src/lib/data.ts
+++ b/frontend/src/lib/data.ts
@@ -1,7 +1,7 @@
 import type { Category } from "./types";
 
 export async function fetchCategories() {
-  const response = await fetch("api/categories");
+  const response = await fetch(`/ProxmoxVE/api/categories`);
   if (!response.ok) {
     throw new Error(`Failed to fetch categories: ${response.statusText}`);
   }
@@ -10,7 +10,7 @@ export async function fetchCategories() {
 }
 
 export async function fetchVersions() {
-  const response = await fetch(`api/versions`);
+  const response = await fetch(`/ProxmoxVE/api/versions`);
   if (!response.ok) {
     throw new Error(`Failed to fetch versions: ${response.statusText}`);
   }