AstralRinth/theseus_gui/src/routes/library/instance/[id]/__layout.svelte

<script lang="ts">
    import VerticalNav from "$components/VerticalNav.svelte";
    import IconPackage from 'virtual:icons/lucide/package'
    import IconAdjustments from 'virtual:icons/heroicons-outline/adjustments'
    import IconFileText from 'virtual:icons/lucide/file-text'
</script>

<div class="layout-instance">
    <div class="instance-sidebar">
        <VerticalNav level={3} items={[
        {
            label: 'Mods',
            href: 'mods',
            icon: IconPackage,
        },
        {
            label: 'Settings',
            href: 'settings',
            icon: IconAdjustments,
        },
        {
            label: 'Logs',
            href: 'logs',
            icon: IconFileText,
        }
    ]}/>
    </div>

    <div class="layout-instance__page">
        <slot />
    </div>
</div>

<style lang="postcss">
    .layout-instance {
        display: grid;
        grid-template-columns: 224px 1fr;
        height: 100%;

        &__page {
            height: 100%;
            background-color: var(--sub-page-bg);
        }
    }

    .instance-sidebar {
        padding: 16px;
    }
</style>