feat: complete header and dropdown redesign for professional look
- Redesign site header with multi-layer gradient overlays, decorative glows, dot pattern texture, responsive clamp font sizing, and animated ping online badge - Add glass-dropdown CSS class with 60% opacity backdrop blur (20px) and smooth dropdownIn animation (scale + translate) - Fix dropdown positioning with top-full for proper alignment under menu triggers - Standardize all dropdowns (nav, top-header, color picker, language switcher) to use glass-dropdown class
This commit is contained in:
remco committed
1 parent
5bddf99cbe
commit
1e787c6c62
6 files changed
+73
-73
No files matched your search
+21
-5
@@ -900,12 +900,28 @@ tbody tr:hover {
|
|||||||
border-color: #f97316;
|
border-color: #f97316;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Glass dropdown (backdrop blur) ─────────────────────────── */
|
/* ── Glass dropdown (backdrop blur + animation) ─────────────── */
|
||||||
.glass-dropdown {
|
.glass-dropdown {
|
||||||
backdrop-filter: blur(16px) saturate(180%);
|
backdrop-filter: blur(20px) saturate(200%);
|
||||||
-webkit-backdrop-filter: blur(16px) saturate(180%);
|
-webkit-backdrop-filter: blur(20px) saturate(200%);
|
||||||
background-color: color-mix(in srgb, var(--color-dropdown) 78%, transparent);
|
background-color: color-mix(in srgb, var(--color-dropdown) 60%, transparent);
|
||||||
border: 1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent);
|
border: 1px solid color-mix(in srgb, var(--color-text-muted) 14%, transparent);
|
||||||
|
box-shadow: 0 8px 32px color-mix(in srgb, rgb(0 0 0) 20%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
details[open] > .glass-dropdown {
|
||||||
|
animation: dropdownIn 0.15s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dropdownIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-6px) scale(0.97);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0) scale(1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Radio sidebar ──────────────────────────────────────────── */
|
/* ── Radio sidebar ──────────────────────────────────────────── */
|
||||||
|
|||||||
@@ -58,8 +58,7 @@ export function LanguageSwitcher() {
|
|||||||
|
|
||||||
{open && (
|
{open && (
|
||||||
<div
|
<div
|
||||||
className="absolute right-0 mt-1 min-w-[160px] rounded-xl shadow-xl z-50 py-2 border backdrop-blur-md"
|
className="glass-dropdown absolute right-0 top-full mt-0.5 min-w-[160px] rounded-xl z-50 py-2"
|
||||||
style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 80%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
|
|
||||||
>
|
>
|
||||||
{LOCALES.map((l) => (
|
{LOCALES.map((l) => (
|
||||||
<button
|
<button
|
||||||
|
|||||||
@@ -72,8 +72,7 @@ export function NavbarColorPicker() {
|
|||||||
|
|
||||||
{mounted && open && (
|
{mounted && open && (
|
||||||
<div
|
<div
|
||||||
className="absolute right-0 mt-1 min-w-[200px] rounded-xl shadow-xl z-50 py-3 px-2 border backdrop-blur-md"
|
className="glass-dropdown absolute right-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-3 px-2"
|
||||||
style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 80%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
|
|
||||||
>
|
>
|
||||||
<div className="text-xs font-semibold uppercase tracking-wider mb-2 px-2" style={{ color: "var(--color-text-muted)" }}>Navbar kleur</div>
|
<div className="text-xs font-semibold uppercase tracking-wider mb-2 px-2" style={{ color: "var(--color-text-muted)" }}>Navbar kleur</div>
|
||||||
<div className="grid grid-cols-5 gap-1.5">
|
<div className="grid grid-cols-5 gap-1.5">
|
||||||
|
|||||||
@@ -36,16 +36,13 @@ export async function Navigation() {
|
|||||||
{t("community")}
|
{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>
|
<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>
|
</summary>
|
||||||
<div
|
<div className="glass-dropdown md:absolute left-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2">
|
||||||
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"
|
<Link href="/news" className="dropdown-item">{t("articles")}</Link>
|
||||||
style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 80%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
|
<Link href="/photos" className="dropdown-item">{t("photos")}</Link>
|
||||||
>
|
<Link href="/staff" className="dropdown-item">{t("staff")}</Link>
|
||||||
<Link href="/news" className="dropdown-item">{t("articles")}</Link>
|
<Link href="/rankings" className="dropdown-item">{t("rankings")}</Link>
|
||||||
<Link href="/photos" className="dropdown-item">{t("photos")}</Link>
|
<Link href="/guilds" className="dropdown-item">{t("guilds")}</Link>
|
||||||
<Link href="/staff" className="dropdown-item">{t("staff")}</Link>
|
</div>
|
||||||
<Link href="/rankings" className="dropdown-item">{t("rankings")}</Link>
|
|
||||||
<Link href="/guilds" className="dropdown-item">{t("guilds")}</Link>
|
|
||||||
</div>
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
<details className="relative group md:flex">
|
<details className="relative group md:flex">
|
||||||
@@ -54,10 +51,7 @@ export async function Navigation() {
|
|||||||
{t("shop")}
|
{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>
|
<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>
|
</summary>
|
||||||
<div
|
<div className="glass-dropdown md:absolute left-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2">
|
||||||
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) 80%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
|
|
||||||
>
|
|
||||||
<Link href="/shop" className="dropdown-item">{t("shop")}</Link>
|
<Link href="/shop" className="dropdown-item">{t("shop")}</Link>
|
||||||
<Link href="/marketplace" className="dropdown-item">{t("market")}</Link>
|
<Link href="/marketplace" className="dropdown-item">{t("market")}</Link>
|
||||||
<Link href="/rares" className="dropdown-item">{t("rareValues")}</Link>
|
<Link href="/rares" className="dropdown-item">{t("rareValues")}</Link>
|
||||||
@@ -80,10 +74,7 @@ export async function Navigation() {
|
|||||||
{t("assistance")}
|
{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>
|
<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>
|
</summary>
|
||||||
<div
|
<div className="glass-dropdown md:absolute left-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2">
|
||||||
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) 80%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
|
|
||||||
>
|
|
||||||
<Link href="/help" className="dropdown-item">{t("helpCenter")}</Link>
|
<Link href="/help" className="dropdown-item">{t("helpCenter")}</Link>
|
||||||
{session?.user ? (
|
{session?.user ? (
|
||||||
<Link href="/help/tickets" className="dropdown-item">{t("myTickets")}</Link>
|
<Link href="/help/tickets" className="dropdown-item">{t("myTickets")}</Link>
|
||||||
|
|||||||
@@ -21,65 +21,62 @@ export async function SiteHeader() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const bannerUrl = header && header !== "/assets/images/background.png" ? header : "/assets/images/mybobba_banner.png";
|
const bannerUrl = header && header !== "/assets/images/background.png" ? header : "/assets/images/mybobba_banner.png";
|
||||||
const isLoggedIn = Boolean(session?.user);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div className="site-header relative w-full overflow-hidden" style={{ minHeight: "18rem" }}>
|
||||||
className="relative flex items-center justify-center w-full overflow-hidden"
|
{/* Background image */}
|
||||||
style={{ minHeight: isLoggedIn ? "14rem" : "14rem", height: isLoggedIn ? "auto" : "14rem" }}
|
<div className="absolute inset-0" style={{ background: `url(${bannerUrl}) center/cover no-repeat` }} />
|
||||||
>
|
|
||||||
{/* Background with overlay gradient */}
|
{/* Gradient overlays */}
|
||||||
<div
|
<div className="absolute inset-0" style={{
|
||||||
className="absolute inset-0"
|
background: "linear-gradient(135deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.4) 75%, rgba(0,0,0,0.7) 100%)",
|
||||||
style={{
|
}} />
|
||||||
background: `url(${bannerUrl}) center/cover no-repeat`,
|
|
||||||
}}
|
{/* Subtle dot pattern */}
|
||||||
/>
|
<div className="absolute inset-0 opacity-[0.04]" style={{
|
||||||
<div
|
backgroundImage: "radial-gradient(rgba(255,255,255,0.5) 1px, transparent 1px)",
|
||||||
className="absolute inset-0"
|
backgroundSize: "20px 20px",
|
||||||
style={{
|
}} />
|
||||||
background: "linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.55) 100%)",
|
|
||||||
}}
|
{/* Decorative glows */}
|
||||||
/>
|
<div className="absolute -top-24 -right-24 w-96 h-96 rounded-full opacity-[0.12] blur-[120px]" style={{ background: "var(--color-primary)" }} />
|
||||||
|
<div className="absolute -bottom-24 -left-24 w-72 h-72 rounded-full opacity-[0.08] blur-[100px]" style={{ background: "var(--color-primary)" }} />
|
||||||
|
|
||||||
{/* Content */}
|
{/* Content */}
|
||||||
<div className="relative flex flex-col items-center justify-center px-4 py-8" style={{ zIndex: 1 }}>
|
<div className="relative flex flex-col items-center justify-center px-4 py-12 min-h-[18rem]">
|
||||||
<Link href="/" className="transition-all duration-300 hover:scale-110 mb-3 block">
|
<Link href="/" className="transition-transform duration-300 hover:scale-105 mb-8">
|
||||||
{logo ? (
|
{logo ? (
|
||||||
<img className="drop-shadow-lg block" src={logo} alt={hotelName ?? "Hotel"} style={{ maxHeight: 120 }} />
|
<img className="drop-shadow-2xl block" src={logo} alt={hotelName ?? "Hotel"} style={{ maxHeight: 120 }} />
|
||||||
) : (
|
) : (
|
||||||
<span
|
<h1
|
||||||
className="block text-center font-extrabold tracking-tight leading-none"
|
className="text-center font-extrabold tracking-tight leading-none text-white"
|
||||||
style={{
|
style={{
|
||||||
fontSize: isLoggedIn ? "3rem" : "3.5rem",
|
fontSize: "clamp(2.5rem, 7vw, 4.5rem)",
|
||||||
color: "#fff",
|
textShadow: "0 2px 20px rgba(0,0,0,0.4), 0 8px 40px rgba(0,0,0,0.2)",
|
||||||
textShadow: "0 4px 20px rgba(0,0,0,0.5), 0 0 60px rgba(0,0,0,0.3)",
|
letterSpacing: "-0.02em",
|
||||||
letterSpacing: "0.01em",
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{hotelName}
|
{hotelName}
|
||||||
</span>
|
</h1>
|
||||||
)}
|
)}
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
{/* Online counter badge */}
|
{/* Online badge */}
|
||||||
<div
|
<div
|
||||||
className="flex items-center gap-2.5 px-5 py-2.5 rounded-full"
|
className="flex items-center gap-3 px-6 py-3 rounded-full"
|
||||||
style={{
|
style={{
|
||||||
background: "rgba(255,255,255,0.12)",
|
background: "rgba(255,255,255,0.08)",
|
||||||
backdropFilter: "blur(12px)",
|
backdropFilter: "blur(16px)",
|
||||||
border: "1px solid rgba(255,255,255,0.15)",
|
WebkitBackdropFilter: "blur(16px)",
|
||||||
|
border: "1px solid rgba(255,255,255,0.10)",
|
||||||
|
boxShadow: "0 4px 24px rgba(0,0,0,0.12)",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span
|
<span className="relative flex h-2.5 w-2.5">
|
||||||
style={{
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
|
||||||
width: 10, height: 10, borderRadius: "50%",
|
<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500" />
|
||||||
background: "#22c55e",
|
</span>
|
||||||
boxShadow: "0 0 0 3px rgba(34,197,94,0.25)",
|
<span className="text-sm font-bold tracking-wide" style={{ color: "rgba(255,255,255,0.9)" }}>
|
||||||
display: "inline-block",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<span className="text-sm font-semibold" style={{ color: "rgba(255,255,255,0.95)" }}>
|
|
||||||
{t("online", { count: online, hotel: hotelName ?? "Atom" })}
|
{t("online", { count: online, hotel: hotelName ?? "Atom" })}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -67,8 +67,7 @@ export async function TopHeader() {
|
|||||||
Administration
|
Administration
|
||||||
</summary>
|
</summary>
|
||||||
<div
|
<div
|
||||||
className="absolute right-0 mt-1 min-w-[180px] rounded-xl shadow-xl z-50 py-2 border backdrop-blur-md"
|
className="glass-dropdown absolute right-0 top-full mt-0.5 min-w-[180px] rounded-xl z-50 py-2"
|
||||||
style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 80%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
|
|
||||||
>
|
>
|
||||||
<Link href="/admin" className="dropdown-item">
|
<Link href="/admin" className="dropdown-item">
|
||||||
Admin panel
|
Admin panel
|
||||||
@@ -90,8 +89,7 @@ export async function TopHeader() {
|
|||||||
<span className="-ml-2 font-semibold" style={{ color: "var(--color-navbar-text, var(--color-text))" }}>{session.user.name}</span>
|
<span className="-ml-2 font-semibold" style={{ color: "var(--color-navbar-text, var(--color-text))" }}>{session.user.name}</span>
|
||||||
</summary>
|
</summary>
|
||||||
<div
|
<div
|
||||||
className="absolute right-0 mt-1 min-w-[200px] rounded-xl shadow-xl z-50 py-2 border backdrop-blur-md"
|
className="glass-dropdown absolute right-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2"
|
||||||
style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 80%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
|
|
||||||
>
|
>
|
||||||
<Link href="/me" className="dropdown-item">
|
<Link href="/me" className="dropdown-item">
|
||||||
My dashboard
|
My dashboard
|
||||||
|
|||||||
Reference in new issue
Block a user