palinxdocs
Get started

A shared layout

A _layout.ts wraps every page in its folder, so shared chrome like a menu lives in one file.

Add the layout

Create src/routes/_layout.ts:

src/routes/_layout.ts
import { Layout, html } from "@palinx/core";

// Wraps every page. `content` is the page being shown.
export default class AppLayout extends Layout {
  render(content: Node) {
    return html`
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
      </nav>
      <main>${content}</main>
    `;
  }
}

A layout extends Layout, and its render() receives the current page as content (a DOM node). The leading underscore keeps the file from becoming a page of its own.

The menu replaces the per-page links. In src/routes/index.route.ts:

src/routes/index.route.ts (changes since step 3)
 // There is no index.ts any more. `px dev` starts the server, and it finds
 // this page because the file lives in src/routes/.
 import { Route, html } from "@palinx/core";
 
 export default class Home extends Route {
   render() {
     return html`
       <h1>hello</h1>
-      <a href="/about">About</a>
     `;
   }
 }

And in src/routes/about.route.ts:

src/routes/about.route.ts (changes since step 3)
 import { Route, html } from "@palinx/core";
 
 export default class About extends Route {
   render() {
     return html`
       <h1>About</h1>
-      <a href="/">Home</a>
     `;
   }
 }

Run it

Both pages now show Home and About at the top, above their heading.

How it works

For each page, palinx renders the page and passes the result to every _layout.ts above it, innermost first. The layout is part of the page's first HTML, and when you navigate the menu stays on screen while the content changes. Nested folders can add their own layouts; see Routing & layouts.

Next: State and clicks.