asset_backups/ProxmoxVE
1
0
Fork 0
mirror of https://github.com/community-scripts/ProxmoxVE.git synced 2025-11-23 14:05:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Bram Suurd
2025-09-29 18:16:36 +02:00
committed by GitHub
parent 760299283a
commit 07f2849722
6 changed files with 165 additions and 28 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}>
<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>

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

@@ -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;

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

@@ -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>