feat(site): hide global chrome on landing pages
CI / check (push) Successful in 28s
CI / tests-imaging-browsers (push) Successful in 2m7s
CI / tests-unit (push) Successful in 2m23s
CI / tests-integration (push) Successful in 2m22s
CI / tests-quality (push) Successful in 52s
CI / tests-ui (push) Successful in 5m14s
CI / preflight (push) Skipped
CI / deploy (push) Successful in 3m43s
CI / check (push) Successful in 28s
CI / tests-imaging-browsers (push) Successful in 2m7s
CI / tests-unit (push) Successful in 2m23s
CI / tests-integration (push) Successful in 2m22s
CI / tests-quality (push) Successful in 52s
CI / tests-ui (push) Successful in 5m14s
CI / preflight (push) Skipped
CI / deploy (push) Successful in 3m43s
The index, login and register render their own AuthTopBar, so the shared TopHeader / SiteHeader banner / Navigation duplicated the same chrome. Hide the global chrome on those three standalone landing pages only.
This commit is contained in:
1 parent
b40293bd06
commit
4b25292ecc
1 file changed
+27
-11
+27
-11
@@ -1,4 +1,5 @@
|
|||||||
import dynamic from "next/dynamic";
|
import dynamic from "next/dynamic";
|
||||||
|
import { headers } from "next/headers";
|
||||||
import { NextIntlClientProvider } from "next-intl";
|
import { NextIntlClientProvider } from "next-intl";
|
||||||
import { getLocale, getMessages } from "next-intl/server";
|
import { getLocale, getMessages } from "next-intl/server";
|
||||||
import type { ReactNode } from "react";
|
import type { ReactNode } from "react";
|
||||||
@@ -34,28 +35,43 @@ export default async function SiteLayout({
|
|||||||
}: {
|
}: {
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
}) {
|
}) {
|
||||||
const [session, locale, messages] = await Promise.all([
|
const [session, locale, messages, h] = await Promise.all([
|
||||||
auth(),
|
auth(),
|
||||||
getLocale(),
|
getLocale(),
|
||||||
getMessages(),
|
getMessages(),
|
||||||
|
headers(),
|
||||||
]);
|
]);
|
||||||
const clientMessages = publicClientMessages(messages);
|
const clientMessages = publicClientMessages(messages);
|
||||||
|
|
||||||
|
// The landing pages render their own AuthTopBar (logo + live online), so the
|
||||||
|
// global site banner / navigation is hidden there to keep them clean and
|
||||||
|
// avoid showing the same chrome twice. Everything else keeps the chrome.
|
||||||
|
const pathname = h.get("x-pathname");
|
||||||
|
const isLandingPage =
|
||||||
|
pathname === "/" || pathname === "/login" || pathname === "/register";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NextIntlClientProvider locale={locale} messages={clientMessages}>
|
<NextIntlClientProvider locale={locale} messages={clientMessages}>
|
||||||
<CloudsField />
|
<CloudsField />
|
||||||
{/* Site chrome is public: hiding it all for anonymous visitors used to
|
{/* Site chrome is public: hiding it all for anonymous visitors used to
|
||||||
strand them — from /news, /leaderboard or /shop there was no way to
|
strand them — from /news, /leaderboard or /shop there was no way to
|
||||||
reach any other page at all. */}
|
reach any other page at all. Only the standalone landing pages opt
|
||||||
<div data-theme-block="top_header">
|
out, because they carry their own header. */}
|
||||||
<TopHeader session={session} />
|
{!isLandingPage && (
|
||||||
</div>
|
<div data-theme-block="top_header">
|
||||||
<div data-theme-block="site_header">
|
<TopHeader session={session} />
|
||||||
<SiteHeader />
|
</div>
|
||||||
</div>
|
)}
|
||||||
<div data-theme-block="navigation">
|
{!isLandingPage && (
|
||||||
<Navigation session={session} />
|
<div data-theme-block="site_header">
|
||||||
</div>
|
<SiteHeader />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!isLandingPage && (
|
||||||
|
<div data-theme-block="navigation">
|
||||||
|
<Navigation session={session} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<main>
|
<main>
|
||||||
<div
|
<div
|
||||||
data-theme-block="content_grid"
|
data-theme-block="content_grid"
|
||||||
|
|||||||
Reference in new issue
Block a user