beautify: mobile fixes for header
This commit is contained in:
DeathKaioken
parent
375bfc46b1
commit
aa77b42fe0
@ -13,6 +13,7 @@ import {
|
||||
PopoverButton,
|
||||
PopoverGroup,
|
||||
PopoverPanel,
|
||||
Transition
|
||||
} from '@headlessui/react'
|
||||
import {
|
||||
Bars3Icon,
|
||||
@ -112,23 +113,26 @@ export default function Header() {
|
||||
<div className="flex lg:flex-1">
|
||||
<button
|
||||
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>
|
||||
<Image
|
||||
src="/images/logos/pp_logo_gold_transparent.png"
|
||||
alt="ProfitPlanet Logo"
|
||||
width={240}
|
||||
height={70}
|
||||
className="h-[4.5rem] w-auto"
|
||||
width={280}
|
||||
height={84}
|
||||
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>
|
||||
</div>
|
||||
<div className="flex lg:hidden">
|
||||
<button
|
||||
type="button"
|
||||
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>
|
||||
<Bars3Icon aria-hidden="true" className="size-6" />
|
||||
@ -254,144 +258,173 @@ export default function Header() {
|
||||
</div>
|
||||
</nav>
|
||||
<Dialog open={mobileMenuOpen} onClose={setMobileMenuOpen} className="lg:hidden">
|
||||
<div className="fixed inset-0 z-50" />
|
||||
<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">
|
||||
<div className="flex items-center justify-between">
|
||||
<button
|
||||
onClick={() => router.push('/')}
|
||||
className="-m-1.5 p-1.5"
|
||||
>
|
||||
<span className="sr-only">ProfitPlanet</span>
|
||||
<Image
|
||||
src="/images/logos/pp_logo_gold_transparent.png"
|
||||
alt="ProfitPlanet Logo"
|
||||
width={185}
|
||||
height={52}
|
||||
className="h-[3.25rem] w-auto"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className="-m-2.5 rounded-md p-2.5 text-gray-400"
|
||||
>
|
||||
<span className="sr-only">Close menu</span>
|
||||
<XMarkIcon aria-hidden="true" className="size-6" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-6 flow-root">
|
||||
<div className="-my-6 divide-y divide-gray-200 dark:divide-white/10">
|
||||
{/* Insert theme toggle in mobile */}
|
||||
<div className="py-6">
|
||||
<button
|
||||
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"
|
||||
{/* Overlay with fade */}
|
||||
<Transition
|
||||
appear
|
||||
show={mobileMenuOpen}
|
||||
>
|
||||
<Transition.Child
|
||||
enter="transition-opacity duration-300 ease-out"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="transition-opacity duration-200 ease-in"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 z-40 bg-black/40 backdrop-blur-sm" />
|
||||
</Transition.Child>
|
||||
|
||||
{/* Sliding panel */}
|
||||
<Transition.Child
|
||||
enter="transform transition-transform duration-300 ease-out"
|
||||
enterFrom="translate-x-full"
|
||||
enterTo="translate-x-0"
|
||||
leave="transform transition-transform duration-250 ease-in"
|
||||
leaveFrom="translate-x-0"
|
||||
leaveTo="translate-x-full"
|
||||
>
|
||||
<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="flex items-center justify-between">
|
||||
<button
|
||||
onClick={() => router.push('/')}
|
||||
className="p-1.5 flex items-center gap-3"
|
||||
>
|
||||
{isDark ? <SunIcon className="h-5 w-5" /> : <MoonIcon className="h-5 w-5" />}
|
||||
{isDark ? 'Light Mode' : 'Dark Mode'}
|
||||
<span className="sr-only">ProfitPlanet</span>
|
||||
<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>
|
||||
</div>
|
||||
{user ? (
|
||||
<>
|
||||
<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">
|
||||
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 className="mt-6 flow-root">
|
||||
<div className="-my-6 divide-y divide-gray-200 dark:divide-white/10">
|
||||
<div className="py-6">
|
||||
<button
|
||||
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" />}
|
||||
{isDark ? 'Light Mode' : 'Dark Mode'}
|
||||
</button>
|
||||
<div className="mt-4 px-1">
|
||||
<LanguageSwitcher variant="dark" />
|
||||
</div>
|
||||
</div>
|
||||
<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="font-medium text-white">
|
||||
{user?.firstName && user?.lastName
|
||||
? `${user.firstName} ${user.lastName}`
|
||||
: user?.email || 'User'
|
||||
}
|
||||
{user ? (
|
||||
<>
|
||||
<div className="space-y-2 py-6">
|
||||
<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>
|
||||
<div className="text-sm text-gray-400">
|
||||
{user?.email || 'user@example.com'}
|
||||
<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="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 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>
|
||||
<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>
|
||||
</DialogPanel>
|
||||
</div>
|
||||
</DialogPanel>
|
||||
</Transition.Child>
|
||||
</Transition>
|
||||
</Dialog>
|
||||
</header>
|
||||
)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user