AstralRinth/theseus_gui/src/components/layout/StatusBar.svelte

<script lang="ts">
    import IconChevronLeft from 'virtual:icons/lucide/chevron-left';
    import IconChevronRight from 'virtual:icons/lucide/chevron-right';
    import IconCaretRight from 'virtual:icons/carbon/caret-right';
    import { page } from '$app/stores'

    let path: string[];
    $: path = $page.url.pathname
        .substring(1)
        .split('/')
</script>

<div class="status-bar">
    <div class="page-nav">
        <button title="Back" on:click={() => window.history.back()}>
            <IconChevronLeft />
        </button>
        <button title="Forward" on:click={() => window.history.forward()}>
            <IconChevronRight />
        </button>
    </div>

    <div class="breadcrumbs">
        {#each path as crumb, index}
            {#if index !== 0}
                <div class="breadcrumbs__separator"><IconCaretRight /></div>
            {/if}
            <a class="breadcrumbs__crumb" href={crumb}>{crumb || 'home'}</a>
        {/each}
    </div>

    <div class="statuses">
        <div>Updating 12 mods...</div>
        <div>236 mods installed</div>
    </div>
</div>

<style lang="postcss">
    .status-bar {
        display: flex;
        padding: 0.75rem;
        grid-gap: 0.75rem;
        background-color: var(--status-bg);
        width: 100%;
        height: 100%;
        align-items: center;
        box-shadow: var(--shadow-raised);
    }

    .breadcrumbs {
        display: flex;
        grid-gap: 0.25rem;
        text-transform: capitalize;

        &__crumb:hover {
            text-decoration: underline;
        }

        &__separator {
            color: var(--color-text-lightest)
        }
    }

    .statuses {
        margin-left: auto;
        display: flex;
        grid-gap: 1rem;
        color: var(--color-text-lightest);
    }
</style>