<script>
    import { useAnswersStore } from '@/stores/answers.js'
    import { useResultsStore } from '@/stores/results.js'
    import Sidebar from '@/components/sidebar/Index.vue'
    export default {
        name: 'AboutIndex',
        components: {
            Sidebar
        },
        setup() {
            const answersStore = useAnswersStore()
            const resultsStore = useResultsStore()

            return {
                answersStore,
                resultsStore
            }
        },
        mounted() {
            if (this.answersStore.quizCurrent == null) {
                this.answersStore.$reset()
            }
            this.resultsStore.$reset()
        }
    }
</script>
<template>
    <div>
        <div class="flex flex-col space-y-3 md:flex-row md:space-x-6 md:space-y-0">
            <div class="flex flex-col w-full md:w-1/3 h-fit">
                <Sidebar :prefix="$router.options.routes[2].path" :routes="$router.options.routes[2].children">
                    <template v-slot:header>
                        About
                    </template>
                </Sidebar>
            </div>
            <div class="flex w-full md:w-2/3">
                <router-view v-slot="{ Component, route }" class="w-full" ref="panel" appear>
                    <Transition mode="out-in"
                        :enter-active-class="route.meta.panelEnterActiveClass"
                        :enter-from-class="route.meta.panelEnterFromClass"
                        :leave-active-class="route.meta.panelLeaveActiveClass"
                        :leave-to-class="route.meta.panelLeaveToClass"
                    >
                        <component :is="Component" />
                    </Transition>
                </router-view>
            </div>
        </div>
    </div>
</template>