Pixelstrap - Admin Document

Svelte file structure

Codeigniter yet highly flexible, layout system that makes it easy to use one or more basic layouts throughout our theme, making it more readable and easy to modify.

We have created views/layout which contains all the common scss and javascript files and we have also included header and footer in this file as they are the same in a majority of the pages.

App.svelte

   
<script>
    import { Router } from 'svelte-navigator';
    import Layout from './Layout/Layout.svelte';
    import LayoutRouter from './Routes/LayoutRouter.svelte';
    import { isDarkMode, userName } from './store';
    import AuthRouter from './Routes/AuthRouter.svelte';
    import AuthRoutes from './Routes/AuthRoutes';
    var isAuthRoute = false;
    let darkMode;
    let username;

    isDarkMode.subscribe((value) => {
        darkMode = value;
    });
    $: darkMode ? document.body.classList.add("dark-only") : document.body.classList.remove("dark-only");

    $: AuthRoutes.map((item) => {
        if (item.path === window.location.pathname) {
            isAuthRoute = true;
            return false;
        }
        });

    userName.subscribe((value) => {
        username = value;
    });
</script>


<Router>
    <main>
        {#if username !== null && !isAuthRoute}
            <Layout>
                <LayoutRouter />
            </Layout>
            {:else}
            <AuthRouter />
        {/if}
    </main>
</Router>
<style lang="scss" global>
    @import './global.scss';
</style>

As you can see, we have extended the App.svelte file and added additional scss and javascript files below the 'script' and 'style' blocks.

You can see that we have used include , to add multiple sections of the page. We have divided the page into small sections and used include to add them where they are required.

These small sections of code are in the layout folder.