feat: implement search functionality in Proxmox help view to enhance user navigation and accessibility
This commit is contained in:
@@ -6,20 +6,36 @@
|
||||
'configuration': false,
|
||||
'advanced': false,
|
||||
'reference': false
|
||||
},
|
||||
searchQuery: '',
|
||||
matchesQuery(label) {
|
||||
if (!this.searchQuery) return true;
|
||||
return label.toLowerCase().includes(this.searchQuery.toLowerCase());
|
||||
}
|
||||
}">
|
||||
<!-- Sidebar Navigation -->
|
||||
<div class="lg:grid lg:grid-cols-4 gap-6">
|
||||
<div class="lg:col-span-1">
|
||||
<div class="bg-background-secondary border border-neutral rounded-lg p-4 sticky top-4 max-h-[calc(100vh-2rem)] overflow-y-auto">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<x-ri-question-line class="size-5 text-primary" />
|
||||
<h3 class="text-lg font-semibold">Help Topics</h3>
|
||||
<div class="flex flex-col gap-3 mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<x-ri-question-line class="size-5 text-primary" />
|
||||
<h3 class="text-lg font-semibold">Help Topics</h3>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<x-ri-search-line class="size-4 text-base/50 absolute left-3 top-1/2 -translate-y-1/2" />
|
||||
<input
|
||||
type="text"
|
||||
x-model="searchQuery"
|
||||
placeholder="Search help..."
|
||||
class="w-full pl-9 pr-3 py-1.5 text-sm rounded-md border border-neutral/60 bg-background focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="space-y-2">
|
||||
<!-- Getting Started -->
|
||||
<div>
|
||||
<div x-show="matchesQuery('getting started quick start overview')">
|
||||
<button @click="expandedCategories['getting-started'] = !expandedCategories['getting-started']"
|
||||
class="w-full flex items-center justify-between px-3 py-2 rounded-md text-base font-semibold hover:bg-background transition-colors">
|
||||
<div class="flex items-center gap-2">
|
||||
@@ -32,12 +48,14 @@
|
||||
</button>
|
||||
<div x-show="expandedCategories['getting-started']" x-transition class="ml-4 mt-1 space-y-1">
|
||||
<button @click="activeSection = 'overview'"
|
||||
x-show="matchesQuery('overview getting started basics')"
|
||||
:class="activeSection === 'overview' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
|
||||
class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
|
||||
<x-ri-dashboard-line class="size-4" />
|
||||
<span>Overview</span>
|
||||
</button>
|
||||
<button @click="activeSection = 'quick-start'"
|
||||
x-show="matchesQuery('quick start guide first time setup')"
|
||||
:class="activeSection === 'quick-start' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
|
||||
class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
|
||||
<x-ri-rocket-line class="size-4" />
|
||||
@@ -47,7 +65,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Configuration -->
|
||||
<div>
|
||||
<div x-show="matchesQuery('configuration network subdomain cloud-init display statistics')">
|
||||
<button @click="expandedCategories['configuration'] = !expandedCategories['configuration']"
|
||||
class="w-full flex items-center justify-between px-3 py-2 rounded-md text-base font-semibold hover:bg-background transition-colors">
|
||||
<div class="flex items-center gap-2">
|
||||
@@ -60,36 +78,42 @@
|
||||
</button>
|
||||
<div x-show="expandedCategories['configuration']" x-transition class="ml-4 mt-1 space-y-1">
|
||||
<button @click="activeSection = 'boot-settings'"
|
||||
x-show="matchesQuery('boot settings order firmware efi bios')"
|
||||
:class="activeSection === 'boot-settings' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
|
||||
class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
|
||||
<x-ri-restart-line class="size-4" />
|
||||
<span>Boot Settings</span>
|
||||
</button>
|
||||
<button @click="activeSection = 'network'"
|
||||
x-show="matchesQuery('network ip address mtu gateway routes firewall')"
|
||||
:class="activeSection === 'network' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
|
||||
class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
|
||||
<x-ri-wifi-line class="size-4" />
|
||||
<span>Network</span>
|
||||
</button>
|
||||
<button @click="activeSection = 'subdomain'"
|
||||
x-show="matchesQuery('subdomain dns records a aaaa hostnames')"
|
||||
:class="activeSection === 'subdomain' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
|
||||
class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
|
||||
<x-ri-global-line class="size-4" />
|
||||
<span>Subdomain</span>
|
||||
</button>
|
||||
<button @click="activeSection = 'cloud-init'"
|
||||
x-show="matchesQuery('cloud-init user data metadata ssh keys')"
|
||||
:class="activeSection === 'cloud-init' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
|
||||
class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
|
||||
<x-ri-cloud-line class="size-4" />
|
||||
<span>Cloud-init</span>
|
||||
</button>
|
||||
<button @click="activeSection = 'display'"
|
||||
x-show="matchesQuery('display console resolution vnc xterm')"
|
||||
:class="activeSection === 'display' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
|
||||
class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
|
||||
<x-ri-computer-line class="size-4" />
|
||||
<span>Display</span>
|
||||
</button>
|
||||
<button @click="activeSection = 'statistics'"
|
||||
x-show="matchesQuery('statistics graphs telemetry cpu memory disk network analysis')"
|
||||
:class="activeSection === 'statistics' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
|
||||
class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
|
||||
<x-ri-bar-chart-line class="size-4" />
|
||||
@@ -99,7 +123,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Advanced -->
|
||||
<div>
|
||||
<div x-show="matchesQuery('advanced system backups console bgp routing')">
|
||||
<button @click="expandedCategories['advanced'] = !expandedCategories['advanced']"
|
||||
class="w-full flex items-center justify-between px-3 py-2 rounded-md text-base font-semibold hover:bg-background transition-colors">
|
||||
<div class="flex items-center gap-2">
|
||||
@@ -112,24 +136,28 @@
|
||||
</button>
|
||||
<div x-show="expandedCategories['advanced']" x-transition class="ml-4 mt-1 space-y-1">
|
||||
<button @click="activeSection = 'system'"
|
||||
x-show="matchesQuery('system advanced cpu memory disk tpm efi')"
|
||||
:class="activeSection === 'system' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
|
||||
class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
|
||||
<x-ri-cpu-line class="size-4" />
|
||||
<span>System</span>
|
||||
</button>
|
||||
<button @click="activeSection = 'backups'"
|
||||
x-show="matchesQuery('backups snapshots restore schedule retention')"
|
||||
:class="activeSection === 'backups' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
|
||||
class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
|
||||
<x-ri-database-line class="size-4" />
|
||||
<span>Backups</span>
|
||||
</button>
|
||||
<button @click="activeSection = 'console'"
|
||||
x-show="matchesQuery('console access vnc xterm ssh serial')"
|
||||
:class="activeSection === 'console' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
|
||||
class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
|
||||
<x-ri-terminal-box-line class="size-4" />
|
||||
<span>Console Access</span>
|
||||
</button>
|
||||
<button @click="activeSection = 'bgp'"
|
||||
x-show="matchesQuery('bgp routing core router network analysis')"
|
||||
:class="activeSection === 'bgp' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
|
||||
class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
|
||||
<x-ri-router-line class="size-4" />
|
||||
@@ -139,7 +167,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Reference -->
|
||||
<div>
|
||||
<div x-show="matchesQuery('reference glossary rfc standards troubleshooting')">
|
||||
<button @click="expandedCategories['reference'] = !expandedCategories['reference']"
|
||||
class="w-full flex items-center justify-between px-3 py-2 rounded-md text-base font-semibold hover:bg-background transition-colors">
|
||||
<div class="flex items-center gap-2">
|
||||
@@ -152,18 +180,21 @@
|
||||
</button>
|
||||
<div x-show="expandedCategories['reference']" x-transition class="ml-4 mt-1 space-y-1">
|
||||
<button @click="activeSection = 'glossary'"
|
||||
x-show="matchesQuery('glossary terminology definitions acronyms')"
|
||||
:class="activeSection === 'glossary' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
|
||||
class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
|
||||
<x-ri-book-2-line class="size-4" />
|
||||
<span>Glossary</span>
|
||||
</button>
|
||||
<button @click="activeSection = 'rfc-standards'"
|
||||
x-show="matchesQuery('rfc standards protocols ipv4 ipv6 dns ssh http')"
|
||||
:class="activeSection === 'rfc-standards' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
|
||||
class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
|
||||
<x-ri-file-paper-line class="size-4" />
|
||||
<span>RFC Standards</span>
|
||||
</button>
|
||||
<button @click="activeSection = 'troubleshooting'"
|
||||
x-show="matchesQuery('troubleshooting errors issues network connectivity boot problems')"
|
||||
:class="activeSection === 'troubleshooting' ? 'bg-background text-base font-semibold' : 'text-base/70 hover:text-base'"
|
||||
class="w-full text-left px-3 py-2 rounded-md transition-colors flex items-center gap-2">
|
||||
<x-ri-tools-line class="size-4" />
|
||||
|
||||
Reference in New Issue
Block a user