Complete nav rewrite: native details/summary, zero JS state, zero transforms
Local Build and Deploy / deploy (push) Successful in 1m5s
Local Build and Deploy / deploy (push) Successful in 1m5s
- Mobile nav: uses <details>/<summary> for toggle, no useState, no useEffect - Nav dropdown: uses <details>/<summary>, no useState, no event listeners - Desktop: separate div with desktop nav items (hidden on mobile) - Mobile: hamburger dropdown with absolute positioned panel - CSS: removed ::after pseudo-element with transform, replaced hover with background-color only, added details[open] CSS rules - No backdrop-filter, no will-change, no transition-all, no GPU hacks - Works on every device without JS state management
This commit is contained in:
openhands committed
1 parent
5978b3c13d
commit
48a5394204
4 files changed
+194
-140
No files matched your search
@@ -24,6 +24,7 @@ export async function Navigation() {
|
||||
style={{ backgroundColor: "var(--color-primary, #eeb425)" }}
|
||||
/>
|
||||
|
||||
{/* Desktop: home link */}
|
||||
<div className="hidden md:flex items-center gap-x-1">
|
||||
<Link href="/" className="nav-item shrink-0">
|
||||
<Image
|
||||
@@ -37,11 +38,135 @@ export async function Navigation() {
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Desktop: nav items */}
|
||||
<div className="hidden md:flex items-center gap-x-1">
|
||||
<NavDropdown
|
||||
label={t("community")}
|
||||
icon="/assets/images/icons/navigation/community.png"
|
||||
>
|
||||
<Link href="/news" className="dropdown-item" role="menuitem">
|
||||
{t("articles")}
|
||||
</Link>
|
||||
<Link href="/photos" className="dropdown-item" role="menuitem">
|
||||
{t("photos")}
|
||||
</Link>
|
||||
<Link href="/staff" className="dropdown-item" role="menuitem">
|
||||
{t("staff")}
|
||||
</Link>
|
||||
<Link href="/rankings" className="dropdown-item" role="menuitem">
|
||||
{t("rankings")}
|
||||
</Link>
|
||||
<Link href="/guilds" className="dropdown-item" role="menuitem">
|
||||
{t("guilds")}
|
||||
</Link>
|
||||
</NavDropdown>
|
||||
|
||||
<NavDropdown
|
||||
label={t("shop")}
|
||||
icon="/assets/images/icons/navigation/shop.png"
|
||||
>
|
||||
<Link href="/shop" className="dropdown-item" role="menuitem">
|
||||
{t("shop")}
|
||||
</Link>
|
||||
<Link href="/marketplace" className="dropdown-item" role="menuitem">
|
||||
{t("market")}
|
||||
</Link>
|
||||
<Link href="/rares" className="dropdown-item" role="menuitem">
|
||||
{t("rareValues")}
|
||||
</Link>
|
||||
</NavDropdown>
|
||||
|
||||
<Link href="/leaderboard" className="nav-item">
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/leaderboards.png"
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
className="mr-1.5"
|
||||
/>
|
||||
{t("leaderboards")}
|
||||
</Link>
|
||||
|
||||
<Link href="/radio" className="nav-item">
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/bb.png"
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
className="mr-1.5"
|
||||
/>
|
||||
{t("radio")}
|
||||
</Link>
|
||||
|
||||
<NavDropdown
|
||||
label={t("assistance")}
|
||||
icon="/assets/images/icons/navigation/rules.gif"
|
||||
>
|
||||
<Link href="/help" className="dropdown-item" role="menuitem">
|
||||
{t("helpCenter")}
|
||||
</Link>
|
||||
{session?.user ? (
|
||||
<Link
|
||||
href="/help/tickets"
|
||||
className="dropdown-item"
|
||||
role="menuitem"
|
||||
>
|
||||
{t("myTickets")}
|
||||
</Link>
|
||||
) : null}
|
||||
<Link href="/badges" className="dropdown-item" role="menuitem">
|
||||
{t("badges")}
|
||||
</Link>
|
||||
<Link href="/draw-badge" className="dropdown-item" role="menuitem">
|
||||
{t("drawBadge")}
|
||||
</Link>
|
||||
</NavDropdown>
|
||||
|
||||
{session?.user ? (
|
||||
<>
|
||||
<Link href="/friends" className="nav-item">
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/goody.png"
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
className="mr-1.5"
|
||||
/>
|
||||
{t("friends")}
|
||||
</Link>
|
||||
<Link href="/messages" className="nav-item">
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/bb.png"
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
className="mr-1.5"
|
||||
/>
|
||||
{t("messages")}
|
||||
</Link>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{isStaff ? (
|
||||
<Link href="/admin" className="nav-item">
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/home.png"
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
className="mr-1.5"
|
||||
/>
|
||||
{t("admin")}
|
||||
</Link>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{/* Mobile: hamburger menu (details/summary) */}
|
||||
<MobileNav
|
||||
menuLabel={t("openMenu") || "Open menu"}
|
||||
closeLabel={t("closeMenu") || "Close menu"}
|
||||
>
|
||||
<Link href="/" className="nav-item" role="menuitem">
|
||||
<Link href="/" className="nav-item">
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/me.png"
|
||||
alt=""
|
||||
@@ -88,7 +213,7 @@ export async function Navigation() {
|
||||
</Link>
|
||||
</NavDropdown>
|
||||
|
||||
<Link href="/leaderboard" className="nav-item" role="menuitem">
|
||||
<Link href="/leaderboard" className="nav-item">
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/leaderboards.png"
|
||||
alt=""
|
||||
@@ -99,7 +224,7 @@ export async function Navigation() {
|
||||
{t("leaderboards")}
|
||||
</Link>
|
||||
|
||||
<Link href="/radio" className="nav-item" role="menuitem">
|
||||
<Link href="/radio" className="nav-item">
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/bb.png"
|
||||
alt=""
|
||||
@@ -185,6 +310,7 @@ export async function Navigation() {
|
||||
</div>
|
||||
</MobileNav>
|
||||
|
||||
{/* Desktop: controls */}
|
||||
<div className="ml-auto hidden md:flex items-center gap-x-1">
|
||||
<LanguageSwitcher />
|
||||
<NavbarColorPicker />
|
||||
|
||||
Reference in new issue
Block a user