How can I ignore default layout in svelte-kit?

Viewed 2172

I have a different layout I need for ./routes/login pages...I'm trying to ignore the main ./routes/__layout.svelte file as I dont' need the sidebar.

<script>
    import NavBar from '../components/NavBar.svelte';
</script>

<main>
    {#if segment === 'login'}
        <section>
            <slot />
        </section>
    {:else}
        <NavBar />
        <section>
            <slot />
        </section>
    {/if}
</main>

<style>
    main {
        display: flex;
        justify-content: flex-start;
    }

    section {
        padding: 2.4rem;
        width: 100%;
        background-color: #f2f6fa;
    }
</style>

I get an error segment is not defined.

1 Answers

Why not just reset the layout, this is builtin for sveltekit. Just create a file named __layout-foo.svelte inside your /routes routes. Then you can put all the components you want inside the file https://kit.svelte.dev/docs/layouts#named-layouts

Then address it in your page:

src/routes/my-special-page@foo.svelte
<h1>I am inside __layout-foo</h1>
Related