<script setup lang="ts">

const reader = useReaderStore()

</script>

<template>

<div class="min-h-screen bg-white dark:bg-gray-900">

<the-navbar v-show="!reader.isActive" />

<the-navbar-reader v-show="reader.isActive" />

<div

class="relative mx-auto flex min-h-screen max-w-8xl justify-center sm:px-2 lg:px-8 xl:px-12"

>

<!-- article -->

<div

class="min-w-0 flex-auto px-4 py-12 xl:pr-16"

:class="[reader.isActive ? 'max-w-2xl lg:max-w-4xl' : 'lg:max-w-4xl']"

>

<article>

<prose><RouterView /></prose>

</article>

<the-footer

repository="https://github.com/labex-labs/python-cheatsheet/blob/master/docs"

/>

</div>

<!-- table of content -->

<div

v-show="!reader.isActive"

class="hidden w-64 overflow-x-hidden xl:sticky xl:top-[4.3rem] xl:-mr-6 xl:block xl:h-[calc(100vh-3.6rem)] xl:flex-none xl:overflow-y-auto xl:py-10 xl:pr-6"

>

<the-toc />

</div>

</div>

</div>

</template>