beautify: header account mobile and desktop
This commit is contained in:
DeathKaioken
parent
35f20dbb4e
commit
d5cb8e673d
@ -3,7 +3,6 @@
|
||||
import React from 'react';
|
||||
import Header from './nav/Header';
|
||||
import Footer from './Footer';
|
||||
import GlobalAnimatedBackground from '../background/GlobalAnimatedBackground';
|
||||
import PageTransitionEffect from './animation/pageTransitionEffect';
|
||||
|
||||
// Utility to detect mobile devices
|
||||
@ -26,7 +25,7 @@ export default function PageLayout({
|
||||
const isMobile = isMobileDevice();
|
||||
|
||||
return (
|
||||
<div className="h-screen w-full flex flex-col relative bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors overflow-hidden">
|
||||
<div className="min-h-screen w-full flex flex-col relative bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors overflow-x-hidden">
|
||||
|
||||
{showHeader && (
|
||||
<div className="relative z-50 w-full flex-shrink-0">
|
||||
@ -34,7 +33,7 @@ export default function PageLayout({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Main content now participates in normal document flow */}
|
||||
{/* Main content scrolls naturally with page */}
|
||||
<div className="flex-1 relative z-10 w-full flex flex-col">
|
||||
<PageTransitionEffect>{children}</PageTransitionEffect>
|
||||
</div>
|
||||
|
||||
@ -19,7 +19,6 @@ import {
|
||||
Bars3Icon,
|
||||
ShoppingBagIcon,
|
||||
UsersIcon,
|
||||
HomeIcon,
|
||||
UserCircleIcon,
|
||||
XMarkIcon,
|
||||
ArrowRightOnRectangleIcon,
|
||||
@ -188,10 +187,13 @@ export default function Header() {
|
||||
{l.name}
|
||||
</button>
|
||||
))}
|
||||
{/* Profile Dropdown - unchanged */}
|
||||
{/* Removed user profile Popover from here (now on right side) */}
|
||||
</PopoverGroup>
|
||||
<div className="hidden lg:flex lg:flex-1 lg:justify-end lg:items-center lg:gap-x-4">
|
||||
{/* Avatar first (when logged in) - repositioned dropdown */}
|
||||
{user && (
|
||||
<Popover>
|
||||
<PopoverButton className="flex items-center gap-x-1 text-sm/6 font-semibold text-gray-900 dark:text-white">
|
||||
<Popover className="relative">
|
||||
<PopoverButton className="flex items-center gap-x-1 text-sm font-semibold text-gray-900 dark:text-white">
|
||||
<Avatar
|
||||
src=""
|
||||
initials={getUserInitials()}
|
||||
@ -199,33 +201,29 @@ export default function Header() {
|
||||
/>
|
||||
<ChevronDownIcon aria-hidden="true" className="size-5 flex-none text-gray-500" />
|
||||
</PopoverButton>
|
||||
|
||||
<PopoverPanel
|
||||
transition
|
||||
className="absolute right-0 top-16 w-64 bg-white dark:bg-gray-900 ring-1 ring-black/5 dark:ring-white/15 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 top-full mt-2 w-64 rounded-md bg-white dark:bg-gray-900 ring-1 ring-black/10 dark:ring-white/10 shadow-lg data-closed:-translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-leave:duration-150"
|
||||
>
|
||||
<div className="p-4">
|
||||
<div className="flex flex-col border-b border-white/10 pb-4 mb-4">
|
||||
<div className="font-medium text-white">
|
||||
{user?.firstName && user?.lastName
|
||||
? `${user.firstName} ${user.lastName}`
|
||||
: user?.email || 'User'
|
||||
}
|
||||
<div className="flex flex-col border-b border-gray-200 dark:border-white/10 pb-4 mb-4">
|
||||
<div className="font-medium text-gray-900 dark:text-white">
|
||||
{user?.firstName && user?.lastName ? `${user.firstName} ${user.lastName}` : (user?.email || 'User')}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||||
{user?.email || 'user@example.com'}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => router.push('/profile')}
|
||||
className="flex items-center gap-x-2 w-full text-left p-2 text-sm text-white hover:bg-white/5 rounded-md"
|
||||
className="flex items-center gap-x-2 w-full text-left p-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-white/5 rounded-md"
|
||||
>
|
||||
<UserCircleIcon className="size-5 text-gray-400" />
|
||||
Profile
|
||||
</button>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="flex items-center gap-x-2 w-full text-left p-2 text-sm text-white hover:bg-white/5 rounded-md"
|
||||
className="flex items-center gap-x-2 w-full text-left p-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-white/5 rounded-md"
|
||||
>
|
||||
<ArrowRightOnRectangleIcon className="size-5 text-gray-400" />
|
||||
Logout
|
||||
@ -234,9 +232,7 @@ export default function Header() {
|
||||
</PopoverPanel>
|
||||
</Popover>
|
||||
)}
|
||||
</PopoverGroup>
|
||||
<div className="hidden lg:flex lg:flex-1 lg:justify-end lg:items-center lg:gap-x-4">
|
||||
{/* Log in first (if not logged in) */}
|
||||
{/* Login button (only when not logged in) */}
|
||||
{!user && (
|
||||
<button
|
||||
onClick={() => router.push('/login')}
|
||||
@ -245,7 +241,7 @@ export default function Header() {
|
||||
Log in <span aria-hidden="true">→</span>
|
||||
</button>
|
||||
)}
|
||||
{/* Language next */}
|
||||
{/* Language after avatar/login */}
|
||||
<LanguageSwitcher variant={isDark ? 'dark' : 'light'} />
|
||||
{/* Theme toggle last */}
|
||||
<button
|
||||
@ -312,20 +308,45 @@ export default function Header() {
|
||||
</div>
|
||||
<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>
|
||||
{user ? (
|
||||
<>
|
||||
{/* User info now FIRST under logo */}
|
||||
<div className="pt-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>
|
||||
{/* Theme + Language now AFTER user info */}
|
||||
<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>
|
||||
{/* Navigation / Shop after that */}
|
||||
<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">
|
||||
@ -355,31 +376,6 @@ export default function Header() {
|
||||
</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">
|
||||
<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="py-6 space-y-4">
|
||||
|
||||
@ -6,7 +6,7 @@ export default function HomePage() {
|
||||
{/* Hero Section */}
|
||||
<section
|
||||
id="hero"
|
||||
className="relative isolate flex-1"
|
||||
className="relative isolate" // removed flex-1 to avoid nested scroll container
|
||||
>
|
||||
{/* ...existing code (pattern SVG + blurred polygon) ... */}
|
||||
<svg
|
||||
@ -53,7 +53,8 @@ export default function HomePage() {
|
||||
<div className="pointer-events-none absolute inset-0 -z-10 mix-blend-overlay [background-image:linear-gradient(rgba(255,255,255,0.04)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.04)_1px,transparent_1px)] bg-[size:40px_40px]" />
|
||||
|
||||
{/* Content wrapper */}
|
||||
<div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 sm:py-16 lg:px-8 lg:py-28 flex w-full items-center h-full">
|
||||
<div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 sm:py-20 lg:px-8 lg:py-32 flex w-full items-center">
|
||||
{/* removed h-full so it sizes to content */}
|
||||
<div className="mx-auto max-w-2xl gap-x-8 lg:mx-0 lg:flex lg:max-w-none lg:items-center lg:gap-x-14">
|
||||
<div className="relative w-full lg:max-w-xl lg:shrink-0 xl:max-w-2xl">
|
||||
<h1 className="text-3xl font-semibold tracking-tight text-pretty text-white sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user