beautify: mobile fixes for header
This commit is contained in:
DeathKaioken
parent
375bfc46b1
commit
aa77b42fe0
@ -13,6 +13,7 @@ import {
|
|||||||
PopoverButton,
|
PopoverButton,
|
||||||
PopoverGroup,
|
PopoverGroup,
|
||||||
PopoverPanel,
|
PopoverPanel,
|
||||||
|
Transition
|
||||||
} from '@headlessui/react'
|
} from '@headlessui/react'
|
||||||
import {
|
import {
|
||||||
Bars3Icon,
|
Bars3Icon,
|
||||||
@ -112,23 +113,26 @@ export default function Header() {
|
|||||||
<div className="flex lg:flex-1">
|
<div className="flex lg:flex-1">
|
||||||
<button
|
<button
|
||||||
onClick={() => router.push('/')}
|
onClick={() => router.push('/')}
|
||||||
className="-m-1.5 p-1.5"
|
className="p-2 flex items-center gap-3 max-w-full lg:-m-1.5 lg:gap-0"
|
||||||
>
|
>
|
||||||
<span className="sr-only">ProfitPlanet</span>
|
<span className="sr-only">ProfitPlanet</span>
|
||||||
<Image
|
<Image
|
||||||
src="/images/logos/pp_logo_gold_transparent.png"
|
src="/images/logos/pp_logo_gold_transparent.png"
|
||||||
alt="ProfitPlanet Logo"
|
alt="ProfitPlanet Logo"
|
||||||
width={240}
|
width={280}
|
||||||
height={70}
|
height={84}
|
||||||
className="h-[4.5rem] w-auto"
|
className="h-14 w-auto flex-shrink-0 sm:h-16 lg:h-[4.5rem]"
|
||||||
/>
|
/>
|
||||||
|
{/* Removed flickering mobile heading (now only shown inside the sliding panel) */}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex lg:hidden">
|
<div className="flex lg:hidden">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setMobileMenuOpen(true)}
|
onClick={() => setMobileMenuOpen(true)}
|
||||||
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-400"
|
aria-expanded={mobileMenuOpen}
|
||||||
|
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-400 transition-transform duration-300 ease-out data-[open=true]:rotate-90"
|
||||||
|
data-open={mobileMenuOpen ? 'true' : 'false'}
|
||||||
>
|
>
|
||||||
<span className="sr-only">Open main menu</span>
|
<span className="sr-only">Open main menu</span>
|
||||||
<Bars3Icon aria-hidden="true" className="size-6" />
|
<Bars3Icon aria-hidden="true" className="size-6" />
|
||||||
@ -254,144 +258,173 @@ export default function Header() {
|
|||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
<Dialog open={mobileMenuOpen} onClose={setMobileMenuOpen} className="lg:hidden">
|
<Dialog open={mobileMenuOpen} onClose={setMobileMenuOpen} className="lg:hidden">
|
||||||
<div className="fixed inset-0 z-50" />
|
{/* Overlay with fade */}
|
||||||
<DialogPanel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white dark:bg-gray-900 p-6 sm:max-w-sm sm:ring-1 sm:ring-black/10 dark:sm:ring-gray-100/10 transition-colors">
|
<Transition
|
||||||
<div className="flex items-center justify-between">
|
appear
|
||||||
<button
|
show={mobileMenuOpen}
|
||||||
onClick={() => router.push('/')}
|
>
|
||||||
className="-m-1.5 p-1.5"
|
<Transition.Child
|
||||||
>
|
enter="transition-opacity duration-300 ease-out"
|
||||||
<span className="sr-only">ProfitPlanet</span>
|
enterFrom="opacity-0"
|
||||||
<Image
|
enterTo="opacity-100"
|
||||||
src="/images/logos/pp_logo_gold_transparent.png"
|
leave="transition-opacity duration-200 ease-in"
|
||||||
alt="ProfitPlanet Logo"
|
leaveFrom="opacity-100"
|
||||||
width={185}
|
leaveTo="opacity-0"
|
||||||
height={52}
|
>
|
||||||
className="h-[3.25rem] w-auto"
|
<div className="fixed inset-0 z-40 bg-black/40 backdrop-blur-sm" />
|
||||||
/>
|
</Transition.Child>
|
||||||
</button>
|
|
||||||
<button
|
{/* Sliding panel */}
|
||||||
type="button"
|
<Transition.Child
|
||||||
onClick={() => setMobileMenuOpen(false)}
|
enter="transform transition-transform duration-300 ease-out"
|
||||||
className="-m-2.5 rounded-md p-2.5 text-gray-400"
|
enterFrom="translate-x-full"
|
||||||
>
|
enterTo="translate-x-0"
|
||||||
<span className="sr-only">Close menu</span>
|
leave="transform transition-transform duration-250 ease-in"
|
||||||
<XMarkIcon aria-hidden="true" className="size-6" />
|
leaveFrom="translate-x-0"
|
||||||
</button>
|
leaveTo="translate-x-full"
|
||||||
</div>
|
>
|
||||||
<div className="mt-6 flow-root">
|
<DialogPanel className="fixed inset-y-0 right-0 z-50 w-full sm:max-w-sm h-full overflow-y-auto overflow-x-hidden bg-white dark:bg-gray-900 p-5 sm:ring-1 sm:ring-black/10 dark:sm:ring-gray-100/10">
|
||||||
<div className="-my-6 divide-y divide-gray-200 dark:divide-white/10">
|
<div className="flex items-center justify-between">
|
||||||
{/* Insert theme toggle in mobile */}
|
<button
|
||||||
<div className="py-6">
|
onClick={() => router.push('/')}
|
||||||
<button
|
className="p-1.5 flex items-center gap-3"
|
||||||
onClick={toggleTheme}
|
|
||||||
className="flex items-center gap-x-2 rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-white/5 w-full"
|
|
||||||
>
|
>
|
||||||
{isDark ? <SunIcon className="h-5 w-5" /> : <MoonIcon className="h-5 w-5" />}
|
<span className="sr-only">ProfitPlanet</span>
|
||||||
{isDark ? 'Light Mode' : 'Dark Mode'}
|
<Image
|
||||||
|
src="/images/logos/pp_logo_gold_transparent.png"
|
||||||
|
alt="ProfitPlanet Logo"
|
||||||
|
width={190}
|
||||||
|
height={60}
|
||||||
|
className="h-12 w-auto flex-shrink-0"
|
||||||
|
/>
|
||||||
|
<span className="text-xl font-bold tracking-tight text-[#D4AF37]">
|
||||||
|
Profit Planet
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setMobileMenuOpen(false)}
|
||||||
|
className="rounded-md p-2.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-transform duration-300 hover:scale-110"
|
||||||
|
>
|
||||||
|
<span className="sr-only">Close menu</span>
|
||||||
|
<XMarkIcon aria-hidden="true" className="size-6" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{user ? (
|
<div className="mt-6 flow-root">
|
||||||
<>
|
<div className="-my-6 divide-y divide-gray-200 dark:divide-white/10">
|
||||||
<div className="space-y-2 py-6">
|
<div className="py-6">
|
||||||
<Disclosure as="div" className="-mx-3">
|
<button
|
||||||
<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">
|
onClick={toggleTheme}
|
||||||
Shop
|
className="flex items-center gap-x-2 rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-white/5 w-full"
|
||||||
<ChevronDownIcon aria-hidden="true" className="size-5 flex-none group-data-open:rotate-180" />
|
>
|
||||||
</DisclosureButton>
|
{isDark ? <SunIcon className="h-5 w-5" /> : <MoonIcon className="h-5 w-5" />}
|
||||||
<DisclosurePanel className="mt-2 space-y-1">
|
{isDark ? 'Light Mode' : 'Dark Mode'}
|
||||||
{shopItems.map(item => (
|
</button>
|
||||||
<DisclosureButton
|
<div className="mt-4 px-1">
|
||||||
key={item.name}
|
<LanguageSwitcher variant="dark" />
|
||||||
as="button"
|
</div>
|
||||||
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>
|
||||||
<div className="py-6 space-y-2">
|
{user ? (
|
||||||
<div className="flex flex-col border-b border-white/10 pb-4 mb-4 px-3">
|
<>
|
||||||
<div className="font-medium text-white">
|
<div className="space-y-2 py-6">
|
||||||
{user?.firstName && user?.lastName
|
<Disclosure as="div">
|
||||||
? `${user.firstName} ${user.lastName}`
|
<DisclosureButton className="group flex w-full items-center justify-between rounded-lg py-2 px-3 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-white/5">
|
||||||
: user?.email || 'User'
|
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 pl-6 pr-3 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="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="text-sm text-gray-400">
|
<div className="py-6 space-y-2">
|
||||||
{user?.email || 'user@example.com'}
|
<div className="flex flex-col border-b border-white/10 pb-4 mb-4 px-3">
|
||||||
|
<div className="font-medium text-white">
|
||||||
|
{user?.firstName && user?.lastName
|
||||||
|
? `${user.firstName} ${user.lastName}`
|
||||||
|
: user?.email || 'User'
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-400">
|
||||||
|
{user?.email || 'user@example.com'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => { router.push('/profile'); setMobileMenuOpen(false); }}
|
||||||
|
className="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"
|
||||||
|
>
|
||||||
|
Profile
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => { handleLogout(); setMobileMenuOpen(false); }}
|
||||||
|
className="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"
|
||||||
|
>
|
||||||
|
Logout
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-4">
|
</>
|
||||||
<div className="text-sm font-medium text-gray-400 mb-2">Language</div>
|
) : (
|
||||||
<LanguageSwitcher variant="dark" />
|
<div className="py-6 space-y-4">
|
||||||
|
<Disclosure as="div">
|
||||||
|
<DisclosureButton className="group flex w-full items-center justify-between rounded-lg py-2 px-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 pl-6 pr-3 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="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 className="px-3">
|
||||||
|
<button
|
||||||
|
onClick={() => { router.push('/login'); setMobileMenuOpen(false); }}
|
||||||
|
className="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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button
|
)}
|
||||||
onClick={() => {
|
|
||||||
router.push('/profile');
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
Profile
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
handleLogout();
|
|
||||||
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"
|
|
||||||
>
|
|
||||||
Logout
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<div className="py-6 space-y-4">
|
|
||||||
<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>
|
||||||
)}
|
</div>
|
||||||
</div>
|
</DialogPanel>
|
||||||
</div>
|
</Transition.Child>
|
||||||
</DialogPanel>
|
</Transition>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
</header>
|
</header>
|
||||||
)
|
)
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user