<script lang="ts">
    import '@fontsource/inter'
    import Sidebar from '$lib/../components/layout/Sidebar.svelte'
    import StatusBar from "../components/layout/StatusBar.svelte";
    import Page from "../components/layout/Page.svelte";
</script>

<svelte:head>
    <style lang="postcss">
        @import "../styles/global.postcss";
    </style>
</svelte:head>

<div class="app">
    <Sidebar />
    <StatusBar />
    <Page>
        <slot/>
    </Page>
</div>

<style lang="postcss">
    .app {
        height: 100%;
        width: 100%;
        display: grid;
        grid-template-areas:
            "sidebar status-bar"
            "sidebar page";
        grid-template-rows: 2.5rem 1fr;
        grid-template-columns: 14rem 1fr;
    }

    :global(.page) {
        grid-area: page;
    }

    :global(.sidebar) {
        grid-area: sidebar;
    }

    :global(.status-bar) {
        grid-area: status-bar;
    }
</style>
