<template>
    <div class="home-view">
        <HeaderMain />
        <div class="home-view__view" :class="'home-view__view--transition-direction--' + navigationDirection">
            <RouterView v-slot="{ Component }" class="home-view__page">
                <Transition name="home-view__view--transition">
                    <KeepAlive>
                        <Component :is="Component" />
                    </KeepAlive>
                </Transition>
            </RouterView>
        </div>
        <NavigationBarMain class="home-view__navigation-bar" @direction="setDirection" />
    </div>
</template>

<script setup lang="ts">
import HeaderMain from "@/components/HomeView/Header/HeaderMain.vue";
import NavigationBarMain from "@/components/HomeView/NavigationBar/NavigationBarMain.vue";
import { ref } from "vue";

const navigationDirection = ref("none");

function setDirection(direction: string) {
    navigationDirection.value = direction;
}
</script>

<style lang="scss">
.home-view {
    height: 100%;
    display: flex;
    flex-direction: column;

    &__view {
        $__view: &;

        flex: 1;
        position: relative;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background: color("second-background");

        &--transition-direction {
            &--left {
                #{$__view}--transition {
                    &-enter-from {
                        transform: translateX(-100%);
                        opacity: 0;
                    }
                    &-leave-to {
                        transform: translateX(100%);
                        opacity: 0;
                    }
                }
            }

            &--right {
                #{$__view}--transition {
                    &-enter-from {
                        transform: translateX(100%);
                        opacity: 0;
                    }
                    &-leave-to {
                        transform: translateX(-100%);
                        opacity: 0;
                    }
                }
            }
        }

        &--transition {
            &-enter-active,
            &-leave-active {
                transition: all 0.1s ease-in-out;
            }
        }
    }

    &__page {
        position: absolute;
        top: 0;
        width: 100%;
        min-height: 100%;
    }

    &__navigation-bar {
        flex: 0 1 auto;
    }
}
</style>
