Sistema_Gestion_Transporte/src/layouts/Sidebar.svelte

<script>
    import { Link } from 'svelte-navigator'
    import SideLink from './SideLink.svelte'
</script>

<nav id="sidebar" class="sidebar js-sidebar">
    <div class="sidebar-content js-simplebar">
        <Link class="sidebar-brand" to="/">
            <span class="fs-1">🚌</span>
            <span class="align-middle">
                Transporte
            </span>
        </Link>

        <ul class="sidebar-nav">
            <li class="sidebar-header">Pages</li>

            <SideLink to="/">
                <i class="align-middle bi bi-house fs-4"></i>
                <span class="align-middle">Inicio</span>
            </SideLink>

            <SideLink to="/perfil">
                <i class="align-middle bi bi-person-lines-fill fs-4"></i>
                <span class="align-middle">Perfil</span>
            </SideLink>

            <li class="sidebar-header">Mantenedores</li>

            <SideLink to="/aplicaciones">
                <i class="align-middle bi bi-people fs-4" />
                <span class="align-middle">Aplicaciones</span>
            </SideLink>

            <SideLink to="/comunas">
                <i class="align-middle bi bi-people fs-4" />
                <span class="align-middle">Comunas</span>
            </SideLink>

            <SideLink to="/usuarios">
                <i class="align-middle bi bi-people fs-4" />
                <span class="align-middle">Usuarios</span>
            </SideLink>

            <SideLink to="/personas">
                <i class="align-middle bi bi-people fs-4" />
                <span class="align-middle">Personas</span>
            </SideLink>

        </ul>

    </div>
</nav>