Qwik City - Nested Layout

Most times it is desirable to nest layouts into each other. A page's content can be nested in numerous wrapping layouts, which is determined by the directory structure.

- src/
  - routes/
    - layout.tsx         # Parent layout
    - about/
      - layout.tsx       # Child layout
      - index.tsx        # https://example.com/about

In the above example, there are two layouts that apply themselves around the /about page component.

1. src/routes/layout.tsx
2. src/routes/about/layout.tsx

In this case, the layouts will nest each other with the page within each of them.

+------------------------------------------------+
|       src/routes/layout.tsx                    |
|  +------------------------------------------+  |
|  |    src/routes/about/layout.tsx           |  | 
|  |  +------------------------------------+  |  |
|  |  | src/routes/about/index.tsx         |  |  |
|  |  |                                    |  |  |
|  |  +------------------------------------+  |  |
|  |                                          |  |
|  +------------------------------------------+  |
|                                                |
+------------------------------------------------+

// File: src/routes/layout.tsx
export default component$(() => {
  return (
    <main>
      <Slot />{/* <== Child layout/route inserted here */}
    </main>
  );
});

// File: src/routes/about/layout.tsx
export default component$(() => {
  return (
    <section>
      <Slot />{/* <== Child layout/route inserted here */}
    </section>
  );
});

// File: src/routes/about/index.tsx
export default component$(() => {
  return <h1>About</h1>;
});

The above example would render the html:

<main>
  <section>
    <h1>About</h1>
  </section>
</main>

The default is that a page will create it's layout stack by climbing up each directory until it gets to the src/routes directory. If at any point it should stop climbing up the directories you can use the top layout feature.