<script setup lang="ts">
import { computed } from 'vue';
import { RouterView, useRoute } from 'vue-router';
import { Sidebar } from './sidebar';
import { routeNames } from '@/routes';

const route = useRoute();

const hideSidebar = computed(() => {
    return route.name === routeNames.callback || route.name === routeNames.about;
});
</script>

<template>
    <template v-if="hideSidebar">
        <RouterView />
    </template>
    <template v-else>
    <Sidebar />
        <div class="main-container">
            <RouterView />
        </div>
    </template>
</template>

<style scoped>
@reference "tailwindcss";

div.main-container {
    @apply px-4 sm:ml-64;
}
</style>

