From 0e9826ed89b8ea87a287b77d5473c593d37f8077 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Thu, 4 Dec 2025 10:01:52 -0500
Subject: [PATCH] feat: add dropdown styles to Proxmox layout for enhanced user
 interaction and visual appeal

---
 .../Proxmox/views/components/layout.blade.php | 86 +++++++++++++++++++
 1 file changed, 86 insertions(+)

diff --git a/extensions/Servers/Proxmox/views/components/layout.blade.php b/extensions/Servers/Proxmox/views/components/layout.blade.php
index 277a4aa78..3e9d63d01 100644
--- a/extensions/Servers/Proxmox/views/components/layout.blade.php
+++ b/extensions/Servers/Proxmox/views/components/layout.blade.php
@@ -402,6 +402,92 @@
                     .proxmox-tab-wrapper {
                         animation: tabSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                     }
+
+                    /* Dropdown Styles */
+                    .dropdown-wrapper {
+                        position: relative;
+                    }
+
+                    .dropdown-trigger {
+                        display: flex;
+                        align-items: center;
+                        gap: 4px;
+                    }
+
+                    .dropdown-icon {
+                        transition: transform 0.2s ease;
+                        width: 14px;
+                        height: 14px;
+                    }
+
+                    .dropdown-wrapper.open .dropdown-icon {
+                        transform: rotate(180deg);
+                    }
+
+                    .dropdown-menu {
+                        position: absolute;
+                        top: calc(100% + 8px);
+                        left: 50%;
+                        transform: translateX(-50%);
+                        min-width: 180px;
+                        background: color-mix(in srgb, var(--color-background-secondary) 95%, transparent);
+                        backdrop-filter: blur(16px);
+                        border: 1px solid color-mix(in srgb, var(--color-neutral) 35%, transparent);
+                        border-radius: 12px;
+                        box-shadow: 
+                            0 4px 16px rgba(0, 0, 0, 0.12),
+                            0 0 0 1px rgba(0, 0, 0, 0.03);
+                        z-index: 50;
+                        overflow: hidden;
+                    }
+
+                    .dark .dropdown-menu {
+                        background: color-mix(in srgb, var(--color-background-secondary) 95%, transparent);
+                        border-color: color-mix(in srgb, var(--color-neutral) 45%, transparent);
+                        box-shadow: 
+                            0 4px 20px rgba(0, 0, 0, 0.4),
+                            0 0 0 1px rgba(255, 255, 255, 0.08);
+                    }
+
+                    .dropdown-item {
+                        display: block;
+                        padding: 10px 16px;
+                        font-size: 0.8125rem;
+                        font-weight: 600;
+                        transition: all 0.2s ease;
+                        border-left: 3px solid transparent;
+                        color: color-mix(in srgb, var(--color-base) 70%, transparent);
+                    }
+
+                    .dropdown-item:hover {
+                        background: linear-gradient(135deg, 
+                            rgba(37, 99, 235, 0.08), 
+                            rgba(59, 130, 246, 0.05));
+                        border-left-color: rgba(37, 99, 235, 0.3);
+                        color: color-mix(in srgb, var(--color-base) 90%, transparent);
+                    }
+
+                    .dropdown-item.active {
+                        background: linear-gradient(135deg, 
+                            rgba(37, 99, 235, 0.15), 
+                            rgba(59, 130, 246, 0.1));
+                        border-left-color: rgb(37, 99, 235);
+                        color: rgb(37, 99, 235);
+                    }
+
+                    .dark .dropdown-item.active {
+                        background: linear-gradient(135deg, 
+                            rgba(59, 130, 246, 0.2), 
+                            rgba(37, 99, 235, 0.15));
+                        border-left-color: rgb(96, 165, 250);
+                        color: rgb(96, 165, 250);
+                    }
+
+                    .dropdown-divider {
+                        height: 1px;
+                        background: color-mix(in srgb, var(--color-neutral) 30%, transparent);
+                        margin: 4px 0;
+                    }
                 </style>
                 
                 <div class="hidden lg:block">