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">
<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 />
<NuxtPage />
@@ -16,7 +16,7 @@
<DocsPrevNext />
</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>
</UContainer>
@@ -29,6 +29,7 @@
</template>
<script setup lang="ts">
const { toc } = useContent()
const colorMode = useColorMode()
// Computed

View File

@@ -1,5 +1,5 @@
<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">
<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>