Pinafore-Web-Client-Frontend/routes/_components/Layout.html

37 lines
857 B
HTML

<Nav {page} />
<div class="main-content">
<main class="{infiniteScrollPage ? 'infinite-scroll-page' : ''}">
<slot></slot>
</main>
{#if !$isUserLoggedIn && page === 'home'}
<InformationalFooter />
{/if}
</div>
<style>
/* this avoids a flash of the background color when switching timelines */
.infinite-scroll-page {
min-height: 100vh;
}
</style>
<script>
import Nav from './Nav.html'
import { store } from '../_store/store'
import InformationalFooter from './InformationalFooter.html'
export default {
components: {
Nav,
InformationalFooter
},
oncreate () {
let { page } = this.get()
this.store.set({ currentPage: page })
},
store: () => store,
computed: {
infiniteScrollPage: ({ $isUserLoggedIn, page }) => $isUserLoggedIn && page !== 'settings'
}
}
</script>