From f8a16ebf5a347adaf9b873ff6b485f096613be8d Mon Sep 17 00:00:00 2001
From: DeathKaioken <alex.ibrahim@eitk.com>
Date: Fri, 3 Oct 2025 21:24:29 +0200
Subject: [PATCH] beautify: dropdown fix

---
 src/app/components/nav/Header.tsx | 156 ++++++++++++++++--------------
 1 file changed, 81 insertions(+), 75 deletions(-)

diff --git a/src/app/components/nav/Header.tsx b/src/app/components/nav/Header.tsx
index 0c778a2..e6bfb81 100644
--- a/src/app/components/nav/Header.tsx
+++ b/src/app/components/nav/Header.tsx
@@ -30,26 +30,17 @@ import useAuthStore from '../../store/authStore';
 import { Avatar } from '../avatar';
 import LanguageSwitcher from '../LanguageSwitcher';
 
-const products = [
-  {
-    name: 'Shop',
-    description: 'Browse our exclusive product catalog',
-    href: '/shop',
-    icon: ShoppingBagIcon,
-  },
-  {
-    name: 'Community',
-    description: 'Connect with other members',
-    href: '/community',
-    icon: UsersIcon,
-  },
-  { 
-    name: 'Dashboard', 
-    description: 'Manage your account and activities', 
-    href: '/dashboard', 
-    icon: HomeIcon 
-  },
-]
+// Replace current shopItems definition with detailed version (adds icon & description)
+const shopItems = [
+  { name: 'VIP', href: '/shop/vip', description: 'Exclusive VIP shop', icon: ShoppingBagIcon },
+  { name: 'Public', href: '/shop/public', description: 'Open catalog for everyone', icon: UsersIcon },
+];
+
+const navLinks = [
+  { name: 'Affiliate-Links', href: '/affiliate-links' },
+  { name: 'Memberships', href: '/memberships' },
+  { name: 'About us', href: '/about-us' },
+];
 
 export default function Header() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
