Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: enhance Proxmox layout with dropdown functionality for tabs, improving navigation and user experience on both desktop and mobile views

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-04 10:02:29 -05:00
parent 0e9826ed89
commit 8deefab4f3
1 changed files with 120 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
extensions/Servers/Proxmox/views/components/layout.blade.php
View File

@@ -494,25 +494,89 @@
<div class="proxmox-nav-container">
<div class="flex items-center justify-between gap-4">
<div class="proxmox-nav-tabs">
@foreach($tabs as $tab)
@foreach($tabs as $tabIndex => $tab)
@php
$isAdvancedTab = $tab['advanced'] ?? false;
$isDropdown = $tab['dropdown'] ?? false;
// Check if current view is in dropdown items
$isDropdownActive = false;
$hasVisibleItems = false;
if ($isDropdown && isset($tab['items'])) {
foreach ($tab['items'] as $item) {
if ($view === $item['view']) {
$isDropdownActive = true;
}
$itemAdvanced = $item['advanced'] ?? false;
if (!$itemAdvanced) {
$hasVisibleItems = true;
}
}
}
@endphp
<div class="proxmox-tab-wrapper"
@if($isAdvancedTab)
x-show="isAdvancedView"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
@endif>
<a href="{{ $tab['route'] }}" wire:navigate
class="proxmox-tab-link {{ $view === $tab['view'] ? 'active' : '' }}">
<span>{{ $tab['label'] }}</span>
</a>
</div>
@if($isDropdown)
<div class="proxmox-tab-wrapper dropdown-wrapper"
x-data="{ open: false }"
@click.outside="open = false"
@if(!$hasVisibleItems)
x-show="isAdvancedView"
x-transition
@endif>
<button @click="open = !open"
class="proxmox-tab-link {{ $isDropdownActive ? 'active' : '' }}">
<span class="dropdown-trigger">
{{ $tab['label'] }}
<svg class="dropdown-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
<div x-show="open"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 scale-95 -translate-y-2"
x-transition:enter-end="opacity-100 scale-100 translate-y-0"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
class="dropdown-menu">
@foreach($tab['items'] as $itemIndex => $item)
@php
$itemAdvanced = $item['advanced'] ?? false;
@endphp
<div @if($itemAdvanced)
x-show="isAdvancedView"
@endif>
<a href="{{ $item['route'] }}" wire:navigate
class="dropdown-item {{ $view === $item['view'] ? 'active' : '' }}"
@click="open = false">
{{ $item['label'] }}
</a>
@if($itemIndex < count($tab['items']) - 1 && $itemAdvanced && !($tab['items'][$itemIndex + 1]['advanced'] ?? false))
<div x-show="isAdvancedView" class="dropdown-divider"></div>
@endif
</div>
@endforeach
</div>
</div>
@else
<div class="proxmox-tab-wrapper"
@if($isAdvancedTab)
x-show="isAdvancedView"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
@endif>
<a href="{{ $tab['route'] }}" wire:navigate
class="proxmox-tab-link {{ $view === $tab['view'] ? 'active' : '' }}">
<span>{{ $tab['label'] }}</span>
</a>
</div>
@endif
@endforeach
</div>
@@ -726,20 +790,47 @@
@foreach($tabs as $tab)
@php
$isAdvancedTab = $tab['advanced'] ?? false;
$isDropdown = $tab['dropdown'] ?? false;
@endphp
<div @if($isAdvancedTab)
x-show="isAdvancedView"
x-transition
@endif>
<a href="{{ $tab['route'] }}" wire:navigate
class="mobile-tab-item flex items-center justify-between {{ $view === $tab['view'] ? 'active text-base' : 'text-base/70' }}"
@click="open = false">
<span>{{ $tab['label'] }}</span>
@if($view === $tab['view'])
<x-ri-check-line class="size-4 text-primary" />
@endif
</a>
</div>
@if($isDropdown)
{{-- Render dropdown items as individual menu items for mobile --}}
<div class="px-3 py-2 text-xs font-bold uppercase tracking-wider text-base/50 bg-background/30">
{{ $tab['label'] }}
</div>
@foreach($tab['items'] as $item)
@php
$itemAdvanced = $item['advanced'] ?? false;
@endphp
<div @if($itemAdvanced)
x-show="isAdvancedView"
x-transition
@endif>
<a href="{{ $item['route'] }}" wire:navigate
class="mobile-tab-item flex items-center justify-between pl-8 {{ $view === $item['view'] ? 'active text-base' : 'text-base/70' }}"
@click="open = false">
<span>{{ $item['label'] }}</span>
@if($view === $item['view'])
<x-ri-check-line class="size-4 text-primary" />
@endif
</a>
</div>
@endforeach
@else
<div @if($isAdvancedTab)
x-show="isAdvancedView"
x-transition
@endif>
<a href="{{ $tab['route'] }}" wire:navigate
class="mobile-tab-item flex items-center justify-between {{ $view === $tab['view'] ? 'active text-base' : 'text-base/70' }}"
@click="open = false">
<span>{{ $tab['label'] }}</span>
@if($view === $tab['view'])
<x-ri-check-line class="size-4 text-primary" />
@endif
</a>
</div>
@endif
@endforeach
</div>
</div>