Multi-pages with layout?

[crapthings]

how to replace main content while navigate through router

[yoshuawuyts]

You can nest functions like this:

const app = choo()

app.router((route) => [
  route('/foo', common(fooView)),
  route('/bar', common(barView))
])

function common (mainView) {
  return function (params, state, send) {
    return html`
      <aside>sidebar content</aside>
      <main>${mainView(params, state, send)}</main>
    `
  }
}

function fooView (params, state, send) {
  return html`<div>foo</div>`
}

function barView (params, state, send) {
  return html`<div>bar</div>`
}

The morphdom algorithm should do the work to ensure these transitions happen as smooth as possible. Does this answer your question?

[hew]

@yoshuawuyts I think that should be view`` instead ofhtml``.

[yoshuawuyts]

@hew oh, I nowadays usually do const html = choo.view to have parity with const css = require('sheetify') from sheetify

Using css and html as var names makes stuff pretty straight forward I've found :sparkles:

[hew]

@yoshuawuyts That makes sense. 👍🏽

[yoshuawuyts]

I'm going to assume this solves your issue. Thanks for opening! :sparkles: