feat: mobile nav, radio layout/requests, leaderboard tabs, client i18n, habbo background, navbar fixes
This commit is contained in:
remco committed
1 parent
16096eff0f
commit
d6ccc250f6
20 files changed
+936
-140
No files matched your search
+109
-75
@@ -2,6 +2,8 @@ import { getTranslations } from "next-intl/server";
|
||||
import Link from "next/link";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { LanguageSwitcher } from "@/components/language-switcher";
|
||||
import { MobileNav } from "@/components/mobile-nav";
|
||||
import { NavbarColorPicker } from "@/components/navbar-color-picker";
|
||||
import { ThemeSwitcher } from "@/components/theme-switcher";
|
||||
|
||||
export async function Navigation() {
|
||||
@@ -10,85 +12,117 @@ export async function Navigation() {
|
||||
const isStaff = (session?.user?.rank ?? 0) >= 7;
|
||||
|
||||
return (
|
||||
<nav className="relative shadow-sm" style={{ backgroundColor: "var(--color-navbar)" }}>
|
||||
<div className="mx-auto flex min-h-[60px] max-w-7xl flex-wrap items-center px-4 gap-x-1 md:gap-x-2">
|
||||
<Link href="/" className="nav-item">
|
||||
<img src="/assets/images/icons/navigation/me.png" alt="" className="mr-1 hidden w-5 h-5 lg:inline-block" />
|
||||
{t("home")}
|
||||
</Link>
|
||||
<nav className="sticky top-0 z-40 shadow-sm" style={{ backgroundColor: "var(--color-navbar)" }}>
|
||||
<div className="relative mx-auto flex min-h-[56px] max-w-7xl items-center px-4 md:px-6 gap-x-1">
|
||||
<div className="absolute bottom-0 left-0 right-0 h-[3px]" style={{ backgroundColor: "var(--color-primary, #eeb425)" }} />
|
||||
|
||||
<div className="flex items-center gap-x-1 md:gap-x-1 flex-1 md:flex-none">
|
||||
<Link href="/" className="nav-item shrink-0">
|
||||
<img src="/assets/images/icons/navigation/me.png" alt="" className="w-5 h-5 mr-1.5" />
|
||||
<span className="hidden sm:inline">{t("home")}</span>
|
||||
<span className="sm:hidden">{t("home")}</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<details className="relative">
|
||||
<summary className="nav-item list-none cursor-pointer [&::-webkit-details-marker]:hidden">
|
||||
<img src="/assets/images/icons/navigation/community.png" alt="" className="mr-1 hidden w-5 h-5 lg:inline-block" />
|
||||
{t("community")}
|
||||
</summary>
|
||||
<div
|
||||
className="absolute left-0 mt-1 min-w-[190px] rounded-md shadow-lg z-50 py-1"
|
||||
style={{ backgroundColor: "var(--color-dropdown)" }}
|
||||
>
|
||||
<Link href="/news" className="dropdown-item">{t("articles")}</Link>
|
||||
<Link href="/photos" className="dropdown-item">{t("photos")}</Link>
|
||||
<Link href="/staff" className="dropdown-item">{t("staff")}</Link>
|
||||
<Link href="/rankings" className="dropdown-item">{t("rankings")}</Link>
|
||||
<Link href="/guilds" className="dropdown-item">{t("guilds")}</Link>
|
||||
<MobileNav>
|
||||
<Link href="/" className="nav-item md:hidden">
|
||||
<img src="/assets/images/icons/navigation/me.png" alt="" className="w-5 h-5 mr-1.5" />
|
||||
{t("home")}
|
||||
</Link>
|
||||
|
||||
<details className="relative group md:flex">
|
||||
<summary className="nav-item list-none cursor-pointer [&::-webkit-details-marker]:hidden">
|
||||
<img src="/assets/images/icons/navigation/community.png" alt="" className="w-5 h-5 mr-1.5" />
|
||||
{t("community")}
|
||||
<svg className="ml-auto md:ml-1 w-3 h-3 transition-transform duration-200 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
|
||||
</summary>
|
||||
<div
|
||||
className="md:absolute static left-0 mt-1.5 md:min-w-[200px] rounded-xl md:shadow-xl z-50 py-2 border backdrop-blur-md md:ml-0 ml-4"
|
||||
style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 97%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
|
||||
>
|
||||
<Link href="/news" className="dropdown-item">{t("articles")}</Link>
|
||||
<Link href="/photos" className="dropdown-item">{t("photos")}</Link>
|
||||
<Link href="/staff" className="dropdown-item">{t("staff")}</Link>
|
||||
<Link href="/rankings" className="dropdown-item">{t("rankings")}</Link>
|
||||
<Link href="/guilds" className="dropdown-item">{t("guilds")}</Link>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details className="relative group md:flex">
|
||||
<summary className="nav-item list-none cursor-pointer [&::-webkit-details-marker]:hidden">
|
||||
<img src="/assets/images/icons/navigation/shop.png" alt="" className="w-5 h-5 mr-1.5" />
|
||||
{t("shop")}
|
||||
<svg className="ml-auto md:ml-1 w-3 h-3 transition-transform duration-200 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
|
||||
</summary>
|
||||
<div
|
||||
className="md:absolute left-0 mt-1.5 min-w-[200px] rounded-xl shadow-xl z-50 py-2 border backdrop-blur-md"
|
||||
style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 97%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
|
||||
>
|
||||
<Link href="/shop" className="dropdown-item">{t("shop")}</Link>
|
||||
<Link href="/marketplace" className="dropdown-item">{t("market")}</Link>
|
||||
<Link href="/rares" className="dropdown-item">{t("rareValues")}</Link>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<Link href="/leaderboard" className="nav-item">
|
||||
<img src="/assets/images/icons/navigation/leaderboards.png" alt="" className="w-5 h-5 mr-1.5" />
|
||||
{t("leaderboards")}
|
||||
</Link>
|
||||
|
||||
<Link href="/radio" className="nav-item">
|
||||
<img src="/assets/images/icons/navigation/bb.png" alt="" className="w-5 h-5 mr-1.5" />
|
||||
{t("radio")}
|
||||
</Link>
|
||||
|
||||
<details className="relative group md:flex">
|
||||
<summary className="nav-item list-none cursor-pointer [&::-webkit-details-marker]:hidden">
|
||||
<img src="/assets/images/icons/navigation/rules.gif" alt="" className="w-5 h-5 mr-1.5" />
|
||||
{t("assistance")}
|
||||
<svg className="ml-auto md:ml-1 w-3 h-3 transition-transform duration-200 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
|
||||
</summary>
|
||||
<div
|
||||
className="md:absolute left-0 mt-1.5 min-w-[200px] rounded-xl shadow-xl z-50 py-2 border backdrop-blur-md"
|
||||
style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 97%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
|
||||
>
|
||||
<Link href="/help" className="dropdown-item">{t("helpCenter")}</Link>
|
||||
{session?.user ? (
|
||||
<Link href="/help/tickets" className="dropdown-item">{t("myTickets")}</Link>
|
||||
) : null}
|
||||
<Link href="/badges" className="dropdown-item">{t("badges")}</Link>
|
||||
<Link href="/draw-badge" className="dropdown-item">{t("drawBadge")}</Link>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
{session?.user ? (
|
||||
<>
|
||||
<Link href="/friends" className="nav-item">
|
||||
<img src="/assets/images/icons/navigation/goody.png" alt="" className="w-5 h-5 mr-1.5" />
|
||||
{t("friends")}
|
||||
</Link>
|
||||
<Link href="/messages" className="nav-item">
|
||||
<img src="/assets/images/icons/navigation/bb.png" alt="" className="w-5 h-5 mr-1.5" />
|
||||
{t("messages")}
|
||||
</Link>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{isStaff ? (
|
||||
<Link href="/admin" className="nav-item">
|
||||
<img src="/assets/images/icons/navigation/home.png" alt="" className="w-5 h-5 mr-1.5" />
|
||||
{t("admin")}
|
||||
</Link>
|
||||
) : null}
|
||||
|
||||
<div className="flex items-center gap-x-1 pt-2 mt-2 border-t md:hidden" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}>
|
||||
<LanguageSwitcher />
|
||||
<NavbarColorPicker />
|
||||
<ThemeSwitcher />
|
||||
</div>
|
||||
</details>
|
||||
</MobileNav>
|
||||
|
||||
<details className="relative">
|
||||
<summary className="nav-item list-none cursor-pointer [&::-webkit-details-marker]:hidden">
|
||||
<img src="/assets/images/icons/navigation/shop.png" alt="" className="mr-1 hidden w-5 h-5 lg:inline-block" />
|
||||
{t("shop")}
|
||||
</summary>
|
||||
<div
|
||||
className="absolute left-0 mt-1 min-w-[190px] rounded-md shadow-lg z-50 py-1"
|
||||
style={{ backgroundColor: "var(--color-dropdown)" }}
|
||||
>
|
||||
<Link href="/shop" className="dropdown-item">{t("shop")}</Link>
|
||||
<Link href="/marketplace" className="dropdown-item">{t("market")}</Link>
|
||||
<Link href="/rares" className="dropdown-item">{t("rareValues")}</Link>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<Link href="/leaderboard" className="nav-item">
|
||||
<img src="/assets/images/icons/navigation/leaderboards.png" alt="" className="mr-1 hidden w-5 h-5 lg:inline-block" />
|
||||
{t("leaderboards")}
|
||||
</Link>
|
||||
|
||||
<Link href="/radio" className="nav-item">
|
||||
{t("radio")}
|
||||
</Link>
|
||||
|
||||
<details className="relative">
|
||||
<summary className="nav-item list-none cursor-pointer [&::-webkit-details-marker]:hidden">
|
||||
<img src="/assets/images/icons/navigation/rules.gif" alt="" className="mr-1 hidden w-5 h-5 lg:inline-block" />
|
||||
{t("assistance")}
|
||||
</summary>
|
||||
<div
|
||||
className="absolute left-0 mt-1 min-w-[190px] rounded-md shadow-lg z-50 py-1"
|
||||
style={{ backgroundColor: "var(--color-dropdown)" }}
|
||||
>
|
||||
<Link href="/help" className="dropdown-item">{t("helpCenter")}</Link>
|
||||
{session?.user ? (
|
||||
<Link href="/help/tickets" className="dropdown-item">{t("myTickets")}</Link>
|
||||
) : null}
|
||||
<Link href="/badges" className="dropdown-item">{t("badges")}</Link>
|
||||
<Link href="/draw-badge" className="dropdown-item">{t("drawBadge")}</Link>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
{session?.user ? (
|
||||
<>
|
||||
<Link href="/friends" className="nav-item">{t("friends")}</Link>
|
||||
<Link href="/messages" className="nav-item">{t("messages")}</Link>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{isStaff ? (
|
||||
<Link href="/admin" className="nav-item">{t("admin")}</Link>
|
||||
) : null}
|
||||
|
||||
<div className="ml-auto flex items-center gap-x-2">
|
||||
<div className="ml-auto flex items-center gap-x-1 hidden md:flex">
|
||||
<LanguageSwitcher />
|
||||
<NavbarColorPicker />
|
||||
<ThemeSwitcher />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user