docs: handle layout without toc

This commit is contained in:
Benjamin Canac
2023-05-17 12:13:24 +02:00
parent d93e995298
commit b795f0f65b
2 changed files with 4 additions and 3 deletions

View File

@@ -6,7 +6,7 @@
<div class="relative grid lg:grid-cols-10 lg:gap-8"> <div class="relative grid lg:grid-cols-10 lg:gap-8">
<DocsAside class="lg:col-span-2" /> <DocsAside class="lg:col-span-2" />
<div class="relative lg:col-span-6 pt-8 pb-16"> <div class="relative pt-8 pb-16" :class="[toc ? 'lg:col-span-6' : 'lg:col-span-8']">
<DocsPageHeader /> <DocsPageHeader />
<NuxtPage /> <NuxtPage />
@@ -16,7 +16,7 @@
<DocsPrevNext /> <DocsPrevNext />
</div> </div>
<DocsToc class="lg:col-span-2 order-first lg:order-last" /> <DocsToc v-if="toc" class="lg:col-span-2 order-first lg:order-last" />
</div> </div>
</UContainer> </UContainer>
@@ -29,6 +29,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const { toc } = useContent()
const colorMode = useColorMode() const colorMode = useColorMode()
// Computed // Computed

View File

@@ -1,5 +1,5 @@
<template> <template>
<div v-if="toc" class="sticky top-16 bg-white/75 dark:bg-gray-900/75 backdrop-blur group lg:self-start -mx-4 sm:-mx-6 lg:mx-0 px-4 sm:px-6 lg:pl-8 lg:pr-0"> <div class="sticky top-16 bg-white/75 dark:bg-gray-900/75 backdrop-blur group lg:self-start -mx-4 sm:-mx-6 lg:mx-0 px-4 sm:px-6 lg:pl-8 lg:pr-0">
<div class="py-3 lg:py-8 border-b border-dashed border-gray-200 dark:border-gray-800 lg:border-0"> <div class="py-3 lg:py-8 border-b border-dashed border-gray-200 dark:border-gray-800 lg:border-0">
<button class="flex items-center gap-2" tabindex="-1" @click="isTocOpen = !isTocOpen"> <button class="flex items-center gap-2" tabindex="-1" @click="isTocOpen = !isTocOpen">
<span class="text-sm text-slate-900 font-semibold text-sm leading-6 dark:text-slate-100 truncate">Table of Contents</span> <span class="text-sm text-slate-900 font-semibold text-sm leading-6 dark:text-slate-100 truncate">Table of Contents</span>