feat: mobile nav, radio layout/requests, leaderboard tabs, client i18n, habbo background, navbar fixes

2026-07-01 15:59:02 +02:00
1 parent 16096eff0f
commit d6ccc250f6
@@ -0,0 +1,82 @@
+import { getTranslations } from "next-intl/server";
+import Link from "next/link";
+import type { ReactNode } from "react";
+
+const RADIO_SIDEBAR_LINKS = [
+  { key: "schedule", href: "/radio/schedule", icon: "🗓️" },
+  { key: "shouts", href: "/radio/shouts", icon: "📣" },
+  { key: "requests", href: "/radio/requests", icon: "🎵" },
+  { key: "apply", href: "/radio/apply", icon: "🎤" },
+  { key: "leaderboard", href: "/radio/leaderboard", icon: "🏆" },
+] as const;
+
+const SIDEBAR_KEYS = RADIO_SIDEBAR_LINKS.map((l) => l.key);
+
+export default async function RadioLayout({ children }: { children: ReactNode }) {
+  const t = await getTranslations("pages.radio");
+
+  return (
+    <div className="radio-layout" style={{ display: "flex", gap: "1.5rem", alignItems: "flex-start" }}>
+      <aside
+        className="radio-sidebar"
+        style={{
+          flex: "none",
+          width: "200px",
+          position: "sticky",
+          top: "5rem",
+          display: "flex",
+          flexDirection: "column",
+          gap: "0.25rem",
+        }}
+      >
+        <Link
+          href="/radio"
+          className="radio-sidebar-head"
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "0.5rem",
+            padding: "0.55rem 0.75rem",
+            fontWeight: 700,
+            fontSize: "1rem",
+            color: "var(--color-text)",
+            textDecoration: "none",
+            borderBottom: "1px solid color-mix(in srgb, var(--color-text-muted) 14%, transparent)",
+            marginBottom: "0.25rem",
+          }}
+        >
+          <span aria-hidden style={{ fontSize: "1.2rem" }}>📻</span>
+          Radio
+        </Link>
+        {RADIO_SIDEBAR_LINKS.map((link) => (
+          <Link
+            key={link.href}
+            href={link.href}
+            className="radio-sidebar-link"
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem",
+              padding: "0.5rem 0.75rem",
+              borderRadius: "8px",
+              color: "var(--color-text)",
+              textDecoration: "none",
+              fontSize: "0.9rem",
+              transition: "background 0.15s",
+            }}
+          >
+            <span aria-hidden style={{ flex: "none", fontSize: "1rem" }}>{link.icon}</span>
+            {link.key === "schedule" ? t("linkSchedule") :
+             link.key === "shouts" ? t("linkShouts") :
+             link.key === "requests" ? t("linkRequests") :
+             link.key === "apply" ? t("linkApply") :
+             t("linkLeaderboard")}
+          </Link>
+        ))}
+      </aside>
+      <section style={{ flex: 1, minWidth: 0 }}>
+        {children}
+      </section>
+    </div>
+  );
+}