How to leave parent layout in Sapper?

Question

Currently, I'm working on a project which shares a Menu component across all pages except two pages. I added the menu component inside root _layout.svelte file. Now since two pages that don't need Menu component are nested routes. The Menu is appearing inside them since they are child routes. They are made to look this way. But I think there should be some way to opt-out / leave the parent layout. Otherwise I would have to remove the _layout.svelte root file and add Menu component to each route which is too much against DRY. Is there a way to leave parent _layout.svelte in Sapper?

Answer 1

using child.segment to control which layout is used:

<!-- src/routes/_layout.html -->
{#if child.segment === 'login'}
  <svelte:component this={child.component} {...child.props}/>
{:else}
  <div class="fancy-layout">
    <svelte:component this={child.component} {...child.props}/>
  </div>
{/if}

Answer 2

I could not get the solution provided to work. Can anyone provide an working example or show the solution in a bigger context?

I did solve the same problem with an if statement checking the route path.

<!-- src/routes/_layout.svelte-->

<script>
  import { stores } from '@sapper/app'
  { page } = stores()
</script>

{#if $page.path != "/login"} <!-- If your route file is /src/routes/login.svelte -->
  <Nav {segment}/>
{/if}

<main>
  <slot></slot>
</main>