61 lines
1.5 KiB
Svelte
61 lines
1.5 KiB
Svelte
<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> |