Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/y2k-webring/llms.txt

Use this file to discover all available pages before exploring further.

AppLayout is the single wrapper applied to every page in Y2K Webring. It establishes the three-column layout and conditionally activates Home-only decorative elements — SparkleTrail and RightWebring — while always rendering LeftNav and wrapping page content in PageTransitionBar.

​
Layout Structure

The outer container uses min-h-screen p-4 md:p-8 max-w-7xl mx-auto flex flex-col lg:flex-row gap-6 relative to build a responsive shell. On large screens the three columns appear side by side; on smaller screens they stack vertically. 
┌──────────────────────────────────────────────────────────────┐
│ LeftNav (w-full lg:w-64) │  <main> content  │ RightWebring   │
│      (persistent)        │    (flex-1)      │ (w-full lg:w-48│
│                          │                  │  Home only)    │
└──────────────────────────────────────────────────────────────┘

​
Props

​
children
ReactNode
required
The page component to render inside the <main> content area. AppLayout wraps this value in PageTransitionBar before rendering it.

​
Conditional Elements

Some elements only mount when the visitor is on the Home page (pathname === '/'). Others are always present.
ElementWhen Shown
SparkleTrailOnly when pathname === '/'
RightWebringOnly when pathname === '/'
LeftNavAlways
PageTransitionBarAlways (wraps children)
The pathname check is performed with React Router’s useLocation() hook inside AppLayout — no prop is required to toggle Home-only elements.

​
Usage

Wrap each top-level route component with AppLayout in your router configuration: 
import { AppLayout } from './components/layout/AppLayout';

<AppLayout>
  <HomePage />
</AppLayout>
Because LeftNav and PageTransitionBar are rendered unconditionally, every page automatically receives navigation and route-transition animation without any extra setup.

​
Responsive Behavior

AppLayout uses Tailwind’s responsive prefix to switch between a vertical and horizontal layout:
  • Below lg (< 1024 px) — the flex direction is flex-col, so LeftNav, <main>, and RightWebring stack vertically from top to bottom.
  • At lg and above (≥ 1024 px) — the flex direction switches to lg:flex-row, placing the three columns side by side.
Because RightWebring is conditionally rendered only on the Home page, the layout is effectively two columns (LeftNav + <main>) on all inner pages.

Build docs developers (and LLMs) love

Get started for freeTalk to us