beautify: dropdown fix
This commit is contained in:
DeathKaioken
parent
f2b0ee448d
commit
f8a16ebf5a
@ -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
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user