<script setup lang="tsx">
import NavItem from '~/components/ppt/NavItem.vue'

useSeoMeta({
  title: '智能生成',
})
</script>

<template>
  <div class="w-full flex relative">

    <div class="absolute -translate-x-full md:sticky md:translate-x-0 z-10 flex flex-col h-[calc(100vh-4rem)] bg-neutral-100 dark:bg-neutral-900 p-4 w-full md:w-[300px]
               border-r border-neutral-200 dark:border-neutral-700 transition-all duration-300 ease-out">
      <div class="flex flex-col flex-1 overflow-auto overflow-x-hidden">
        <div class="flex flex-col gap-1">
          <ClientOnly>
            <NavItem
                icon="tabler:presentation-analytics"
                label="微课视频生成"
                to="/aigc/generation/video-generate"
            />
            <NavItem
                icon="tabler:user-screen"
                label="数字讲师"
                to="/aigc/generation/digital-teachers"
            />
          </ClientOnly>
        </div>
      </div>
    </div>

    <LoginNeededContent
        content-class="h-[calc(100vh-4rem)] flex-1 bg-white dark:bg-neutral-900"
    >
      <Transition name="subpage" mode="out-in">
        <NuxtPage :page-key="route => route.fullPath"/>
      </Transition>
    </LoginNeededContent>

  </div>
</template>

<style>
.subpage-enter-active,
.subpage-leave-active {
  transition: opacity 0.3s;
}

.subpage-enter-from,
.subpage-leave-to {
  opacity: 0;
}
</style>