asset_backups/ProxmoxVE
1
0
Fork 0
mirror of https://github.com/community-scripts/ProxmoxVE.git synced 2025-11-24 14:35:23 +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

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

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