admin_transporte_frontend/src/layouts/LayoutUser.svelte

<svelte:head>
    <title>Transporte: Usuario</title>
</svelte:head>

<script>
    import 'bootstrap/dist/css/bootstrap.min.css'
    import '@adminkit/core/dist/css/app.css'
    import '@adminkit/core/dist/js/app.js'
    import 'bootstrap-icons/font/bootstrap-icons.css'
    import '../assets/colors.css'
    import '../assets/custom.css'
    import Navbar from './Navbar.svelte'
    import Sidebar from './Sidebar.svelte'
    import Footer from './Footer.svelte'
    import Notifications from './Notifications.svelte'
    import { getRoutes } from '$/routes/user.routes'
    import { Router, Route, createHistory } from 'svelte-navigator'
    import hashHistory from './hashHistory'
    import { onMount } from 'svelte'
    import { getInfoToken } from '$/services/login'
    import { storeSession } from '$/stores/global'
    import Toast from '$/components/Toast.svelte';


    let triggerEvent = false;
    // @ts-ignore
    const history = createHistory(hashHistory())
    let routes = []

    getRoutes()
        .then(data => routes = data)
        .catch(error => alert(error))

    onMount(() => {
        triggerEvent && document.dispatchEvent(new Event('DOMContentLoaded'));
    })

    async function begin() {
        try {
            $storeSession = await getInfoToken()
        } catch (error) {
            alert(error.message || error)
        }
    }
    begin()
</script>

<div class="wrapper">
    <Router {history} primary={false}>
        <Sidebar />

        <div class="main">
            <Navbar />

            <main class="content">
                <div class="container-fluid p-0">

                    {#each routes as r, index}
                        <Route path={r.path} >
                            <svelte:component this={r.component} />
                        </Route>
                    {/each}

                </div>
            </main>

            <Footer />
        </div>
    </Router>
</div>

<Notifications />
<Toast />