1
0
Files
AstralRinth/theseus_gui/src/routes/__layout.svelte
2022-03-06 10:55:51 -08:00

46 lines
929 B
Svelte

<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>