Svelte Folder Structure

Overview

app.html file Structure.


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    %sveltekit.head%
</head>

<body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
</body>

</html>

+layout.svelte file Structure.

                            
                            
<script>
import { page } from '$app/stores';
import { onMount } from 'svelte';
import { browser } from '$app/environment';
import { goto } from '$app/navigation';
import VerticalLayout from '../VerticalLayout/Index.svelte';
import HorizontalLayout from '../HorizontalLayout/Index.svelte';
import { addMessages, init, getLocaleFromNavigator } from 'svelte-i18n';
import en from '../lang/en.json';

addMessages('en', en);

init({
    fallbackLocale: 'en',
    initialLocale: getLocaleFromNavigator()
});

let layoutType = 'vertical';
const changeLayout = () => {
    if (browser) {
        if (layoutType == 'horizontal') {
            document.body.setAttribute('data-layout', 'horizontal');
            document.body.setAttribute('data-topbar', 'dark');
            document.body.removeAttribute('data-sidebar');
        } else {
            document.body.setAttribute('data-layout', 'vertical');
            document.body.setAttribute('data-sidebar', 'dark');
            document.body.setAttribute('data-topbar', 'light');
        }
    }
};

onMount(() => {
    if (!isAuthenticate()) {
        goto('/auth/login');
    }
    changeLayout();
});

function isAuthenticate() {
    let user = browser && localStorage.authUser;
    if (!user) {
        return false;
    } else {
        return true;
    }
}

changeLayout();
let component = layoutType == 'vertical' ? VerticalLayout : HorizontalLayout;

const publicRoutes = [
    '/crypto/ico-landing',
    '/auth/login',
    '/auth/login-2',
    '/auth/register',
    '/auth/register-2',
    '/auth/recoverpw',
    '/auth/recoverpw-2',
    '/auth/lock-screen',
    '/auth/lock-screen-2',
    '/auth/confirm-mail',
    '/auth/confirm-mail-2',
    '/auth/email-verification',
    '/auth/email-verification-2',
    '/auth/two-step-verification',
    '/auth/two-step-verification-2',
    '/pages/maintenance',
    '/pages/comingsoon',
    '/pages/404',
    '/pages/500'
];

$: isPublic = publicRoutes.includes($page.url.pathname);
</script>

<svelte:head>
<script src="//cdn.jsdelivr.net/npm/apexcharts"></script>
<!-- jsvectormap -->
<script src="https://cdn.jsdelivr.net/npm/jsvectormap"></script>
<script src="https://cdn.jsdelivr.net/npm/jsvectormap/dist/maps/world.js"></script>
</svelte:head>

{#if isPublic}
<slot />
{:else}
<svelte:component this={component}>
    <slot />
</svelte:component>
{/if}

<style lang="scss">
@import './../assets/scss/bootstrap.scss';
@import './../assets/scss/app.scss';
@import './../assets/scss/icons.scss';
</style>

Layout setup

You can set the default layout in the src/common/RightSidebar.svelte file. 

let sidebarColor = 'dark';
let topbarColor = 'light';
let layoutWidth = 'fluid';
let layoutMode = 'light';
sidebarColor="light" To set light sidebar.
sidebarColor="dark" To set dark sidebar.
sidebarColor="colored" To set colored sidebar.
topbarColor="light" To set light topbar.
topbarColor="dark" To set dark topbar.
layoutWidth="fluid" To set fluid layout width.
layoutWidth="boxed" To set boxed layout width.
layoutWidth="scrollable" To set scrollable layout width.
layoutMode="light" To set Light layout mode.
layoutMode="dark" To set Dark layout mode.
© Skote.