<script>
    import Footer from "./Footer.svelte";
    import SidebarItem from "./Sidebar/SidebarItem.svelte";
    import Header from "./Header.svelte";

    import Fa from 'svelte-fa'
    import {faImage} from '@fortawesome/free-regular-svg-icons'
    import HeaderItem from "./Header/HeaderItem.svelte";
</script>

<div class="container">
    <Header>
        <HeaderItem>
            <span class="sr-only">Logo</span>
            <Fa fw icon="{faImage}" size="2x"/>
        </HeaderItem>
        <HeaderItem>Posts</HeaderItem>
        <HeaderItem>Comments</HeaderItem>
        <slot name="header" />
        <HeaderItem>END ITEM</HeaderItem>
    </Header>
    <aside>
        <SidebarItem title="Navigation">YO YO</SidebarItem>
        <slot name="sidebar" />
        <SidebarItem title="Log In"></SidebarItem>
    </aside>
    <main><slot /></main>
    <Footer/>
</div>


<style>
    .container {
        display: grid;
        min-width: 100vw;
        min-height: 100vh;
        grid-template-columns: 1fr 5fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
                "header header"
                "sidebar content"
                "footer footer";
        grid-gap: 1rem;
    }

    .container main {
        grid-area: content;
    }

    .container aside {
        grid-area: sidebar;
    }

    :global(.dark) .container > * {
        border: 1px solid #ddd;
    }
    .container > * {
        border: 1px solid #333;
        padding: 1rem;
    }
</style>