4dkankan-components/docs/.vitepress/vitepress/components/doc-content/vp-table-of-content.vue

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useToc } from '../../composables/use-toc'
import { useActiveSidebarLinks } from '../../composables/active-bar'

// import sponsorLocale from '../../../i18n/component/sponsor.json'
import { useLang } from '../../composables/lang'
// import SponsorsButton from '../sponsors/sponsors-button.vue'
// import SponsorRightTextList from '../sponsors/right-richtext-list.vue'
// import SponsorRightLogoSmallList from '../sponsors/right-logo-small-list.vue'
// import SponsorLarge from '../vp-sponsor-large.vue'

const headers = useToc()
const marker = ref()
const container = ref()
useActiveSidebarLinks(container, marker)
const lang = useLang()
// const sponsor = computed(() => sponsorLocale[lang.value])
</script>

<template>
    <aside ref="container" class="toc-wrapper">
        <nav class="toc-content">
            <h3 class="toc-content__heading">Contents</h3>
            <ul class="toc-items">
                <li v-for="{ link, text, children } in headers" :key="link" class="toc-item">
                    <a class="toc-link" :href="link" :title="text">{{ text }}</a>
                    <ul v-if="children">
                        <li v-for="{ link: childLink, text: childText } in children" :key="childLink" class="toc-item">
                            <a class="toc-link subitem" :href="childLink" :title="text">{{ childText }}</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <div ref="marker" class="toc-marker" />
            <!-- <SponsorLarge
        class="mt-8 toc-ads flex flex-col"
        item-style="width: 180px; height: 55px;"
      /> -->
            <!-- <p class="text-14px font-300 color-$text-color-secondary">
                {{ sponsor.sponsoredBy }}
            </p> -->
            <!-- <sponsors-button class="sponsors-button mt-4 w-100%" />
            <sponsor-right-logo-small-list />
            <sponsor-right-text-list /> -->
        </nav>
    </aside>
</template>
<style scoped lang="scss">
.sponsors-button:deep {
    button {
        width: 100%;
    }
}
</style>