37 lines
1.0 KiB
Vue
37 lines
1.0 KiB
Vue
<template>
|
|
<div class="flex w-full">
|
|
<Transition>
|
|
<BodySidebar v-if="showSidebar && user.minecraft" />
|
|
</Transition>
|
|
<div class="h-screen w-full overflow-y-auto px-5 transition-all duration-300 ease-in-out" :class="{ 'xl:ms-56': showSidebar && user.minecraft }">
|
|
<div v-if="user.minecraft" class="mx-auto flex h-full w-full max-w-[92rem] flex-col">
|
|
<div class="my-5 text-xl font-bold">
|
|
<Icon size="1.6em" :name="!showSidebar ? 'heroicons:bars-3-center-left' : 'heroicons:chevron-left'" class="text-primary-500 mr-3 hover:cursor-pointer" @click="showSidebar = !showSidebar" />
|
|
{{ route.meta.title }}
|
|
</div>
|
|
<NuxtPage class="h-full" />
|
|
</div>
|
|
<BodyConnectminecraft v-else />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const route = useRoute()
|
|
const showSidebar = ref(true)
|
|
|
|
const user = useState<IUser>('user')
|
|
</script>
|
|
|
|
<style>
|
|
.v-enter-active,
|
|
.v-leave-active {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.v-leave-to,
|
|
.v-enter-from {
|
|
transform: translateX(-100%);
|
|
}
|
|
</style>
|