Skip to content

feat(app): left sidebar app shell with grouped navigation / 左侧边栏应用外壳与分组导航 #883

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
adibarra wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

feat(app): left sidebar app shell with grouped navigation / 左侧边栏应用外壳与分组导航 #883

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4a09508
feat(app): redesign navbar, landing page, and footer with editorial l…
AgentMedia1942 Aug 27, 2026
702e186
feat(app): left sidebar app shell with grouped navigation
AgentMedia1942 Aug 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 95 additions & 38 deletions packages/app/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,9 +119,15 @@
--color-card: var(--card);

/* Fonts */
--font-sans: var(--font-dm-sans);
--font-sans: var(--font-instrument-sans, var(--font-dm-sans));
--font-mono: monospace;

/* Brand surfaces */
--color-mint: var(--mint);
--color-mint-foreground: var(--mint-foreground);
--color-ink: var(--ink);
--color-ink-foreground: var(--ink-foreground);

/* Breakpoints */
--breakpoint-2xl: 80rem;
--breakpoint-3xl: 80rem;
Expand All @@ -139,29 +145,36 @@

:root {
/* Setup variables */
--radius: 0.625rem;

/* Base Theme Colors */
--background: #eaebec;
--foreground: #131416;
--card: #eaebec;
--card-foreground: #131416;
--popover: #fafafa;
--popover-foreground: #171717;
--primary: #f7b041;
--primary-foreground: #fafafa;
--radius: 0.75rem;

/* Base Theme Colors — clean research-institute palette: white ground,
near-black ink, deep-teal accent, mint call-to-action surfaces. */
--background: #ffffff;
--foreground: #090c0c;
--card: #ffffff;
--card-foreground: #090c0c;
--popover: #ffffff;
--popover-foreground: #090c0c;
--primary: #077463;
--primary-foreground: #ffffff;
--secondary: #0b86d1;
--secondary-foreground: #fafafa;
--brand: var(--secondary);
--muted: #b4b9bc;
--muted-foreground: #27272a;
--accent: #fafafa;
--accent-foreground: #1d1f21;
--destructive: oklch(0.704 0.191 22.216);
--border: #656b72;
--border-alt: #c2ccd7;
--input: #656b72;
--ring: #27272a;
--brand: var(--primary);
--muted: #eef0ef;
--muted-foreground: #4d5754;
--accent: #e6fef3;
--accent-foreground: #090c0c;
--destructive: oklch(0.577 0.245 27.325);
--border: #dbe0de;
--border-alt: #edf0ef;
--input: #c8cfcc;
--ring: #077463;

/* Mint pill CTA + dark ink band surfaces */
--mint: #70efd1;
--mint-foreground: #04211c;
--ink: #0e2b26;
--ink-foreground: #e9f4f0;

/* Sidebar */
--sidebar: oklch(0.205 0 0);
Expand All @@ -186,27 +199,34 @@
}

.dark {
/* Base Theme Colors */
--background: #131416;
--foreground: #eaebec;
--card: #131416;
--card-foreground: #eaebec;
--popover: #171717;
--popover-foreground: #fafafa;
--primary: #f7b041;
--primary-foreground: #131416;
/* Base Theme Colors — dark translation of the light palette: deep
teal-black ground with the mint accent carrying brand emphasis. */
--background: #0b1413;
--foreground: #e8f1ee;
--card: #101c1a;
--card-foreground: #e8f1ee;
--popover: #12211e;
--popover-foreground: #e8f1ee;
--primary: #70efd1;
--primary-foreground: #04211c;
--secondary: #0b86d1;
--secondary-foreground: #fafafa;
--brand: var(--primary);
--muted: #27272a;
--muted-foreground: #b4b9bc;
--accent: #1d1f21;
--accent-foreground: #fafafa;
--muted: #1b2b28;
--muted-foreground: #9db3ad;
--accent: #16302a;
--accent-foreground: #e8f1ee;
--destructive: oklch(0.704 0.191 22.216);
--border: #656b72;
--border-alt: #222426;
--border: #29403b;
--border-alt: #16211f;
--input: oklch(1 0 0 / 15%);
--ring: #fafafa;
--ring: #70efd1;

/* Mint pill CTA + ink band surfaces */
--mint: #70efd1;
--mint-foreground: #04211c;
--ink: #0e2b26;
--ink-foreground: #e9f4f0;

/* Sidebar */
--sidebar-foreground: oklch(0.985 0 0);
Expand All @@ -230,6 +250,33 @@
--overlay-run-7: oklch(0.78 0.18 60);
}

