Where to put svelte default layout template components

Question

INTRODUCTION

In svelte, we know that default layout is store on

src/routes/+layout.svelte

and I also know some people use group layout

src/route/(app)/+layout.svelte

But that's not what I'm looking for since I only use a single layout.

EXPLANATION

Assuming the template contain navigation, breadcrumb, footer, widget & etc.

To code all inside this single +layout.svelte, it will ended up with thousand line of codes inside a single file. I would like to componentize each of them into a single file and use them inside the main +layout.svelte file. But the problem is. Where to place it?

WORKAROUND

Currently, I using the following scheme for my layout template

All the componentize layout template is store on

src/lib/templates

And inside that templates directory, I have the following scheme

src/lib/templates/breadcrumb/ all the .scss, .svelte, .ts related to breadcrumb

src/lib/templates/footer/ all the .scss, .svelte, .ts related to footer

src/lib/templates/the rest of my template/ all the .scss, .svelte, .ts related to the rest of my template

And using in +layout.svelte as follow

// src/routes/+layout.svelte

<script>
    import Navigation from '@templates/navigation/Navigation.svelte';
    ...
</script>

<div id="app">
    <Navigation />

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

Please note that @templates is a resolver alias

QUESTION

1. Is that this question is opinion based? If yes, could anyone suggest me your opinion on how you build the template for your application? Since I search for documentation and found nothing.
2. What is the best practice for layout templating in svelte

Thank you

Answer 1

Did not check the documentation, but my head tells me the Svelte documentation or the learning site recommends creating the components in the same folder where they are used, as long as they are only consumed in that folder. If the component is needed elsewhere, then it goes inside lib.