<!--
  - Copyright (c) 2022.
  - Author Peter Placzek (tada5hi)
  - For the full copyright and license information,
  - view the LICENSE file that was distributed with this source code.
  -->

<script>
import pageHeader from './header';
import pageSidebar from './sidebar';
import pageFooter from './footer';

export default {
    name: 'App',
    // eslint-disable-next-line vue/no-unused-components
    components: { pageFooter, pageSidebar, pageHeader },
    computed: {
        sidebarOpen() {
            return this.$store.getters['layout/sidebarOpen'];
        }
    }
}
</script>

<template>
    <div id="app">
        <page-header />
        <div class="page-wrapper">
            <transition name="slide">
                <page-sidebar v-if="sidebarOpen" />
            </transition>

            <div class="page-content">
                <nuxt />
            </div>
        </div>
        <page-footer />
    </div>
</template>
<style>
.slide-enter-active,
.slide-leave-active
{
    transition: transform 0.2s ease;
}

.slide-enter,
.slide-leave-to {
    transform: translateX(-100%);
    transition: all 150ms ease-in 0s
}

#__nuxt,
#__layout,
#app {
    height: 100%;
}
</style>