/* ── Footer ink band ──
Rescopes the theme tokens inside the footer so its children (links, star
button, share buttons) render light-on-dark without per-component edits.
Skipped under the minecraft theme, which owns its full-page look. */
html:not(.minecraft) .footer-ink {
--background: var(--ink);
--foreground: var(--ink-foreground);
--card: #143530;
--card-foreground: var(--ink-foreground);
--popover: #143530;
--popover-foreground: var(--ink-foreground);
--primary: var(--mint);
--primary-foreground: var(--mint-foreground);
--brand: var(--mint);
--muted: #16332e;
--muted-foreground: #a4bfb8;
--accent: #16332e;
--accent-foreground: var(--ink-foreground);
--border: #23443d;
--border-alt: #1a3831;
--input: #23443d;
--ring: var(--mint);

background-color: var(--ink);
color: var(--ink-foreground);
}

/* ── Minecraft Theme ── */
.minecraft {
--background: #1e1e1e;
Expand Down Expand Up @@ -333,6 +380,16 @@
border-image: linear-gradient(to right, #7fb238, #5d9b47, #7fb238, #526935, #7fb238) 1 !important;
}

/* From xl up the header is a left sidebar, so the grass strip moves to its
right edge and runs top-to-bottom instead of underlining a top bar. */
@media (min-width: 80rem) {
.minecraft header {
border-bottom: 0 !important;
border-right: 3px solid transparent !important;
border-image: linear-gradient(to bottom, #7fb238, #5d9b47, #7fb238, #526935, #7fb238) 1 !important;
}
}

/* Sunken slot effect on cards */
.minecraft .border-border {
border: 2px solid;
Expand Down
35 changes: 19 additions & 16 deletions packages/app/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,12 @@ import './globals.css';
import { Analytics } from '@vercel/analytics/next';
import { SpeedInsights } from '@vercel/speed-insights/next';
import type { Metadata } from 'next';
import { DM_Sans } from 'next/font/google';
import { DM_Sans, Instrument_Sans } from 'next/font/google';
import localFont from 'next/font/local';

import { Footer } from '@/components/footer/footer';
import { Header } from '@/components/header/header';
import { JsonLd } from '@/components/json-ld';
import { CircuitBackground } from '@/components/circuit-background';
import { MinecraftBackgroundLazy } from '@/components/minecraft/minecraft-background-lazy';
import { MinecraftDecorations } from '@/components/minecraft/minecraft-decorations';
import { ThemeProvider } from '@/components/ui/theme-provider';
Expand Down Expand Up @@ -39,6 +38,14 @@ const dm_sans = DM_Sans({
variable: '--font-dm-sans',
});

// Primary UI grotesque. DM Sans stays loaded for chart export rendering
// (useChartExport resolves --font-dm-sans) and as the sans fallback.
const instrument_sans = Instrument_Sans({
subsets: ['latin'],
display: 'swap',
variable: '--font-instrument-sans',
});

const monocraft = localFont({
src: './fonts/Monocraft.woff2',
variable: '--font-minecraft',
Expand Down Expand Up @@ -190,16 +197,9 @@ export default async function RootLayout({
const starCount = await fetchStarCount();
return (
<html lang="en" className={monocraft.variable} suppressHydrationWarning>
<head>
<link
rel="preload"
as="image"
href="/brand/left-pattern-full.svg"
fetchPriority="high"
media="(min-width: 640px)"
/>
</head>
<body className={`${dm_sans.variable} antialiased relative min-h-screen flex flex-col`}>
<body
className={`${dm_sans.variable} ${instrument_sans.variable} antialiased relative min-h-screen flex flex-col`}
>
<style
id="landing-banner-prepaint-style"
dangerouslySetInnerHTML={{ __html: landingBannerPrepaintStyle }}
Expand All @@ -209,24 +209,27 @@ export default async function RootLayout({
suppressHydrationWarning
dangerouslySetInnerHTML={{ __html: landingBannerPrepaintScript }}
/>
<CircuitBackground />
<MinecraftBackgroundLazy />
<MinecraftDecorations />
<PostHogProvider>
<JsonLd data={jsonLd} />
<QueryProvider>
<ThemeProvider
attribute="class"
defaultTheme="dark"
defaultTheme="light"
themes={['light', 'dark', 'minecraft']}
enableSystem
disableTransitionOnChange
>
<PostHogPageView />
<VisitTracker />
<Header starCount={starCount} />
<div className="grow flex flex-col">{children}</div>
<Footer starCount={starCount} />
{/* From xl up the header renders as a fixed 18rem left sidebar,
so the content column (pages + footer) shifts right to match. */}
<div className="grow flex flex-col min-w-0 xl:pl-72">
<div className="grow flex flex-col">{children}</div>
<Footer starCount={starCount} />
</div>
</ThemeProvider>
</QueryProvider>
{process.env.VERCEL && <Analytics />}
Expand Down
Loading