NoelOrin
/
app-template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(web): hide template side-rail on media pages

This commit is contained in:
noelorin 2026-09-25 04:07:35 +08:00
parent c2692a0ceb
commit 113c7f2848
3 changed files with 43 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
app/web/src/layouts/AppLayout.astro
View File

@ -20,6 +20,8 @@ export interface Props {
switchHref?: string;
switchLabel?: string;
seo?: PageSeoInput;
/** 媒体页只保留 AppShell 侧栏时隐藏模板 side-rail（含左让位） */
hideSideRail?: boolean;
}
const {
@ -30,6 +32,7 @@ const {
switchHref,
switchLabel,
seo,
hideSideRail = false,
} = Astro.props;
const brandName = brand ?? t(locale, "meta.brand");
@ -125,38 +128,40 @@ const brandInitial = locale === "zh-CN" ? "模" : "A";
<div aria-hidden="true" class="bg-glow pointer-events-none fixed inset-0 z-0"></div>
<div aria-hidden="true" class="bg-vignette pointer-events-none fixed inset-0 z-0"></div>
<aside class="side-rail" aria-label={t(locale, "nav.primary")}>
<a href={brandHref} class="side-rail__brand" aria-label={brandName}>
<span
class="brand-signal flex size-8 items-center justify-center text-[12px] font-bold"
style="background: var(--edge); color: #101110;"
>
{brandInitial}
</span>
<span class="side-rail__brand-text">{brandName}</span>
</a>
<div class="side-rail__rule" aria-hidden="true"></div>
<nav class="side-rail__nav">
<a href={brandHref} class="side-rail__link is-home">
<span class="u-mono">00</span>
<span>{t(locale, "nav.home")}</span>
</a>
{
nav.map((item) => (
<a href={item.href} class="side-rail__link">
<span class="u-mono">{item.n}</span>
<span>{item.label}</span>
{
!hideSideRail && (
<aside class="side-rail" aria-label={t(locale, "nav.primary")}>
<a href={brandHref} class="side-rail__brand" aria-label={brandName}>
<span
class="brand-signal flex size-8 items-center justify-center text-[12px] font-bold"
style="background: var(--edge); color: #101110;"
>
{brandInitial}
</span>
<span class="side-rail__brand-text">{brandName}</span>
</a>
<div class="side-rail__rule" aria-hidden="true"></div>
<nav class="side-rail__nav">
<a href={brandHref} class="side-rail__link is-home">
<span class="u-mono">00</span>
<span>{t(locale, "nav.home")}</span>
</a>
))
}
</nav>
<div class="side-rail__rule" aria-hidden="true"></div>
<div class="side-rail__foot">
<ThemeSwitch client:visible />
</div>
</aside>
{nav.map((item) => (
<a href={item.href} class="side-rail__link">
<span class="u-mono">{item.n}</span>
<span>{item.label}</span>
</a>
))}
</nav>
<div class="side-rail__rule" aria-hidden="true"></div>
<div class="side-rail__foot">
<ThemeSwitch client:visible />
</div>
</aside>
)
}
<div class="site-shell">
<div class:list={["site-shell", { "site-shell--no-rail": hideSideRail }]}>
<header class="site-header">
<div class="site-header__inner">
<a href={brandHref} class="site-header__brand md:hidden" aria-label={brandName}>
@ -192,7 +197,7 @@ const brandInitial = locale === "zh-CN" ? "模" : "A";
</a>
)
}
<span class="md:hidden">
<span class={hideSideRail ? "" : "md:hidden"}>
<ThemeSwitch client:visible />
</span>
<UserMenu client:visible locale={locale} />

6
app/web/src/styles/globals.css
View File

@ -471,12 +471,18 @@ html.has-reveal astro-island .u-reveal {
padding-left: 8.5rem;
padding-right: 3.5rem;
}
.site-shell--no-rail {
padding-left: 3.5rem;
}
}
@media (min-width: 1280px) {
.site-shell {
padding-left: 10.5rem;
padding-right: 5rem;
}
.site-shell--no-rail {
padding-left: 5rem;
}
}
.site-shell--page {
height: 100dvh;

1
app/web/src/views/mounts.astro
View File

@ -24,6 +24,7 @@ const labels: Record<string, string> = {
title={t(locale, "mounts.title")}
locale={locale}
nav={[]}
hideSideRail
switchHref={alternatePath(Astro.url.pathname, other)}
switchLabel={t(other, `locale.${other}` as never)}
seo={{