@@ -146,30 +137,37 @@ export default function Header() {
         <PopoverGroup className="hidden lg:flex lg:gap-x-12">
           <Popover>
             <PopoverButton className="flex items-center gap-x-1 text-sm/6 font-semibold text-gray-900 dark:text-white">
-              Product
+              Shop
               <ChevronDownIcon aria-hidden="true" className="size-5 flex-none text-gray-500" />
             </PopoverButton>
-
+            {/* Redesigned mega menu panel */}
             <PopoverPanel
               transition
-              className="absolute inset-x-0 top-16 bg-white dark:bg-gray-900 transition data-closed:-translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in"
+              className="absolute left-0 right-0 top-full z-50 rounded-b-2xl shadow-xl shadow-black/40 ring-1 ring-white/10 dark:ring-white/15 overflow-hidden data-closed:-translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in"
+              style={{
+                background: 'linear-gradient(150deg, rgba(26,46,84,0.95) 0%, rgba(18,37,70,0.92) 45%, rgba(30,56,104,0.88) 100%)',
+                backdropFilter: 'blur(26px) saturate(175%)',
+                WebkitBackdropFilter: 'blur(26px) saturate(175%)'
+              }}
             >
-              <div aria-hidden="true" className="absolute inset-0 top-1/2 bg-white dark:bg-gray-900 ring-1 ring-black/5 dark:ring-white/15" />
-              <div className="relative bg-white dark:bg-gray-900">
-                <div className="mx-auto grid max-w-7xl grid-cols-3 gap-x-4 px-6 py-10 lg:px-8 xl:gap-x-8">
-                  {products.map((item) => (
-                    <div key={item.name} className="group relative rounded-lg p-6 text-sm/6 hover:bg-gray-100/70 dark:hover:bg-white/5 transition-colors">
-                      <div className="flex size-11 items-center justify-center rounded-lg bg-gray-200/70 dark:bg-gray-700/50 group-hover:bg-gray-300 dark:group-hover:bg-gray-700">
-                        <item.icon aria-hidden="true" className="size-6 text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" />
+              <div className="relative before:absolute before:inset-0 before:pointer-events-none before:bg-[radial-gradient(circle_at_18%_30%,rgba(56,124,255,0.30),transparent_62%),radial-gradient(circle_at_82%_40%,rgba(139,92,246,0.22),transparent_65%)]">
+                <div className="mx-auto grid max-w-7xl grid-cols-2 md:grid-cols-3 gap-x-4 px-6 py-10 lg:px-8 xl:gap-x-8">
+                  {shopItems.map(item => (
+                    <div
+                      key={item.name}
+                      className="group relative rounded-lg p-6 text-sm/6 hover:bg-white/5 transition-colors"
+                    >
+                      <div className="flex size-11 items-center justify-center rounded-lg bg-white/10 backdrop-blur-md group-hover:bg-white/20 transition-colors">
+                        <item.icon aria-hidden="true" className="size-6 text-gray-300 group-hover:text-white" />
                       </div>
-                      <button 
+                      <button
                         onClick={() => router.push(item.href)}
-                        className="mt-6 block font-semibold text-gray-900 dark:text-white"
+                        className="mt-6 block font-semibold text-white"
                       >
                         {item.name}
                         <span className="absolute inset-0" />
                       </button>
-                      <p className="mt-1 text-gray-600 dark:text-gray-400">{item.description}</p>
+                      <p className="mt-1 text-gray-300">{item.description}</p>
                     </div>
                   ))}
                 </div>
@@ -177,28 +175,16 @@ export default function Header() {
             </PopoverPanel>
           </Popover>
 
-          <button 
-            onClick={() => router.push('/features')} 
-            className="text-sm/6 font-semibold text-gray-900 dark:text-white hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
-          >
-            Features
-          </button>
-          
-          <button 
-            onClick={() => router.push('/marketplace')} 
-            className="text-sm/6 font-semibold text-gray-900 dark:text-white hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
-          >
-            Marketplace
-          </button>
-          
-          <button 
-            onClick={() => router.push('/company')} 
-            className="text-sm/6 font-semibold text-gray-900 dark:text-white hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
-          >
-            Company
-          </button>
-
-          {/* Profile Dropdown - nur wenn eingeloggt */}
+          {navLinks.map(l => (
+            <button
+              key={l.name}
+              onClick={() => router.push(l.href)}
+              className="text-sm/6 font-semibold text-gray-900 dark:text-white hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
+            >
+              {l.name}
+            </button>
+          ))}
+          {/* Profile Dropdown - unchanged */}
           {user && (
             <Popover>
               <PopoverButton className="flex items-center gap-x-1 text-sm/6 font-semibold text-gray-900 dark:text-white">
@@ -310,18 +296,15 @@ export default function Header() {
                   <div className="space-y-2 py-6">
                     <Disclosure as="div" className="-mx-3">
                       <DisclosureButton className="group flex w-full items-center justify-between rounded-lg py-2 pr-3.5 pl-3 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5">
-                        Navigation
+                        Shop
                         <ChevronDownIcon aria-hidden="true" className="size-5 flex-none group-data-open:rotate-180" />
                       </DisclosureButton>
-                      <DisclosurePanel className="mt-2 space-y-2">
-                        {products.map((item) => (
+                      <DisclosurePanel className="mt-2 space-y-1">
+                        {shopItems.map(item => (
                           <DisclosureButton
                             key={item.name}
                             as="button"
-                            onClick={() => {
-                              router.push(item.href);
-                              setMobileMenuOpen(false);
-                            }}
+                            onClick={() => { router.push(item.href); setMobileMenuOpen(false); }}
                             className="block rounded-lg py-2 pr-3 pl-6 text-sm/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
                           >
                             {item.name}
@@ -329,6 +312,15 @@ export default function Header() {
                         ))}
                       </DisclosurePanel>
                     </Disclosure>
+                    {navLinks.map(link => (
+                      <button
+                        key={link.name}
+                        onClick={() => { router.push(link.href); setMobileMenuOpen(false); }}
+                        className="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
+                      >
+                        {link.name}
+                      </button>
+                    ))}
                   </div>
                   <div className="py-6 space-y-2">
                     <div className="flex flex-col border-b border-white/10 pb-4 mb-4 px-3">
@@ -368,19 +360,33 @@ export default function Header() {
                 </>
               ) : (
                 <div className="py-6 space-y-4">
-                  <div className="-mx-3 px-3">
-                    <div className="text-sm font-medium text-gray-400 mb-2">Language</div>
-                    <LanguageSwitcher variant="dark" />
-                  </div>
-                  <button
-                    onClick={() => {
-                      router.push('/login');
-                      setMobileMenuOpen(false);
-                    }}
-                    className="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
-                  >
-                    Log in
-                  </button>
+                  <Disclosure as="div" className="-mx-3">
+                    <DisclosureButton className="group flex w-full items-center justify-between rounded-lg py-2 pr-3.5 pl-3 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5">
+                      Shop
+                      <ChevronDownIcon aria-hidden="true" className="size-5 flex-none group-data-open:rotate-180" />
+                    </DisclosureButton>
+                    <DisclosurePanel className="mt-2 space-y-1">
+                      {shopItems.map(item => (
+                        <DisclosureButton
+                          key={item.name}
+                          as="button"
+                          onClick={() => { router.push(item.href); setMobileMenuOpen(false); }}
+                          className="block rounded-lg py-2 pr-3 pl-6 text-sm/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
+                        >
+                          {item.name}
+                        </DisclosureButton>
+                      ))}
+                    </DisclosurePanel>
+                  </Disclosure>
+                  {navLinks.map(link => (
+                    <button
+                      key={link.name}
+                      onClick={() => { router.push(link.href); setMobileMenuOpen(false); }}
+                      className="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5 w-full text-left"
+                    >
+                      {link.name}
+                    </button>
+                  ))}
                 </div>
               )}
             </div>