Seazn/profit-planet-frontend
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

beautify: dropdown fix

Browse Source
This commit is contained in:
DeathKaioken 2025-10-03 21:24:29 +02:00
parent f2b0ee448d
commit f8a16ebf5a
1 changed files with 81 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
src/app/components/nav/Header.tsx
View File

@ -30,26 +30,17 @@ import useAuthStore from '../../store/authStore';
import { Avatar } from '../avatar'; import { Avatar } from '../avatar';
import LanguageSwitcher from '../LanguageSwitcher'; import LanguageSwitcher from '../LanguageSwitcher';
const products = [ // Replace current shopItems definition with detailed version (adds icon & description)
{ const shopItems = [
name: 'Shop', { name: 'VIP', href: '/shop/vip', description: 'Exclusive VIP shop', icon: ShoppingBagIcon },
description: 'Browse our exclusive product catalog', { name: 'Public', href: '/shop/public', description: 'Open catalog for everyone', icon: UsersIcon },
href: '/shop', ];
icon: ShoppingBagIcon,
}, const navLinks = [
{ { name: 'Affiliate-Links', href: '/affiliate-links' },
name: 'Community', { name: 'Memberships', href: '/memberships' },
description: 'Connect with other members', { name: 'About us', href: '/about-us' },
href: '/community', ];
icon: UsersIcon,
},
{
name: 'Dashboard',
description: 'Manage your account and activities',
href: '/dashboard',
icon: HomeIcon
},
]
export default function Header() { export default function Header() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
@ -146,30 +137,37 @@ export default function Header() {
<PopoverGroup className="hidden lg:flex lg:gap-x-12"> <PopoverGroup className="hidden lg:flex lg:gap-x-12">
<Popover> <Popover>
<PopoverButton className="flex items-center gap-x-1 text-sm/6 font-semibold text-gray-900 dark:text-white"> <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" /> <ChevronDownIcon aria-hidden="true" className="size-5 flex-none text-gray-500" />
</PopoverButton> </PopoverButton>
{/* Redesigned mega menu panel */}
<PopoverPanel <PopoverPanel
transition 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 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="relative bg-white dark:bg-gray-900"> <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">
<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"> {shopItems.map(item => (
{products.map((item) => ( <div
<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"> key={item.name}
<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"> className="group relative rounded-lg p-6 text-sm/6 hover:bg-white/5 transition-colors"
<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="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> </div>
<button <button
onClick={() => router.push(item.href)} 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} {item.name}
<span className="absolute inset-0" /> <span className="absolute inset-0" />
</button> </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>
))} ))}
</div> </div>
@ -177,28 +175,16 @@ export default function Header() {
</PopoverPanel> </PopoverPanel>
</Popover> </Popover>
<button {navLinks.map(l => (
onClick={() => router.push('/features')} <button
className="text-sm/6 font-semibold text-gray-900 dark:text-white hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" key={l.name}
> onClick={() => router.push(l.href)}
Features className="text-sm/6 font-semibold text-gray-900 dark:text-white hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
</button> >
{l.name}
<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" {/* Profile Dropdown - unchanged */}
>
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 */}
{user && ( {user && (
<Popover> <Popover>
<PopoverButton className="flex items-center gap-x-1 text-sm/6 font-semibold text-gray-900 dark:text-white"> <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"> <div className="space-y-2 py-6">
<Disclosure as="div" className="-mx-3"> <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"> <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" /> <ChevronDownIcon aria-hidden="true" className="size-5 flex-none group-data-open:rotate-180" />
</DisclosureButton> </DisclosureButton>
<DisclosurePanel className="mt-2 space-y-2"> <DisclosurePanel className="mt-2 space-y-1">
{products.map((item) => ( {shopItems.map(item => (
<DisclosureButton <DisclosureButton
key={item.name} key={item.name}
as="button" as="button"
onClick={() => { onClick={() => { router.push(item.href); setMobileMenuOpen(false); }}
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" 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} {item.name}
@ -329,6 +312,15 @@ export default function Header() {
))} ))}
</DisclosurePanel> </DisclosurePanel>
</Disclosure> </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>
<div className="py-6 space-y-2"> <div className="py-6 space-y-2">
<div className="flex flex-col border-b border-white/10 pb-4 mb-4 px-3"> <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="py-6 space-y-4">
<div className="-mx-3 px-3"> <Disclosure as="div" className="-mx-3">
<div className="text-sm font-medium text-gray-400 mb-2">Language</div> <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">
<LanguageSwitcher variant="dark" /> Shop
</div> <ChevronDownIcon aria-hidden="true" className="size-5 flex-none group-data-open:rotate-180" />
<button </DisclosureButton>
onClick={() => { <DisclosurePanel className="mt-2 space-y-1">
router.push('/login'); {shopItems.map(item => (
setMobileMenuOpen(false); <DisclosureButton
}} key={item.name}
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" as="button"
> onClick={() => { router.push(item.href); setMobileMenuOpen(false); }}
Log in 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"
</button> >
{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>
)} )}
</div> </div>